7.9. Navigation and routing in Flutter: Navigation with bottom navigation bar

One of the most crucial aspects of application development is the ability to navigate between different screens and sections. In Flutter, this functionality is provided through the concept of routing and navigation. In this context, let's focus on one of the most common components used for navigation - the Bottom Navigation Bar.

The Bottom Navigation Bar is a horizontal navigation bar that is usually placed at the bottom of an application. It allows users to switch between different sections of the app with a single tap. This bottom navigation bar is commonly used in large scale applications where navigation between different sections is required.

How to implement navigation with Bottom Navigation Bar

To implement Bottom Navigation Bar navigation in Flutter, we first need to define a Bottom Navigation Bar in our app. To do this, we can use Flutter's BottomNavigationBar widget. This widget receives a list of items (BottomNavigationBarItem) that represent the different sections of the application.

First, we need to set a state for the current page index. This state will change each time a new item is selected in the bottom navigation bar.

int _currentIndex = 0;

Next, we define the list of pages that represent the different sections of the application. Each page is represented by a widget.

final List _pages = [
  Home page(),
  SearchPage(),
  ProfilePage(),
];

Next, we define the bottom navigation bar within the build method of the main widget. Here, we define the bottom navbar items and handle the page change logic when an item is selected.

BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
),

Finally, we display the current page in the body of the main widget. We use the _currentIndex state to determine which page to display.

body: _pages[_currentIndex],

Conclusion

Navigation with Bottom Navigation Bar is an essential part of app development in Flutter. It allows users to easily switch between different sections of the application, improving the user experience. With Flutter, implementing Bottom Navigation Bar navigation is easy and straightforward, thanks to the BottomNavigationBar widget and the flexibility of Flutter's routing system.

To create more complex and advanced applications, you can combine Bottom Navigation Bar navigation with other routing and navigation techniques, such as drawer navigation, tabbed navigation, and stack navigation. This will allow you to build applications with richer navigation and a more immersive user experience.

In conclusion, navigation and routing are crucial aspects of Flutter app development, and mastering these concepts is essential to becoming a competent Flutter developer.

Next page of the Free Ebook:

95Navigation and routing in Flutter: Navigation with pageview

3 minutes