💧 Liquid Glass Animation

A stunning Flutter package that blends glassmorphism, liquid motion, and animated transparency into one smooth and visually rich experience.

🧑‍💻 Developer 👤 Kaish Ansari

🌈 Overview

liquid_glass_animation ek Flutter package hai jo real-time liquid + glass blur effect deta hai.
Iska look aisa lagta hai jaise fluid motion ke andar se glass ke through UI dikh raha ho 😍

Perfect for:

  • Modern dashboards
  • AI / futuristic UI
  • Login & profile cards
  • Hero sections & transitions

🚀 Features

🩵 Glassmorphism Effects

  • Adjustable blur intensity
  • Custom opacity aur tint color
  • Smooth transparency with depth illusion

🌊 Liquid Motion Renderer

  • Real-time sine-wave liquid animation
  • Speed control (gentle ya fast)
  • Responsive FPS-friendly waves

🫧 Bubble Particle Animation

  • Randomized floating bubbles
  • Dynamic count adjustment
  • Subtle motion using sine path

✨ Built-in Presets

Preset Look Details
frosted Classic glass blur soft white tint, gentle waves
neon Vibrant glowing glass bright tint, fast motion
subtle Minimal modern low blur, calm motion

🧱 Core Components

Class Description
LiquidGlass Main widget for applying glass + liquid animation
LiquidGlassLayer Multi-layer blending with blur and fluid motion
Glassify Simple wrapper for static glass effect
StretchGlass Adds squash and stretch animation
GlassGlow Touch-responsive glow effects
FakeGlass Lightweight static glass for low-end performance

🧪 Example Usage

import 'package:liquid_glass_animation/liquid_glass_animation.dart';

class DemoScreen extends StatelessWidget {
  const DemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey.shade900,
      body: Center(
        child: LiquidGlass(
          blur: 10,
          tintColor: Colors.cyanAccent.withOpacity(0.2),
          child: Container(
            width: 250,
            height: 150,
            alignment: Alignment.center,
            child: const Text(
              "Liquid Glass ✨",
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

1️⃣ How To Use

1️⃣ Features

Core widget — glass + fluid animation combo

LiquidGlass(
  blur: 12,
  tintColor: Colors.blueAccent.withOpacity(0.3),
  speed: 1.2,
  child: Text("Liquid Glass ✨"),
);


> Blend multiple glass panels together

```dart
LiquidGlassLayer(
  layers: [
    LiquidGlass(blur: 8, tintColor: Colors.white24),
    LiquidGlass(blur: 16, tintColor: Colors.cyanAccent.withOpacity(0.1)),
  ],
);


> Static, lightweight glass effect (no animation)

```dart
Glassify(
  blur: 10,
  opacity: 0.2,
  color: Colors.white,
  child: Text("Static Glass Box 🧊"),
);


> Interactive glowing light reflection

```dart
GlassGlow(
  glowColor: Colors.cyanAccent,
  intensity: 0.5,
  child: Container(width: 200, height: 100),
);


> Simulated glass look — no expensive shaders

```dart
FakeGlass(
  color: Colors.white.withOpacity(0.15),
  borderRadius: 16,
  child: Text("Fake Glass 💨"),
);


> Organic bounce & stretch animation for glass UI

```dart
StretchGlass(
  stretch: 0.15,
  duration: Duration(seconds: 1),
  child: LiquidGlass(child: Text("Stretch me!")),
);


> LiquidGlassController

```dart
final controller = LiquidGlassController();

LiquidGlass(
  controller: controller,
  child: Text("Controlled Glass"),
);
// Runtime controls:
controller.setSpeed(2.0);
controller.stop();
controller.start();

Libraries

liquid_glass_animation