DEV Community

Akash Pattnaik
Akash Pattnaik

Posted on

The new BottomBar in Flutter

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',
            ),
          ],
       ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarklyโ€™s MCP server ๐Ÿ

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

Top comments (0)