Hello fam 👋!
This tutorial shows the new BottomBar implementation in flutter. (It’s official).
This is a new Material UI 3 implementation and is recommended to have only 3 childs (NavigationDestination).
For further lookup you can see here.
Here’s a sample code that I used…
const AppHomePage({super.key});
@override
State<AppHomePage> createState() => _AppHomePageState();
}
class _AppHomePageState extends State<AppHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: const SizedBox(),
// Here
bottomNavigationBar: NavigationBar(
overlayColor: MaterialStateProperty.all(Colors.yellow),
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
// indicatorColor: Colors.pink,
destinations: const [
NavigationDestination(
icon: Icon(CupertinoIcons.home),
selectedIcon: Icon(CupertinoIcons.house_fill),
label: ‘Home’,
),
NavigationDestination(
icon: Icon(Icons.explore_outlined),
selectedIcon: Icon(Icons.explore_rounded),
label: ‘Explore’,
),
NavigationDestination(
icon: Icon(CupertinoIcons.bookmark),
selectedIcon: Icon(CupertinoIcons.bookmark_solid),
label: ‘Saved’,
),
NavigationDestination(
icon: Icon(CupertinoIcons.person),
selectedIcon: Icon(CupertinoIcons.person_fill),
label: ‘Account’,
),
],
),
);
}
}
