❄️ 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

Image

🎯 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

MIT License © 2025 Muhammad Omar

👨‍💻 Author

Developed with ❤️ by @MuhammadOmar29

🙌 Support

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

Libraries

frostedify