glass_bottom_bar

A floating frosted-glass bottom navigation bar for Flutter — inspired by the iOS 26 Liquid Glass aesthetic.

💧 Pill-shaped, floating layout with BackdropFilter blur
🔲 Active item gets a rounded highlight box
🔴 Optional notification badge per item
🌗 Fully adaptive: dark & light theme out of the box
📜 Scroll-aware: shrinks while scrolling, springs back when idle
📦 Zero extra dependencies — pure Flutter SDK

Preview

Add a GIF or screenshot here after your first run.

Installation

dependencies:
  glass_bottom_bar: ^0.0.1

Basic usage

import 'package:glass_bottom_bar/glass_bottom_bar.dart';

Scaffold(
  extendBody: true,
  body: ...,
  bottomNavigationBar: GlassBottomBar(
    currentIndex: _index,
    onTap: (i) => setState(() => _index = i),
    items: const [
      GlassBarItem(icon: Icons.home_rounded, activeIcon: Icons.home_rounded),
      GlassBarItem(icon: Icons.search_rounded),
      GlassBarItem(icon: Icons.explore_rounded, badge: true),
      GlassBarItem(icon: Icons.account_circle_outlined, activeIcon: Icons.account_circle),
      GlassBarItem(icon: Icons.notifications_rounded),
    ],
  ),
)

Scroll-aware animation

Pass the scroll controller of your page's ListView / CustomScrollView to get the Instagram-style zoom-in/zoom-out effect:

final _scrollController = ScrollController();

GlassBottomBar(
  scrollController: _scrollController,
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
  items: const [...],
)

GlassBottomBar parameters

Parameter	Type	Default	Description
`items`	`List<GlassBarItem>`	required	Nav items
`currentIndex`	`int`	required	Currently selected index
`onTap`	`ValueChanged<int>`	required	Callback when an item is tapped
`blur`	`double`	`18`	Backdrop blur sigma
`height`	`double`	`58`	Pill height
`tint`	`Color?`	Adaptive (white/black with alpha)	Glass surface tint
`activeColor`	`Color?`	Adaptive (black in light, white in dark)	Icon/label color when selected
`inactiveColor`	`Color?`	Adaptive	Icon/label color when unselected
`margin`	`EdgeInsets`	`fromLTRB(28, 0, 28, 14)`	Spacing from screen edges
`scrollController`	`ScrollController?`	`null`	Attach to enable scroll-shrink animation
`scrollShrinkScale`	`double`	`0.86`	Scale when actively scrolling (0.0–1.0)

GlassBarItem parameters

Parameter	Type	Default	Description
`icon`	`IconData`	required	Icon shown when inactive
`activeIcon`	`IconData?`	`null`	Icon shown when active (falls back to `icon`)
`label`	`String?`	`null`	Optional text label below icon
`badge`	`bool`	`false`	Shows a small red dot notification badge

License

BSD 3-Clause — see LICENSE.