glass_bottom_bar 0.0.2

A floating frosted-glass bottom navigation bar with scroll-aware shrink animation, badge support, active icon swap, and an iOS 26 Liquid Glass aesthetic. Dark/light theme adaptive with no extra depend [...]

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.