glass_bar 1.1.0

A customizable glassmorphism navigation bar for Flutter with horizontal and vertical layouts, pinned or auto-hide panels, and flexible theming.

GlassBar

GlassBar is a Flutter navigation bar package with glassmorphism styling, horizontal and vertical layouts, pinned panels by default, optional auto-hide, and flexible theming.

Features

• Horizontal bottom bar and vertical sidebar layouts
• Pinned panel behavior by default
• Optional panelAutoHideDuration
• Controlled and uncontrolled selection modes
• Flexible theming via GlassBarThemeData
• Accessibility support with tooltips and semantics
• GitHub Actions CI and a GitHub Pages demo

Install

dependencies:
  glass_bar: ^1.0.0

Quick start

GlassBar(
  items: const [
    GlassBarItem(
      iconData: Icons.home_rounded,
      labelText: 'Home',
      panelContent: Text('Home panel'),
    ),
    GlassBarItem(
      iconData: Icons.settings_rounded,
      labelText: 'Settings',
      panelContent: Text('Settings panel'),
    ),
  ],
)

Controlled example

int? selectedIndex;

GlassBar(
  selectedIndex: selectedIndex,
  onTabChanged: (index) {
    setState(() => selectedIndex = index);
  },
  items: items,
)

Important behavior

By default, the panel stays visible until the item is unselected.

GlassBar(
  items: items,
  panelAutoHideDuration: null,
)

To enable temporary panels:

GlassBar(
  items: items,
  panelAutoHideDuration: const Duration(seconds: 2),
)

Main API

Property	Type	Default	Notes
items	List<GlassBarItem>	required	Navigation items
selectedIndex	int?	null	Controlled mode when provided
onTabChanged	ValueChanged<int?>?	null	Callback for selection changes
orientation	Axis	Axis.horizontal	Horizontal or vertical
maxExtent	double?	null	Constrains bar width or height
panelShowDuration	Duration	450ms	Show animation
panelHideDuration	Duration	250ms	Hide animation
panelAutoHideDuration	Duration?	null	Auto-hide delay
theme	GlassBarThemeData?	default theme	Styling

Web demo

Use GitHub Actions Pages deployment from example/.

Repository name example:

https://dexter-cnx.github.io/glass_bar_widget/

If your repo name differs from glass_bar_widget, update the --base-href value in .github/workflows/web-demo.yml.

Browser screenshot tool

You can capture a web screenshot (and optional interaction frames) using the built-in Playwright script:

make media-web-browser

This command runs tool/media/capture_web_demo.mjs and writes output into doc/media/. By default it expects a running web demo at http://127.0.0.1:8080 and starts in manual capture mode.

Manual capture workflow:

1. Open the demo and navigate to the mode you want.
2. Press Space to capture the current frame.
3. Press Esc to finish.
4. The script will combine all captured frames into doc/media/glass_bar_demo.gif.

Publish checklist

See PUBLISH_CHECKLIST.md.

Branch protection

See doc/BRANCH_PROTECTION_CHECKLIST.md.