Common bottom navigation bar made easy — Flutter

TheBoringDeveloper
Jan 20 · 4 min read

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

For detailed tutorial check out this —

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

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-

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-

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

The Startup

Medium's largest active publication, followed by +582K people. Follow to join our community.

TheBoringDeveloper

Written by

Flutter Developer | Android Developer | Backend developer | Problem solver

The Startup

Medium's largest active publication, followed by +582K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade