LiquidGlassContainer #

LiquidGlassContainer is a Flutter widget that simulates a fluid, refractive glass container using custom shaders and real-time background capture. It creates a visually rich and dynamic lens-like distortion effect, perfect for Apple-26 style UI designs.

✨ Features #

• 💧 Realistic lens distortion using FragmentShader (Yes, supports Web)
• 🌈 Supports refraction, chromatic dispersion, and distortion effects
• 🧊 Captures and crops live background content using a GlobalKey
• 💡 Highly customizable: color, shadow, padding, and visual parameters
• 📦 Built-in integration with smooth_corner
• 🎨 Smooth corner rendering with adjustable border radius and smoothness
• 🎉 Almost supports all platforms that Flutter supports

How To Use #

1.Create a Background Key #

Wrap your background with a RepaintBoundary and assign a GlobalKey:

final GlobalKey _backgroundKey = GlobalKey();

RepaintBoundary(
  key: _backgroundKey,
  child: YourBackgroundWidget(),
);

2.Use the LiquidGlassContainer #

LiquidGlassContainer(
  width: 300,
  height: 200,
  backgroundKey: _backgroundKey,
  borderRadius: 20,
  color: Colors.white.withOpacity(0.1),
  child: Center(child: Text("Hello Glass")),
);

Example #

final GlobalKey _backgroundKey = GlobalKey();
...
Scaffold(
  body: Stack(
    children: [
      // Background
      RepaintBoundary(
        key: _backgroundKey,
        child: Container(
          child: Text(
            "李逵\n格拉斯",
            style: TextStyle(
              fontSize: 80,
              color: Theme.o(context)colorSchemeprimary,
            ),
          ),
        ),
      ),
      Positioned(
        child: LiquidGlassContainer(
          backgroundKey: _backgroundKey,
          color:Theme.of(context).colorSchemeprimaryFixedDim.withAlpha(120),
          borderRadius: 8,
          child: const SizedBox(
            child: Center(
              child: Text(
                'LIQUID GLASS',
                style: TextStyle(
                  fontSize: 38,
                  fontVariations: const[FontVariation.weight(900)],
                ),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);

Additional information #

This plugin is very power-hungry due to my limited optimization skills. It refreshes rapidly and uses an outdated, inefficient cropping method. Your GPU might get hot!🔥 If you're interested in this project, please help improve it.

The liquid glass effect is based on Liquid *Ass (yes, that's the actual name).