Common bottom navigation bar made easy — Flutter

Welcome to this tutorial to creating a Common bottom navigation bar made easily in Flutter.

You can connect with me on Instagram

For detailed tutorial check out this —

Common bottom navigation bar — Flutter

Let’s start by looking at our end goal —

Observations from above —

1. We have a Bottom Navigation Bar with three items on Main Screen

• Home
• Calendar
• Profile

2. When we click on the button in HomePage, we move from Screen1 to Screen2 but the bottom navigation remains unchanged.

3. When we click on the button in CalendarPage, we move from Screen1 to Screen2 but this time the bottom navigation bar disappears.

4. We can also use the back button to navigate back for above two cases

5. IMPORTANT: If we carefully observe, we can see that the navigation history remains, even if we switch between different items in bottom navigation bar

Let’s Start

1. Import Icons for Bottom Navigation bar

flutter_icons | Flutter Package

dependencies:
  flutter_icons: ^1.0.0+1

2. Add Bottom Navigation Bar and Content

Here we will not talk about implementing BottomNavigationBar in Flutter. If you need help implementing BottomNavigationBar in flutter, check out this documentation from flutter team:

BottomNavigationBar class

Content:

1. Main screen — Has bottom navigation bar and displays its content
2. Home page — Has a text and a button to go to next screen (Screen2)
3. Calendar page — Has a button to go to next screen (Screen2)
4. Profile page — Empty screen with colored background
5. Screen2 — Has a text and a button to navigate back

Here’s the starter code-

Main Screen:

Home Page:

Calendar Page:

Profile Page:

Screen2:

Let’s check the output:

What is not working?

According to point 2, the Bottom Navigation Bar should remain unchanged but it does not.

Let’s try to fix it

We need to add this widget-

We also need to update the MainScreen to use the CommonBottomNavigationBar Widget-

We have just changed the body of the Scaffold.

Let’s check the output-

Let’s see what is still not working

• When clicking on button in CalendarPage instead of the Screen2 coming in front of MainScreen, it comes in front of content of Bottom Navigation bar item.

Let’s fix it

Instead of calling Navigator.push in CalendarPage, we will move it outside CommonBottomNavigationBar widget.

Updates:

• Line 71–73: Passed the function _next() to CalendarPage
• Line 81-83: Created a function named _next()

Let’s check the output

Here are some simple rules-

1. Navigating inside child item of CommonBottomNavigationBar will change content of child item.
2. Navigating outside child item of CommonBottomNavigationBar will navigate screen containing CommonBottomNavigationBar.

To get better understanding check detailed explanation-

Common bottom navigation bar — Flutter

Check the full project here.

(Did you know that you can clap up to 50 times per article? Help me out by hitting the clap button a bunch of times if this has been interesting or helpful to you. Thanks very much!)

Thank you for staying till the end.

More flutter spinner blogs-

Flutter: Custom tab indicator for TabBar

Custom Spinner Tooltip — Flutter

Flutter — Custom Spinner Thumb

Flutter — Custom Spinner Thumb -Part 2

I will be posting more about flutter, so stay tuned :)

Gursheesh Singh - Chandigarh, Chandigarh, India | Professional Profile | LinkedIn

theboringdeveloper