Flutter Liquid Glass

https://github.com/whynotmake-it/flutter_liquid_glass
Admin
A Flutter package for rendering liquid glass effects, with a renderer package and an Apple-specific...
Tokens:9,221
Snippets:96
Trust Score:6.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Run Example App with Impeller

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Navigate to the example app directory and run it using Flutter. The `--enable-impeller` flag is mandatory as Skia is not supported.

```bash
cd packages/liquid_glass_renderer/example
flutter run --enable-impeller
```

--------------------------------

### Add Apple Liquid Glass Dependency

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/apple_liquid_glass/README.md

Install the Apple Liquid Glass package using the Flutter SDK. Ensure you have the Flutter SDK installed before proceeding.

```sh
flutter pub add apple_liquid_glass
```

--------------------------------

### Add Liquid Glass Renderer to Project

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Install the package using flutter pub add and import it into your Dart code.

```sh
flutter pub add liquid_glass_renderer
```

```dart
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';
```

--------------------------------

### Bootstrap Workspace with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Run this command after cloning the repository to set up all packages and their dependencies.

```bash
melos bootstrap
```

--------------------------------

### Clean and Bootstrap Workspace with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Use this command to clean the existing build artifacts and then bootstrap the workspace, ensuring all dependencies are up-to-date.

```bash
melos clean && melos bootstrap
```

--------------------------------

### Apply Glass Effect with Glassify

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Demonstrates how to use the Glassify widget to apply a glass effect to a Text widget. Remember to import from experimental.dart. Note that blur is not supported, and thickness should ideally be kept below 20px for best results.

```dart
import 'package:liquid_glass_renderer/experimental.dart';

Center(
  child: Glassify(
    settings: const LiquidGlassSettings(
      thickness: 5,
      glassColor: Color(0x33FFFFFF),
    ),
    child: const Text(
      'Liquid',
      style: TextStyle(
        fontSize: 120,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      ),
    ),
  ),
)
```

--------------------------------

### LiquidGlass Constructors

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Demonstrates the different constructors for LiquidGlass, suitable for various placement scenarios within a LiquidGlassLayer.

```dart
LiquidGlass(
  shape: LiquidRoundedSuperellipse(borderRadius: 24),
  glassContainsChild: false, // child renders ON TOP of glass (default)
  clipBehavior: Clip.hardEdge,
  shadows: const [
    BoxShadow(
      blurStyle: BlurStyle.outer,
      color: Color.fromRGBO(0, 0, 0, 0.05),
      blurRadius: 4,
    ),
  ],
  child: const SizedBox.square(dimension: 120),
)

LiquidGlass.withOwnLayer(
  settings: const LiquidGlassSettings(thickness: 15, blur: 6),
  shape: const LiquidOval(),
  child: const SizedBox.square(dimension: 80),
)

LiquidGlass.auto(
  settings: const LiquidGlassSettings(thickness: 18),
  shape: LiquidRoundedSuperellipse(borderRadius: 30),
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Auto Glass'),
  ),
)
```

--------------------------------

### Implement LiquidGlassLayer and LiquidGlass Widget

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Demonstrates how to set up `LiquidGlassLayer` as a rendering context and `LiquidGlass` for individual glass effects within a Flutter application. Configure shared visual settings via `LiquidGlassSettings`.

```dart
import 'package:flutter/material.dart';
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Background content that glass will refract
          Positioned.fill(
            child: Image.network(
              'https://picsum.photos/seed/bg/800/1200',
              fit: BoxFit.cover,
            ),
          ),

          Center(
            child: LiquidGlassLayer(
              // Shared visual settings for all child glass widgets
              settings: const LiquidGlassSettings(
                thickness: 20,
                blur: 8,
                glassColor: Color(0x33FFFFFF), // white tint at 20% opacity
                lightIntensity: 0.6,
                saturation: 1.5,
              ),
              // fake: true  → swap all children to FakeGlass for performance
              // useBackdropGroup: true → share one backdrop with sibling layers
              child: LiquidGlass(
                shape: LiquidRoundedSuperellipse(borderRadius: 40),
                shadows: const [
                  BoxShadow(
                    blurStyle: BlurStyle.outer,
                    color: Color.fromRGBO(0, 0, 0, 0.08),
                    blurRadius: 20,
                  ),
                ],
                child: const SizedBox(
                  width: 220,
                  height: 140,
                  child: Center(child: Text('Hello Glass')),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
```

