Liquid Glass Easy #

🤝 Contributions are welcome!

A Flutter package that adds real-time, interactive liquid glass lenses. These dynamic lenses can magnify, distort, blur, tint, and refract underlying content — creating stunning, glass-like effects that respond fluidly to movement and touch.

Why Liquid Glass Easy? #

Unlike traditional glassmorphism or static blur effects, Liquid Glass Easy simulates real glass physics — complete with refraction, distortion, and fluid responsiveness. It captures and refracts live background content in real time, producing immersive, motion-reactive visuals that bring depth and realism to your UI.

Features #

• 💠 True liquid glass visuals — replicate the look and physics of real glass with fluid transparency, soft highlights, and refraction that bends light naturally through your UI.
• 🌀 Real-time lens rendering — see distortion, blur, tint, and refraction react instantly as elements move behind the glass.
• 🎨 Custom shapes — design lenses as rounded rectangles, circles, or smooth superellipses that perfectly match your interface style.
• 🌈 Fully customizable effects — control tint color, intensity, softness, refraction depth, and light direction for precise glass behavior.
• 🧠 Controller-driven animations — show, hide, or animate lenses in real time through the LiquidGlassController.
• ⚙️ Shader-driven, GPU-accelerated pipeline — ensures smooth, high-FPS performance even with multiple dynamic lenses.
• 📱 Cross-platform compatibility — works seamlessly on Android, iOS, Web, macOS, and Windows.

Installation #

Add the dependency:

dependencies:
  liquid_glass_easy: ^1.1.1

Then run:

flutter pub get

Getting Started #

Use the LiquidGlassExample widget found in the example/ directory for a quick preview. You can also try:

• LiquidGlassShowcase — a comprehensive demo widget that lets you explore all Liquid Glass Easy capabilities interactively. Adjust parameters such as distortion, blur, magnification, lighting, and border style in real time using intuitive sliders and toggles.
• LiquidGlassPlayground — an experimental environment where you can test your own widgets beneath a live liquid glass lens. Fine-tune visual parameters with built-in controls to instantly see how the effect adapts to different content and layouts.

⚠️ Important Note:
The LiquidGlassShowcase and LiquidGlassPlayground widgets are designed only for previewing and copying slider values.

They are not intended for performance benchmarking, because the backgroundWidget is rendered at half the screen height, while the other half is used for sliders.

For accurate performance testing, use the LiquidGlassView directly without these preview widgets.

Basic setup with one lens:

import 'package:flutter/material.dart';
import 'package:liquid_glass_easy/liquid_glass_easy.dart';

class DemoGlass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LiquidGlassView(
        backgroundWidget: Image.asset('assets/bg.jpg', fit: BoxFit.cover),
        children: [
          LiquidGlass(
            width: 200,
            height: 100,
            magnification: 1,
            distortion: 0.1,
            distortionWidth: 50,
            position: LiquidGlassAlignPosition(alignment: Alignment.center),
          ),
        ],
      ),
    );
  }
}

Refraction Modes #

Common Use Cases #

Multiple Lenses #

LiquidGlassView(
  backgroundWidget: YourBackground(),
  children: [
    LiquidGlass(
      width: 160,
      height: 160,
      distortion: 0.15,
      distortionWidth: 50,
      position: LiquidGlassOffsetPosition(left: 40, top: 100),
    ),
    LiquidGlass(
      width: 220,
      height: 120,
      distortion: 0.075,
      magnification: 1,
      distortionWidth: 40,
      position: LiquidGlassAlignPosition(alignment: Alignment.bottomRight),
      blur: LiquidGlassBlur(sigmaX: 1, sigmaY: 1),
      color: Colors.white30,
    ),
  ],
);

Draggable Lens #

LiquidGlass(
  draggable: true,
  width: 200,
  height: 120,
  position: LiquidGlassAlignPosition(alignment: Alignment.center),
)

Lens with Overlay Content #

LiquidGlass(
  width: 200,
  height: 120,
  position: LiquidGlassAlignPosition(alignment: Alignment.center),
  child: Center(child: Icon(Icons.search, color: Colors.white)),
)

⚠️ Important Note #

The child widget inside LiquidGlass always takes the full size of the lens.

If you want to reduce the child’s visible area, wrap it with your own Padding:

LiquidGlass(
  child: Padding(
           padding: EdgeInsets.all(12),
           child: YourWidget(),
  ),
)

Positions & Shapes #

Position Types #

Shape Types #

Chromatic Aberration #

Tip:
The default value is 0.003.
Setting it to 0.0 disables the chromatic aberration effect entirely.
Use this property to add subtle or exaggerated color distortion for a more realistic or stylistic glass effect.

Show/Hide Lens with Controller (Animated) #

final lensController = LiquidGlassController();

LiquidGlass(
  controller: lensController,
  position: LiquidGlassAlignPosition(alignment: Alignment.center),
);

// Later
lensController.hideLiquidGlass(animationTimeMillisecond: 300);
lensController.showLiquidGlass(animationTimeMillisecond: 300);

Toggle real-time capturing:

if (isVisible = (!isVisible)) {
  viewController.startRealtimeCapture();
  lensController.showLiquidGlass!();
} 
else {
  lensController.hideLiquidGlass!(
  onComplete: viewController.stopRealtimeCapture,
  );
}

Snapshot vs Realtime #

Example:

final viewController = LiquidGlassViewController();

LiquidGlassView(
  controller: viewController,
  backgroundWidget: ...,
  realTimeCapture: false,
  children: [...],
);

// Refresh manually
await viewController.captureOnce();

Recommended Settings #

• General use: useSync: true, pixelRatio: 0.8–1.0
• Performance-focused: useSync: false, pixelRatio: 0.5–0.7

If your background is full-screen, a pixel ratio of 0.5–1.0 gives the best trade-off between performance and detail. For smaller regions, higher pixel ratios yield sharper glass. This is a general guideline — the final choice depends on the device’s performance.

Key API (Quick Reference) #

LiquidGlassView #

LiquidGlassView({
  required Widget backgroundWidget,
  required List<LiquidGlass> children,
  double pixelRatio = 1.0,
  bool realTimeCapture = true,
  bool useSync = true,
  LiquidGlassRefreshRate refreshRate = LiquidGlassRefreshRate.deviceRefreshRate,
})

LiquidGlass #

LiquidGlass({
  double width = 200,
  double height = 100,
  double magnification = 1.0,
  double distortion = 0.125,
  bool draggable = false,
  required LiquidGlassPosition position,
  Widget? child,
  Color color = Colors.transparent,
})

License #

MIT License

Author #

Ahmed Gamil

Feel free to open issues or contribute to the project!