slide_glass_nav_bar 0.1.0

A floating liquid-glass bottom nav bar with press-and-hold + slide-to-select gestures, an elastic bounce on commit, and full RTL support.

slide_glass_nav_bar

A floating "liquid-glass" bottom navigation bar for Flutter.

• Frosted BackdropFilter surface that picks up whatever scrolls behind it.
• Press an item, slide horizontally across the bar — the highlight and selection follow your finger, no release required.
• Elastic bounce on every commit, including re-taps of the already-selected item.
• Full RTL support — items mirror and hit-testing flips when the surrounding Directionality is TextDirection.rtl.
• Zero asset dependencies, no Material requirement, fully themeable through a single SlideGlassNavBarStyle.

LTR	RTL

Install

dependencies:
  slide_glass_nav_bar: ^0.1.0

import 'package:slide_glass_nav_bar/slide_glass_nav_bar.dart';

Usage

Place the bar in a Stack so the frosted surface actually has something to sample. The bar handles its own bottom safe-area inset by default.

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          IndexedStack(
            index: _index,
            children: const [HomeScreen(), SearchScreen(), ProfileScreen()],
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: SlideGlassNavBar(
              currentIndex: _index,
              onChanged: (i) => setState(() => _index = i),
              items: [
                SlideGlassNavItem.icon(label: 'Home', icon: Icons.home_rounded),
                SlideGlassNavItem.icon(label: 'Search', icon: Icons.search_rounded),
                SlideGlassNavItem.icon(label: 'Profile', icon: Icons.person_rounded),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Custom icons

SlideGlassNavItem takes an iconBuilder that receives the current animated foreground color and the configured icon size. Pass them through to whichever widget renders your icon so the tint stays in sync with the selection.

SlideGlassNavItem(
  label: 'Inbox',
  iconBuilder: (context, color, size) => SvgPicture.asset(
    'assets/icons/inbox.svg',
    width: size,
    height: size,
    colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
  ),
)

Theming

Every visual and motion knob lives on SlideGlassNavBarStyle. The defaults match the reference liquid-glass look; override only what you care about.

SlideGlassNavBar(
  currentIndex: _index,
  onChanged: (i) => setState(() => _index = i),
  items: items,
  style: const SlideGlassNavBarStyle(
    selectedForegroundColor: Color(0xFF6750A4),
    selectedPillColor: Color(0x33B69DF8),
    blurSigma: 12,
    bottomMargin: 16,
  ),
)

Common fields:

Field	Default	Notes
horizontalMargin	25	Inset from the screen edges.
bottomMargin	25	Gap above the bottom safe area.
respectBottomSafeArea	true	Set false if you place the bar yourself.
itemHeight	54	Sets the bar's content height.
borderRadius	9999	Pill by default; reduce for rounded-rect.
blurSigma	8	Backdrop blur behind the bar.
fillTopColor / fillBottomColor	white @ 45% / 60%	Translucent gradient.
selectedForegroundColor	green #09B178	Icon + label color when selected.
selectedPillColor	grey @ 20%	Selected item tint — keep translucent.
pressScale / bounceScale	1.1 / 1.2	Peak scale during press / bounce.

See SlideGlassNavBarStyle for the full list, or the generated dartdoc on pub.dev once the package is published.

RTL

The bar reads Directionality.of(context) and renders right-to-left automatically when wrapped in an RTL app or Directionality. Hit-testing is also mirrored, so logical index 0 is always your first item regardless of visual order.

Directionality(
  textDirection: TextDirection.rtl,
  child: SlideGlassNavBar(...),
)

Example

A runnable example app lives in example/ — cd example && flutter run. It demonstrates LTR / RTL toggling and a custom color palette.

License

MIT © Dali Hmida