--------------------------------

### Run All Tests with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Execute all tests across all packages. Ensure the `--enable-impeller` flag is used, as Skia is not supported.

```bash
melos run test
```

--------------------------------

### Analyze All Packages with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Run static analysis on all packages in the workspace. Set concurrency to 1 to prevent potential crashes on less powerful machines.

```bash
melos run analyze
```

--------------------------------

### Basic Liquid Glass Implementation

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Use LiquidGlassLayer to contain LiquidGlass widgets. Ensure the glass widget is placed on top of background content, typically within a Stack.

```dart
Stack(
  children: [
    // 1. Your background content goes here
    MyBackgroundContent(),

    // 2. Create a layer for liquid glass effects
    LiquidGlassLayer(
      // 3. Add your LiquidGlass widgets here
      child: LiquidGlass(
        shape: LiquidRoundedSuperellipse(borderRadius: 30),
        child: const SizedBox.square(dimension: 100),
      ),
    ),
  ],
)
```

--------------------------------

### LiquidGlassSettings Customization

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Illustrates how to configure visual parameters for LiquidGlass using LiquidGlassSettings, including full custom settings, Figma-compatible presets, and incremental updates.

```dart
// Full custom settings
const settings = LiquidGlassSettings(
  visibility: 1.0,          // 0–1 master opacity multiplier
  glassColor: Color(0x2AFFFFFF), // tint; alpha = tint intensity
  thickness: 22,            // refraction distortion amount (px)
  blur: 10,                 // background blur sigma
  chromaticAberration: 0.015, // color fringe at edges
  lightAngle: 1.57,         // radians; 0 = right, π/2 = down
  lightIntensity: 0.55,     // highlight brightness 0–1
  ambientStrength: 0.1,     // ambient fill light 0–1
  refractiveIndex: 1.3,     // 1.0 = no refraction, ~1.5 = real glass
  saturation: 1.6,          // background saturation through glass
);

// Figma-compatible constructor (values 0–100 matching Figma's glass panel)
final figmaSettings = LiquidGlassSettings.figma(
  refraction: 50,   // maps to refractiveIndex
  depth: 20,        // maps to thickness
  dispersion: 10,   // maps to chromaticAberration
  frost: 8,         // maps to blur
  lightIntensity: 60,
  glassColor: const Color(0x33AADDFF), // optional tint
);

// copyWith for incremental tweaks
final dimmed = settings.copyWith(visibility: 0.4);

// Read the active settings anywhere in the subtree
final active = LiquidGlassSettings.of(context);

LiquidGlassLayer(
  settings: figmaSettings,
  child: LiquidGlass(
    shape: LiquidRoundedSuperellipse(borderRadius: 28),
    child: const SizedBox.square(dimension: 150),
  ),
)
```

--------------------------------

### LiquidShape Definitions

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Shows how to define different shapes using LiquidShape subclasses and how to use them with LiquidGlass or as Flutter ShapeBorders.

```dart
// Smooth squircle — recommended for most UI elements
final squircle = LiquidRoundedSuperellipse(borderRadius: 32);

// Perfect ellipse / circle
const circle = LiquidOval();

// Standard rounded rectangle
final roundedRect = LiquidRoundedRectangle(borderRadius: 16);

// Use in LiquidGlass
LiquidGlass(
  shape: squircle,
  child: SizedBox.square(dimension: 100),
)

// Use as a Flutter ShapeBorder (e.g. in a Container decoration)
Container(
  decoration: ShapeDecoration(
    shape: LiquidRoundedSuperellipse(borderRadius: 20),
    color: Colors.blue.withOpacity(0.3),
  ),
  width: 120,
  height: 60,
)
```

