Liquid Glacier 🧊 #

A Flutter package that applies Apple's Liquid Glass design language to Material widgets. Features translucent surfaces, dynamic blur effects, subtle reflections, and depth-based layering.

Author: Osman Demiröz

✨ Features #

• 🔮 Translucent Surfaces - Frosted glass effect using BackdropFilter
• 🎨 Dynamic Blur - Configurable blur intensity (sigma 5-25)
• ✨ Subtle Reflections - Gradient overlays for glass-like highlights
• 📐 Depth & Layering - Multi-layer shadows for visual depth
• 🎭 Smooth Animations - Hover, press, and focus state animations
• 🌓 Light/Dark Mode - Auto-adapts to theme brightness

📸 Screenshots #

📦 Installation #

dependencies:
  liquid_glacier: ^0.0.1

🚀 Quick Start #

Wrap your app with LiquidGlassTheme to configure the global glass effect:

import 'package:liquid_glacier/liquid_glacier.dart';

void main() {
  runApp(
    LiquidGlassTheme(
      data: LiquidGlassThemeData(
        blurSigma: 12.0,
        opacity: 0.2,
        tintColor: Colors.white,
      ),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    ),
  );
}

🧩 Available Widgets #

🎨 Theme Configuration #

LiquidGlassThemeData(
  blurSigma: 10.0,          // Blur intensity (5-25)
  opacity: 0.15,            // Glass opacity (0.0-1.0)
  borderRadius: BorderRadius.circular(16),
  tintColor: Colors.white,  // Glass tint
  reflectionColor: Colors.white,
  animationDuration: Duration(milliseconds: 200),
  enableReflection: true,   // Gradient overlay
  enableShadow: true,       // Depth shadows
  borderWidth: 0.5,
  borderColor: Colors.white.withOpacity(0.3),
)

📱 Examples #

Glass Card #

LiquidGlassCard(
  onTap: () => print('Tapped!'),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text('Glass Card'),
  ),
)

Glass Radio Button #

LiquidGlassRadioButton<int>(
  value: 1,
  groupValue: selectedValue,
  onChanged: (val) => setState(() => selectedValue = val),
  glassColor: Colors.blue,
  label: Text('Option 1'),
)

Glass Button #

LiquidGlassElevatedButton(
  onPressed: () {},
  icon: Icon(Icons.send),
  child: Text('Send'),
)

Glass App Bar #

Scaffold(
  appBar: LiquidGlassAppBar(
    title: Text('My App'),
    actions: [
      LiquidGlassIconButton(
        icon: Icon(Icons.settings),
        onPressed: () {},
      ),
    ],
  ),
  body: ...,
)

Glass Dialog #

showLiquidGlassDialog(
  context: context,
  builder: (context) => LiquidGlassAlertDialog(
    icon: Icon(Icons.check_circle),
    title: Text('Success'),
    content: Text('Operation completed.'),
    actions: [
      LiquidGlassTextButton(
        onPressed: () => Navigator.pop(context),
        child: Text('OK'),
      ),
    ],
  ),
);

🎯 Best Practices #

1. Use over vibrant backgrounds - Glass effect shines over images/gradients
2. Keep opacity low - 0.1-0.3 works best for readability
3. Moderate blur - Sigma 8-15 balances effect and performance
4. Test on devices - BackdropFilter can be expensive on older devices

📄 License #

MIT License - see LICENSE for details.