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.

API Reference
1class BottomNavigationBarExample extends StatefulWidget {
2 @override
3 State<BottomNavigationBarExample> createState() =>
4 _BottomNavigationBarExampleState();
5}
6
7class _BottomNavigationBarExampleState
8 extends State<BottomNavigationBarExample> {
9 int _index = 1;
10
11 @override
12 Widget build(BuildContext _) => FBottomNavigationBar(
13 index: _index,
14 onChange: (index) => setState(() => _index = index),
15 children: const [
16 FBottomNavigationBarItem(icon: Icon(FIcons.house), label: Text('Home')),
17 FBottomNavigationBarItem(
18 icon: Icon(FIcons.layoutGrid),
19 label: Text('Browse'),
20 ),
21 FBottomNavigationBarItem(icon: Icon(FIcons.radio), label: Text('Radio')),
22 FBottomNavigationBarItem(
23 icon: Icon(FIcons.libraryBig),
24 label: Text('Library'),
25 ),
26 FBottomNavigationBarItem(
27 icon: Icon(FIcons.search),
28 label: Text('Search'),
29 ),
30 ],
31 );
32}
33

CLI

To generate and customize this style:

dart run forui style create bottom-navigation-bar

Usage

A bottom navigation bar is typically used with FScaffold. A working example can be found here.

FBottomNavigationBar(...)

1FBottomNavigationBar(
2 style: const .delta(padding: .zero),
3 index: 0,
4 onChange: (index) {},
5 children: const [
6 FBottomNavigationBarItem(icon: Icon(FIcons.house), label: Text('Home')),
7 ],
8)

FBottomNavigationBarItem(...)

1FBottomNavigationBarItem(
2 style: const .delta(padding: .zero),
3 icon: const Icon(FIcons.house),
4 label: const Text('Home'),
5)

Tile

A specialized Item for touch devices, typically used to group related information together.

Breadcrumb

Displays a list of links that help visualize a page's location within a site's hierarchical structure. It allows navigation up to any of the ancestors.

On this page

CLI
Usage
FBottomNavigationBar(...)
FBottomNavigationBarItem(...)