liquid_kit

liquid_kit is a small Flutter package for Liquid Glass-inspired UI chrome. Today it ships:

  • LiquidGlassNavigationBar
  • LiquidGlassButton
  • LiquidGlassTheme and LiquidGlassMode
  • exported animation and layout constants from liquid_glass_physics.dart

It does not currently include a toolbar, search bar, or general shape primitives.

Preview

liquid_kit demo

Installation

pub package

flutter pub add liquid_kit


```bash
flutter pub get

No shader registration or extra setup is required.

LiquidGlassNavigationBar is a 2-5 tab bottom bar with spring motion, drag-to-select behavior, lift effects, and accessibility semantics.

LiquidGlassNavigationBar(
  tabs: const [
    LiquidGlassTab(icon: Icons.home_rounded, label: 'Home'),
    LiquidGlassTab(icon: Icons.explore_rounded, label: 'Explore'),
    LiquidGlassTab(icon: Icons.favorite_rounded, label: 'Activity'),
    LiquidGlassTab(icon: Icons.person_rounded, label: 'Profile'),
  ],
  currentIndex: currentIndex,
  onTabChanged: (index) => setState(() => currentIndex = index),
)

Supported options:

  • accentColor overrides the active tab color.
  • blurSigma tunes the backdrop blur strength.
  • springStiffness and springDamping tune pill motion.
  • collapseOnScroll and scrollController enable collapse behavior.
  • mode selects always, adaptive, or manual rendering.

Buttons

LiquidGlassButton renders a circular floating glass button with press lift and an iridescent edge effect.

LiquidGlassButton(
  onPressed: () {},
  child: const Icon(Icons.add_rounded),
)

Useful options:

  • size changes the button diameter.
  • blurSigma overrides the blur amount.
  • isDark overrides theme brightness detection.

Theming

Wrap part or all of your app in LiquidGlassTheme to share defaults:

LiquidGlassTheme(
  accentColor: const Color(0xFF007AFF),
  blurSigma: 20,
  springStiffness: 300,
  springDamping: 20,
  child: MyApp(),
)

performanceMode lowers blur strength for weaker devices. mode sets the default rendering policy for descendant liquid widgets.

Physics constants

The package exports liquid_glass_physics.dart, so you can tune against the same values used internally:

const double kTabSwitchStiffness = 300.0;
const double kTabSwitchDamping = 20.0;
const Duration kLiftActivationDuration = Duration(milliseconds: 250);
const double kOuterPillHeight = 70.0;

Example

The included demo app lives in example/ and shows the floating buttons plus the navigation bar over scrollable content.

Libraries

liquid_kit