Name: The new BottomBar in Flutter
Rating: 1.3 (3065 reviews)
Author: akashpattnaik

The new BottomBar in Flutter

Akash Pattnaik - Mar 17 -

- Dev Community

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...

class AppHomePage extends StatefulWidget {
  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',
            ),
          ],
       ),
    );
  }
}