Flutter · iOS 26.4 · Liquid Glass

Frosted UI,
ready to drop in.

A translucent design system for Flutter — colors, type and glass components that feel native, monochrome by default with no blue in sight.

🧊 Real BackdropFilter glass 🌗 Light & dark 🎞️ Animated nav bar ♿ A11y-aware

flutter pub add liquid_glass_ui_kit

The signature piece

A bottom bar that bubbles

The selected highlight slides between items and the icon & pill give a springy pop — two animations you can toggle independently. Tap the items and flip the switches; it mirrors the Flutter API exactly.

animateIndicator animateBounce showLabels

Selected item drives your own state — it's a controlled widget.

GlassBottomNavBar(
  currentIndex: _tab,
  onTap: (i) => setState(() => _tab = i),
  items: _items,

  // Each animation toggles on its own:
  animateIndicator: true,   // sliding bubble
  animateBounce: true,      // springy pop (icon + pill)

  showLabels: true,         // false → icons only
  borderRadius: 40,          // big values clamp to a capsule
)

Everything in the box

Component catalog

Eleven building blocks, all reading their blur, tint and radii from one GlassTheme. Import once, use anywhere.

Motion

Two flags, full control

Flag	Default	What it does
animateIndicator	true	The highlight slides between items. Off → it appears instantly on the selected item.
animateBounce	true	The selected icon and pill pop with a spring on selection.
showLabels	true	Set false for an icons-only bar.
borderRadius	40	Bar corner radius; large values clamp to a full capsule.

Both animations disable themselves automatically when the system Reduce Motion setting is on.

One source of truth

Theming

Wrap a subtree in GlassTheme; read it anywhere with GlassTheme.of(context). Palette, type and metrics live together.

GlassTheme(
  data: GlassThemeData.dark(),
  child: GlassScaffold(
    appBar: GlassAppBar(title: Text('Home')),
    body: ...,
  ),
)

// Read tokens anywhere
final t = GlassTheme.of(context);
t.colors.accent;      // monochrome accent
t.typography.title1;  // SF-Pro-style scale
t.metrics.blurSigma;  // shared blur

// Opt into a color accent if you want one
GlassTheme(
  data: GlassThemeData.light(
    metrics: GlassMetrics(blurSigma: 32),
  ).copyWith(
    colors: GlassColors.light.copyWith(
      accent: Color(0xFFAF52DE),
    ),
  ),
  child: ...,
)

Frosted UI,ready to drop in.

A bottom bar that bubbles

Component catalog

Two flags, full control

Theming

Accessibility, by default

Reduce Transparency

Reduce Motion

Frosted UI,
ready to drop in.