liquid_glass_bridge 0.3.3

Native-backed liquid glass, glassmorphism, and adaptive iOS/Android UI controls for Flutter.

example/lib/main.dart

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

void main() {
  runApp(const DemoApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Liquid Glass Bridge Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF267BFF)),
        useMaterial3: true,
      ),
      home: const DemoScreen(),
    );
  }
}

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

  @override
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  LiquidGlassMode _mode = LiquidGlassMode.auto;
  LiquidGlassQuality _quality = LiquidGlassQuality.medium;
  _PresetStyle _presetStyle = _PresetStyle.adaptive;
  _DemoDensity _density = _DemoDensity.comfortable;
  bool _liveEffects = true;
  double _blur = 18;
  double _noise = 0.05;
  int _currentIndex = 0;

  static const List<LiquidGlassNavItem> _items = <LiquidGlassNavItem>[
    LiquidGlassNavItem(
      icon: Icons.home_outlined,
      activeIcon: Icons.home,
      label: 'Home',
    ),
    LiquidGlassNavItem(
      icon: Icons.search_outlined,
      activeIcon: Icons.search,
      label: 'Search',
    ),
    LiquidGlassNavItem(
      icon: Icons.person_outline,
      activeIcon: Icons.person,
      label: 'Profile',
    ),
  ];

  LiquidGlassPlatformStyle get _effectivePlatformStyle {
    LiquidGlassStyle applyControls(LiquidGlassStyle style) {
      return style.copyWith(blurSigma: _blur, noiseOpacity: _noise);
    }

    final LiquidGlassPlatformStyle base = _presetStyle.platformStyle;
    return LiquidGlassPlatformStyle(
      fallback: applyControls(base.fallback),
      ios: base.ios == null ? null : applyControls(base.ios!),
      android: base.android == null ? null : applyControls(base.android!),
      web: base.web == null ? null : applyControls(base.web!),
      macos: base.macos == null ? null : applyControls(base.macos!),
      windows: base.windows == null ? null : applyControls(base.windows!),
      linux: base.linux == null ? null : applyControls(base.linux!),
    );
  }

  @override
  Widget build(BuildContext context) {
    return LiquidGlassTheme(
      data: LiquidGlassThemeData(
        platformStyle: _effectivePlatformStyle,
        mode: _mode,
        quality: _quality,
      ),
      child: Scaffold(
        extendBody: true,
        appBar: LiquidGlassNavigationBar(
          blurSigma: _blur,
          noiseOpacity: _noise,
          title: const Text('Liquid Glass Bridge'),
          leading: IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
          trailing: IconButton(icon: const Icon(Icons.tune), onPressed: () {}),
        ),
        bottomNavigationBar: LiquidGlassBottomNavigationBar(
          items: _items,
          currentIndex: _currentIndex,
          onTap: (int value) => setState(() => _currentIndex = value),
          blurSigma: _blur,
          noiseOpacity: _noise,
        ),
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[
                Color(0xFFB9D6FF),
                Color(0xFFF9D7FF),
                Color(0xFFD4FFE7),
              ],
            ),
          ),
          child: SafeArea(
            child: ListView(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 120),
              children: <Widget>[
                _buildControls(),
                const SizedBox(height: 12),
                Wrap(
                  spacing: 12,
                  runSpacing: 12,
                  children: <Widget>[
                    LiquidGlassButton(
                      blurSigma: _blur,
                      noiseOpacity: _noise,
                      onPressed: () {},
                      child: const Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Icon(Icons.add),
                          SizedBox(width: 6),
                          Text('New'),
                        ],
                      ),
                    ),
                    LiquidGlassButton(
                      blurSigma: _blur,
                      noiseOpacity: _noise,
                      onPressed: () {},
                      child: const Text('Continue'),
                    ),
                    LiquidGlassIconButton(
                      icon: Icons.arrow_upward_rounded,
                      onPressed: () {},
                      size: 68,
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                ...List<Widget>.generate(8, (int index) {
                  return LiquidGlassSurface(
                    blurSigma: _blur,
                    noiseOpacity: _noise,
                    margin: const EdgeInsets.only(bottom: 12),
                    child: Row(
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.white.withValues(alpha: 0.4),
                          child: Text('${index + 1}'),
                        ),
                        const SizedBox(width: 12),
                        Expanded(
                          child: Text(
                            'Glass Card #${index + 1}',
                            style: Theme.of(context).textTheme.titleMedium,
                          ),
                        ),
                        const Icon(Icons.chevron_right),
                      ],
                    ),
                  );
                }),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildControls() {
    return LiquidGlassSurface(
      margin: const EdgeInsets.only(top: 8),
      borderRadius: BorderRadius.circular(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Wrap(
            spacing: 10,
            runSpacing: 10,
            children: <Widget>[
              _enumDropdown<LiquidGlassMode>(
                label: 'Mode',
                value: _mode,
                values: LiquidGlassMode.values,
                onChanged: (LiquidGlassMode value) =>
                    setState(() => _mode = value),
              ),
              _enumDropdown<LiquidGlassQuality>(
                label: 'Quality',
                value: _quality,
                values: LiquidGlassQuality.values,
                onChanged: (LiquidGlassQuality value) =>
                    setState(() => _quality = value),
              ),
              _enumDropdown<_PresetStyle>(
                label: 'Style',
                value: _presetStyle,
                values: _PresetStyle.values,
                onChanged: (_PresetStyle value) =>
                    setState(() => _presetStyle = value),
              ),
            ],
          ),
          const SizedBox(height: 10),
          LiquidGlassSegmentedControl<_DemoDensity>(
            children: const <_DemoDensity, Widget>{
              _DemoDensity.compact: Text('Compact'),
              _DemoDensity.comfortable: Text('Comfort'),
              _DemoDensity.expanded: Text('Wide'),
            },
            groupValue: _density,
            onValueChanged: (_DemoDensity value) {
              setState(() => _density = value);
            },
          ),
          const SizedBox(height: 10),
          Row(
            children: <Widget>[
              Expanded(
                child: Text(
                  'Live native effects',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
              ),
              LiquidGlassSwitch(
                value: _liveEffects,
                onChanged: (bool value) => setState(() => _liveEffects = value),
              ),
            ],
          ),
          const SizedBox(height: 10),
          Text('Blur: ${_blur.toStringAsFixed(1)}'),
          LiquidGlassSlider(
            value: _blur,
            min: 0,
            max: 32,
            onChanged: (double value) => setState(() => _blur = value),
            enabled: _liveEffects,
          ),
          Text('Noise: ${_noise.toStringAsFixed(2)}'),
          LiquidGlassSlider(
            value: _noise,
            min: 0,
            max: 0.2,
            onChanged: (double value) => setState(() => _noise = value),
            enabled: _liveEffects,
          ),
        ],
      ),
    );
  }

  Widget _enumDropdown<T extends Enum>({
    required String label,
    required T value,
    required List<T> values,
    required ValueChanged<T> onChanged,
  }) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text('$label: '),
        DropdownButton<T>(
          value: value,
          onChanged: (T? next) {
            if (next != null) {
              onChanged(next);
            }
          },
          items: values
              .map((T e) => DropdownMenuItem<T>(value: e, child: Text(e.name)))
              .toList(),
        ),
      ],
    );
  }
}

enum _PresetStyle {
  adaptive(LiquidGlassPresets.adaptive),
  adaptiveFuture(LiquidGlassPresets.adaptiveFuture);

  const _PresetStyle(this.platformStyle);

  final LiquidGlassPlatformStyle platformStyle;
}

enum _DemoDensity { compact, comfortable, expanded }