capsule_nav_bar library

A bottom navigation bar that floats over the content as a rounded capsule, its selection marked by a pill that slides between destinations.

CapsuleNavBar(
  destinations: const [
    NavBarDestination(
      label: 'Home',
      lineIcon: Icons.home_outlined,
      fillIcon: Icons.home,
    ),
    NavBarDestination(
      label: 'Search',
      lineIcon: Icons.search_outlined,
      fillIcon: Icons.search,
    ),
  ],
  activeIndex: index,
  onDestinationSelected: (i) => setState(() => index = i),
);

Colours, shapes and metrics come from CapsuleNavBarTheme, registered as a ThemeExtension; with none registered the bar derives a palette from the ambient ColorScheme. glass puts a backdrop blur behind a translucent bar, for the frosted look.

Classes

CapsuleNavBar

A bottom navigation bar that floats over the content as a rounded capsule, its selection marked by a pill that slides between destinations.

CapsuleNavBarTheme

Everything a CapsuleNavBar needs to paint itself.

NavBarDestination

One destination of a CapsuleNavBar.

Constants

kCapsuleNavBarDuration → const Duration

The default duration of the indicator slide.