--------------------------------

### Standard Versioning with Git Tags using Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Perform standard package versioning using Melos, which includes creating Git tags for new versions.

```bash
melos version
```

--------------------------------

### Version All Packages (No Git Tags) with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Version all packages in the workspace without creating Git tags. Useful for internal versioning or specific release workflows.

```bash
melos run version-all
```

--------------------------------

### Single Glass Shape with LiquidGlassLayer

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Demonstrates how to create a single glass shape by wrapping it in a `LiquidGlassLayer`. This layer manages the rendering of glass effects. Ensure you have read the performance section for optimization tips.

```dart
import 'package:flutter/material.dart';
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';

class MyGlassWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          // This is the content that will be behind the glass
          Positioned.fill(
            child: Image.network(
              'https://picsum.photos/seed/glass/800/800',
              fit: BoxFit.cover,
            ),
          ),
          // The LiquidGlassLayer manages glass rendering
          Center(
            child: LiquidGlassLayer(
              settings: const LiquidGlassSettings(
                thickness: 20,
                blur: 10,
                glassColor: Color(0x33FFFFFF),
              ),
              child: LiquidGlass(
                shape: LiquidRoundedSuperellipse(
                  borderRadius: 50,
                ),
                child: const SizedBox(
                  height: 200,
                  width: 200,
                  child: Center(
                    child: FlutterLogo(size: 100),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
```

--------------------------------

### Initialize Package Logging

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Initialize `LgrLogs` to wire package-internal loggers into the Flutter console. This attaches all internal loggers to the root Logger.

```dart
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';

void main() {
  LgrLogs.initAllLogs(); // attach all internal loggers to the root Logger
  runApp(const MyApp());
}
```

--------------------------------

### Enable Impeller Rendering Engine

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Ensure Impeller is enabled for the liquid_glass_renderer package to function correctly. This command enables Impeller for the current run.

```sh
flutter run --enable-impeller
```

--------------------------------

### Import liquid_glass_renderer in Dart

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Import the necessary libraries for using the liquid_glass_renderer package in your Dart code. The experimental import is for specific advanced widgets.

```dart
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';
// For the experimental Glassify widget:
import 'package:liquid_glass_renderer/experimental.dart';
```

--------------------------------

### Add liquid_glass_renderer to Flutter Project

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Use this command to add the package as a dependency in your Flutter project.

```sh
flutter pub add liquid_glass_renderer
```

--------------------------------

### Generate Coverage with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Generate code coverage reports for all packages in the workspace.

```bash
melos run coverage
```

--------------------------------

### Using FakeGlass for Lightweight Glass Effects

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Employ `FakeGlass` for performance-critical scenarios or when a glass-like appearance is needed without the computational cost of refraction. It uses backdrop filters for a similar visual effect.

```dart
FakeGlass(
  shape: LiquidRoundedSuperellipse(
    borderRadius: 20,
  ),
  settings: const LiquidGlassSettings(
    blur: 10,
    glassColor: Color(0x33FFFFFF),
  ),
  child: const SizedBox(
    height: 100,
    width: 100,
    child: Center(child: Text('Fast Glass')),
  ),
)
```

--------------------------------

### Run Code Generation with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Execute this command to run code generation for all packages in the monorepo. This is necessary after modifying files that require generated code.

```bash
melos run generate
```

--------------------------------

### Run Tests for Specific Packages with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Use this command to run tests for only a selected package or set of packages.

```bash
melos run test:select
```

--------------------------------

