BottomNavigationBar

A BottomNavItem-driven bottom nav bar with a standard and an elevated look.

View source on GitHub ↗

FBBottomNavigationBar.standard(
  items: navItems,
  selectedIndex: index,
  onItemSelected: (i) => setState(() => index = i),
);

CLI

Install this component into your project:

bottom-navigation-bar

$flutter_beautify add bottom-navigation-bar

Variants

FBBottomNavigationBar.standard() · FBBottomNavigationBar.elevated()

Key parameters

Parameter	Type	Default
items	List<BottomNavItem>	required
selectedIndex	int	0
onItemSelected	ValueChanged<int>?	—
activeColor	Color?	ambient colorScheme.primary

Usage

import 'package:your_app/widgets/bottom_navigation_bar.dart';

Scaffold(
  bottomNavigationBar: FBBottomNavigationBar.elevated(
    items: navItems,
    selectedIndex: index,
    onItemSelected: (i) => setState(() => index = i),
  ),
);