Frostedify

Frostedify brings the stunning Liquid Glass UI (Glassmorphism) to your Flutter apps. Add beautiful blur, gradients, shimmer effects, and glass-style components — all in one easy-to-use package.

Inspired by Apple’s glass UI on iOS

Why Frostedify?

Clean, reusable Frostedify Glass Container
Frostedify Glass Button, Frostedify Glass Card, Frostedify Glass Dialog, Frostedify Navigation, and Frostedify Glass AppBar
Optional Frostedify ShimmerEffect (animated light glint)
Platform-aware rendering (Android, iOS, Web, Desktop)
Easy to use, beautifully customizable

Installation

Add to your pubspec.yaml:

dependencies:
  frostedify: ^1.0.0

Then run:

flutter pub get

Getting Started

Import the package:

import 'package:frostedify/frostedify.dart';

Components & Usage

FrostedifyGlassContainer

FrostedifyGlassContainer(
  height: 100,
  width: 300,
  child: Text("Glass UI", style: TextStyle(color: Colors.white)),
)

FrostedifyGlassButton

FrostedifyGlassButton(
  label: "Click Me",
  icon: Icons.touch_app,
  onPressed: () {},
)

FrostedifyGlassCard

FrostedifyGlassCard(
  child: Column(
    children: [
      Icon(Icons.ac_unit),
      Text("Cool Card"),
    ],
  ),
)

FrostedifyGlassAppBar

FrostedifyGlassAppBar(title: 'Frostedify')

FrostedifyGlassDialog

FrostedifyGlassDialog(
  title: "Hello!",
  content: "This is a glass dialog",
  onConfirm: () => Navigator.pop(context),
)

ShimmerEffect

Stack(
  alignment: Alignment.center,
  children: [
    FrostedifyGlassContainer(child: Text("Shimmering")),
    const LiquidShimmer(),
  ],
)

FrostedifyNaviagationBar

  FrostedifyNaviagationBar(
  currentIndex: index,
  onTap: (i) => setState(() => index = i),
  items: [
    FrostedifyNaviagationBootomNavigationClass(icon: Icons.home, label: 'Home'),
    FrostedifyNaviagationBootomNavigationClass(icon: Icons.favorite, label: 'Likes'),
    FrostedifyNaviagationBootomNavigationClass(icon: Icons.person, label: 'Profile'),
      FrostedifyNaviagationBootomNavigationClass(icon: Icons.settings, label: 'Setting'),

  ],
),

Run Example

cd example
flutter run

Customize

Prop	Description	Default
`blur`	Blur intensity (sigma)	`15`
`borderRadius`	Border curve	`Radius.circular(20)`
`gradient`	Optional background gradient	`null`
`color`	Background color overlay	`white.withOpacity(.2)`

Platform Support

iOS
Android
Web
Desktop (macOS, Windows, Linux)

Contributing

Have ideas, feedback, or features to add?
We welcome pull requests and issues from the community!

License

Author

Developed with by @MuhammadOmar

Support

If you like this package, please it on GitHub and share it with the Flutter community!