### Apply Glassify Effect to Widget

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Use Glassify to apply a liquid glass shader effect to any child widget. Note that blur is not supported and thickness should be kept below 20 for optimal results. Requires 'experimental.dart' import.

```dart
import 'package:liquid_glass_renderer/experimental.dart';

Center(
  child: Glassify(
    settings: const LiquidGlassSettings(
      thickness: 8,          // keep below 20 for best results
      glassColor: Color(0x44FFFFFF),
      lightIntensity: 0.7,
      ambientStrength: 0.15,
      saturation: 1.4,
      // blur is NOT supported in Glassify
    ),
    child: const Text(
      '12:34',
      style: TextStyle(
        fontSize: 96,
        fontWeight: FontWeight.w300,
        color: Colors.black,
        letterSpacing: -2,
      ),
    ),
  ),
)
```

--------------------------------

### Implementing Interactive Touch Effects with GlassGlow

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Wrap content with `GlassGlow` inside a `LiquidGlass` widget to add responsive glow effects that follow user touches. The `GlassGlowLayer` is automatically included by `LiquidGlass`.

```dart
LiquidGlassLayer(
  child: LiquidGlass(
    shape: LiquidRoundedSuperellipse(
      borderRadius: 20,
    ),
    child: GlassGlow(
      glowColor: Colors.white24,
      glowRadius: 1.0,
      child: const SizedBox(
        height: 100,
        width: 100,
        child: Center(child: Text('Touch Me')),
      ),
    ),
  ),
)
```

--------------------------------

### OffsetResistanceExtension Utility

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

OffsetResistanceExtension is a utility for applying damped offsets, useful in conjunction with drag-based interactions.

```dart
// OffsetResistanceExtension — utility for damped offsets
final rawDrag = const Offset(200, 0);
final damped = rawDrag.withResistance(0.08); // ~Offset(10.4, 0)
```

--------------------------------

### Customizing Glass Appearance with LiquidGlassSettings

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Apply LiquidGlassSettings to a LiquidGlassLayer to customize the appearance of all glass widgets within that layer. Key settings include glassColor, thickness, blur, and light properties.

```dart
LiquidGlassLayer(
  settings: const LiquidGlassSettings(
    thickness: 10,
    glassColor: Color(0x1AFFFFFF),
    lightIntensity: 1.5,
    outlineIntensity: 0.5,
    saturation: 1.2,
  ),
  child: LiquidGlassBlendGroup(
    blend: 40, // blend is now on LiquidGlassBlendGroup, not settings
    child: // ... your LiquidGlass.grouped widgets
  ),
)
```

--------------------------------

### Adding Shadows to LiquidGlass Widgets

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Use the `shadows` parameter to add shadows to `LiquidGlass` widgets. For best results, use `BlurStyle.outer` and avoid offsets. A combination of tight and soft shadows is recommended.

```dart
LiquidGlass(
  shape: LiquidRoundedSuperellipse(borderRadius: 30),
  shadows: const [
    // Tight, subtle edge shadow
    BoxShadow(
      blurStyle: BlurStyle.outer,
      color: Color.from(alpha: 0.05, red: 0, green: 0, blue: 0),
      blurRadius: 2,
    ),
    // Softer, wider ambient shadow
    BoxShadow(
      blurStyle: BlurStyle.outer,
      color: Color.from(alpha: 0.1, red: 0, green: 0, blue: 0),
      blurRadius: 30,
    ),
  ],
  child: const SizedBox.square(dimension: 150),
)
```

--------------------------------

### Automatic Layer Detection for Glass Shape

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Utilize `LiquidGlass.auto` to automatically render a glass shape. It will use a parent `LiquidGlassLayer` if one exists, otherwise, it creates its own layer. The `settings` and `fake` parameters serve as fallbacks when no parent layer is found.

```dart
LiquidGlass.auto(
  settings: const LiquidGlassSettings(
    thickness: 15,
    blur: 8,
  ),
  shape: LiquidRoundedSuperellipse(borderRadius: 30),
  child: const SizedBox.square(dimension: 100),
)
```

