Crafting a Bottom Navigation Bar in Flutter

Crafting a Bottom Navigation Bar in Flutter

Making a functional bottom navigation bar is one of the key elements in making your mobile app user-friendly and easy to use. Flutter makes it easy to create a bottom navigation bar by providing the bottomNavigationBar property for the Scaffold widget. In this article, we will look at how to create a bottom navigation bar using Flutter.

Creating an App Bar

The first step in creating a bottom navigation bar is to create an AppBar. This will allow us to add the tabs that will be used as the navigation links. To do this, add the AppBar widget to the Scaffold widget like this:

AppBar(
    title: Text('Bottom Navigation Bar'),
    bottom: TabBar(
    tabs: [
        Tab(text: 'Home', icon: Icon(Icons.home)),
        Tab(text: 'Profile', icon: Icon(Icons.person)),
        Tab(text: 'Settings', icon: Icon(Icons.settings))
    ],
   ),
)

This will create an AppBar with three tabs, each representing a different part of your app (e.g. Home, Profile, and Settings). Each tab will also have its own icon.

Creating the TabView

The next step is to create a TabView widget. This will allow us to create the different views that the user will see when they select one of the tabs. To do this, add a TabView widget to the Scaffold widget like this:

TabView(
    children: [
        HomePage(),
        ProfilePage(),
        SettingsPage()
    ]
)

This will create three different views, each representing one of the tabs. For each view, you can add whatever UI elements you need. For example, when the user selects the Home tab, they will see the HomePage view.

Creating the BottomNavigationBar

The last step is to create the BottomNavigationBar. This will allow us to link each tab to its corresponding view. To do this, add a BottomNavigationBar widget to the Scaffold widget like this:

BottomNavigationBar(
    items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
        ),
    ],
)

This will create a bottom navigation bar with three items, each linked to its corresponding view. You can also specify what should happen when each item is selected by adding a onTap parameter to the BottomNavigationBar widget.

Conclusion

In this article, we looked at how to create a Bottom Navigation Bar in Flutter. We started by creating an AppBar with three tabs and then added a TabView widget. Finally, we added a BottomNavigationBar widget, which links each tab to its corresponding view. Flutter makes it easy to create a bottom navigation bar and keep your application user-friendly and intuitive.