Navigation
Bottom Navigation Bar
A bottom navigation bar is usually present at the bottom of root pages. It is used to navigate between a small number of views, typically between three and five.
1class BottomNavigationBarExample extends StatefulWidget {2 @override3 State<BottomNavigationBarExample> createState() =>4 _BottomNavigationBarExampleState();5}67class _BottomNavigationBarExampleState8 extends State<BottomNavigationBarExample> {9 int _index = 1;1011 @override12 Widget build(BuildContext _) => FBottomNavigationBar(13 index: _index,14 onChange: (index) => setState(() => _index = index),15 children: const [16 FBottomNavigationBarItem(17 icon: Icon(FLucideIcons.house),18 label: Text('Home'),19 ),20 FBottomNavigationBarItem(21 icon: Icon(FLucideIcons.layoutGrid),22 label: Text('Browse'),23 ),24 FBottomNavigationBarItem(25 icon: Icon(FLucideIcons.radio),26 label: Text('Radio'),27 ),28 FBottomNavigationBarItem(29 icon: Icon(FLucideIcons.libraryBig),30 label: Text('Library'),31 ),32 FBottomNavigationBarItem(33 icon: Icon(FLucideIcons.search),34 label: Text('Search'),35 ),36 ],37 );38}39CLI
To generate a specific style for customization:
Usage
A bottom navigation bar is typically used with FScaffold. A working example can be found here.
FBottomNavigationBar(...)
1FBottomNavigationBar(2 style: const .delta(padding: .value(.zero)),3 index: 0,4 onChange: (index) {},5 children: const [6 FBottomNavigationBarItem(7 icon: Icon(FLucideIcons.house),8 label: Text('Home'),9 ),10 ],11)FBottomNavigationBarItem(...)
1FBottomNavigationBarItem(2 style: const .delta(padding: .value(.zero)),3 icon: const Icon(FLucideIcons.house),4 label: const Text('Home'),5)