--------------------------------

### Standalone FakeGlass Widget

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

FakeGlass provides a lightweight glass effect using BackdropFilter, supporting blur, glassColor, lightIntensity, and saturation. Thickness and refractiveIndex are ignored.

```dart
FakeGlass(
  shape: LiquidRoundedSuperellipse(borderRadius: 20),
  settings: const LiquidGlassSettings(
    blur: 12,
    glassColor: Color(0x40FFFFFF),
    saturation: 1.4,
    lightIntensity: 0.4,
  ),
  shadows: const [
    BoxShadow(
      blurStyle: BlurStyle.outer,
      color: Color.fromRGBO(0, 0, 0, 0.1),
      blurRadius: 16,
    ),
  ],
  child: const SizedBox(
    width: 180,
    height: 90,
    child: Center(child: Text('Fast Glass')),
  ),
)
```

--------------------------------

### Enable Liquid Glass Geometry Debugging

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Set this boolean flag to true to visualize geometry textures instead of the glass effect. This is only effective in debug mode.

```dart
debugPaintLiquidGlassGeometry = true;
```

--------------------------------

### Run Code Generation for Specific Package with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Use this command to run code generation only for a selected package within the monorepo.

```bash
melos run generate:select
```

--------------------------------

### Update Golden Test Images with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Run this command to update the golden test images. This is typically done when visual outputs have intentionally changed.

```bash
melos run update-goldens
```

--------------------------------

### LiquidStretch for Squash-and-Stretch Interaction

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

LiquidStretch applies a volume-preserving squash-and-stretch transform to its child based on drag gestures. Customize stretch ratio, interaction scale, and drag resistance.

```dart
LiquidStretch(
  stretch: 0.5,          // pixels-to-stretch ratio (0 = no stretch)
  interactionScale: 1.06, // scale-up on press
  resistance: 0.08,      // higher = stickier drag feel
  gestureMode: GestureMode.listener,
  child: LiquidGlass.auto(
    shape: LiquidRoundedSuperellipse(borderRadius: 20),
    child: GlassGlow(
      child: const SizedBox(
        width: 140,
        height: 60,
        child: Center(child: Text('Stretch me')),
      ),
    ),
  ),
)
```

--------------------------------

### Adding Organic Squash and Stretch Effects with LiquidStretch

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Utilize `LiquidStretch` to introduce interactive squash and stretch effects that respond to user gestures, providing an organic, jelly-like feel. This widget listens to drag gestures and applies smooth transformations.

```dart
LiquidStretch(
  stretch: 0.5,
  interactionScale: 1.05,
  child: LiquidGlass(
    shape: LiquidRoundedSuperellipse(
      borderRadius: 20,
    ),
    child: const SizedBox(
      height: 100,
      width: 100,
      child: Center(child: Text('Stretchy')),
    ),
  ),
)
```

--------------------------------

### FakeGlass Layer for All LiquidGlass Children

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Set `fake: true` on LiquidGlassLayer to render all its LiquidGlass children as FakeGlass. This is useful for performance optimization.

```dart
LiquidGlassLayer(
  fake: true,
  settings: const LiquidGlassSettings(blur: 10, glassColor: Color(0x33FFFFFF)),
  child: LiquidGlass(
    shape: LiquidRoundedSuperellipse(borderRadius: 24),
    child: const SizedBox.square(dimension: 120),
  ),
)
```

--------------------------------

### RawLiquidStretch for Explicit Stretch Control

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Use RawLiquidStretch for direct control over the stretch offset in pixels. This allows for programmatic manipulation of the squash-and-stretch effect.

```dart
// Low-level raw control (drives stretch with an explicit Offset in pixels)
RawLiquidStretch(
  stretchPixels: const Offset(10, 0), // 10px rightward stretch
  child: LiquidGlass.auto(
    shape: LiquidRoundedSuperellipse(borderRadius: 20),
    child: const SizedBox.square(dimension: 80),
  ),
)
```

--------------------------------

### Applying Background Blur with LiquidGlassSettings

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Add a background blur effect to your glassmorphism by setting the 'blur' property within LiquidGlassSettings. This is independent of the glass refraction effect.

```dart
LiquidGlassLayer(
  settings: const LiquidGlassSettings(
    blur: 10.0,
    thickness: 20,
  ),
  child: // ... your glass widgets
)
```

--------------------------------

### Enable Debug Painting of Liquid Glass Geometry

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Set the `debugPaintLiquidGlassGeometry` flag to true in debug builds to render the raw geometry texture instead of the final glass effect. This flag is automatically false in release builds.

```dart
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';

void main() {
  // Enable in debug builds only — has no effect in release
  debugPaintLiquidGlassGeometry = true;
  runApp(const MyApp());
}
```

--------------------------------

### Enabling Fake Glass for a LiquidGlassLayer

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Alternatively, set `fake: true` on a `LiquidGlassLayer` to automatically apply `FakeGlass` to all child glass widgets within that layer. Note that `FakeGlass` does not support `thickness` or `refractiveIndex`.

```dart
LiquidGlassLayer(
  fake: true,
  settings: const LiquidGlassSettings(
    blur: 10,
    glassColor: Color(0x33FFFFFF),
  ),
  child: // ... your glass widgets will automatically use FakeGlass
)
```

--------------------------------

### Single Glass Shape with Own Layer

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Use `LiquidGlass.withOwnLayer` to create a single glass shape with custom settings without needing an explicit `LiquidGlassLayer` parent. This is useful for self-contained glass elements.

```dart
LiquidGlass.withOwnLayer(
  settings: const LiquidGlassSettings(
    thickness: 15,
    blur: 8,
  ),
  shape: LiquidRoundedSuperellipse(borderRadius: 30),
  child: const SizedBox.square(dimension: 100),
)
```

--------------------------------

### GlassGlow for Touch-Responsive Glow Effect

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Wrap interactive content with GlassGlow to create a touch-responsive glow effect. The glow color and radius can be customized. GestureMode can be set to listener or GestureDetector.

```dart
LiquidGlassLayer(
  settings: const LiquidGlassSettings(thickness: 18, blur: 8),
  child: LiquidGlass(
    shape: LiquidRoundedSuperellipse(borderRadius: 28),
    child: GlassGlow(
      glowColor: const Color(0x44FFFFFF), // glow tint
      glowRadius: 0.8,   // relative to shortest side of the GlassGlowLayer
      gestureMode: GestureMode.listener, // or GestureMode.gestureDetector
      hitTestBehavior: HitTestBehavior.opaque,
      child: const SizedBox(
        width: 180,
        height: 100,
        child: Center(child: Text('Touch me')),
      ),
    ),
  ),
)
```

--------------------------------

### Flutter Liquid Glass Bottom Navigation Bar

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

This widget creates a bottom navigation bar with a glassmorphic effect. It uses `LiquidGlassLayer` for the glass effect and `LiquidStretch` for interactive tab elements. Ensure the `liquid_glass_renderer` package is included in your project.

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';

class LiquidNavBar extends StatefulWidget {
  const LiquidNavBar({super.key});

  @override
  State<LiquidNavBar> createState() => _LiquidNavBarState();
}

class _LiquidNavBarState extends State<LiquidNavBar> {
  int _selectedIndex = 0;

  static const _tabs = ['Home', 'Search', 'Profile'];
  static const _icons = [
    CupertinoIcons.home,
    CupertinoIcons.search,
    CupertinoIcons.person,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Colourful background
          Positioned.fill(
            child: Image.network(
              'https://picsum.photos/seed/nav/800/1400',
              fit: BoxFit.cover,
            ),
          ),

          // Glass navigation bar pinned to bottom
          SafeArea(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 16),
                child: LiquidGlassLayer(
                  settings: LiquidGlassSettings(
                    glassColor: Colors.white.withValues(alpha: 0.18),
                    thickness: 18,
                    blur: 12,
                    saturation: 1.5,
                    lightIntensity: 0.5,
                  ),
                  child: LiquidGlassBlendGroup(
                    blend: 24,
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: List.generate(_tabs.length, (i) {
                        final selected = i == _selectedIndex;
                        return GestureDetector(
                          onTap: () => setState(() => _selectedIndex = i),
                          child: LiquidStretch(
                            stretch: 0.4,
                            interactionScale: 1.05,
                            child: LiquidGlass.grouped(
                              shape: LiquidRoundedSuperellipse(
                                borderRadius: selected ? 28 : 20,
                              ),
                              shadows: const [
                                BoxShadow(
                                  blurStyle: BlurStyle.outer,
                                  color: Color.fromRGBO(0, 0, 0, 0.08),
                                  blurRadius: 12,
                                ),
                              ],
                              child: GlassGlow(
                                glowColor: Colors.white24,
                                child: AnimatedContainer(
                                  duration: const Duration(milliseconds: 300),
                                  width: selected ? 110 : 72,
                                  height: 56,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Icon(_icons[i], size: 22),
                                      if (selected) ...[
                                        const SizedBox(width: 6),
                                        Text(_tabs[i]),
                                      ],
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

```

--------------------------------

### Grouped LiquidGlass Shapes with Blend

Source: https://context7.com/whynotmake-it/flutter_liquid_glass/llms.txt

Use LiquidGlassBlendGroup to merge multiple LiquidGlass.grouped shapes when they are within a specified blend distance. Maximum 16 shapes per group.

```dart
LiquidGlassLayer(
  settings: const LiquidGlassSettings(
    thickness: 20,
    blur: 10,
    glassColor: Color(0x22FFFFFF),
  ),
  child: LiquidGlassBlendGroup(
    blend: 30.0, // shapes start merging when they are <30px apart
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // Top pill
        LiquidGlass.grouped(
          shape: LiquidRoundedSuperellipse(borderRadius: 50),
          child: const SizedBox(width: 200, height: 60),
        ),
        const SizedBox(height: 20), // gap < blend → shapes blend together
        // Bottom circle
        LiquidGlass.grouped(
          shape: const LiquidOval(),
          child: const SizedBox.square(dimension: 80),
        ),
      ],
    ),
  ),
)
```

--------------------------------

### Run Tests Without Goldens with Melos

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/CLAUDE.md

Execute tests excluding golden tests. This is useful for pull requests that do not have the 'goldens' label.

```bash
melos run test-without-goldens
```

--------------------------------

### Blending Multiple Shapes with LiquidGlassBlendGroup

Source: https://github.com/whynotmake-it/flutter_liquid_glass/blob/main/packages/liquid_glass_renderer/README.md

Use LiquidGlass.grouped() within a LiquidGlassBlendGroup to blend multiple glass shapes together seamlessly. This is useful for creating complex layered glass effects.

```dart
LiquidGlassLayer(
  settings: const LiquidGlassSettings(
    thickness: 20,
    blur: 10,
  ),
  child: LiquidGlassBlendGroup(
    blend: 20.0, // Controls how much shapes blend together
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        LiquidGlass.grouped(
          shape: LiquidRoundedSuperellipse(
            borderRadius: 40,
          ),
          child: const SizedBox.square(dimension: 100),
        ),
        const SizedBox(height: 50),
        LiquidGlass.grouped(
          shape: LiquidRoundedSuperellipse(
            borderRadius: 40,
          ),
          child: const SizedBox.square(dimension: 100),
        ),
      ],
    ),
  ),
)
```
Tokens:
Raw