Photo by AbsolutVision on Unsplash

After going through various examples on implementing a bottom navigation bar in Flutter, I realized that they were missing out on the core functionality.

Here’s what we will try to mimic

YouTube Navigation

I. Let’s start with a clean project

II. Now let’s add a list of widgets representing pages, and wrap our Scaffold inside WillPopScope

The WillPopScope widget keeps an eye on the app exit state, our goal with it is to intercept all back navigation events.

III. So what’s the plan?

We will take help of stacks!

pgStack = [0, 3, 2, 1]

On every page change we will push the page index to our stack & on every back navigation we will pop the last index.

But wait a sec! We can’t push the same elements over & over, else we’ll end up in a crazy dance of pages!

IV. Time to define our variables and push method(pgPush)

Before moving ahead, let’ s add a bottom navigation bar and call pgPush method each time a navigation icon is tapped.

VI. Finally let’s finish-up by defining the pop method(pgPop) which is called every time back button is pressed.

And done!

Our app in action

Grab the full code here

Like what you read!? feel free to leave 👏😄

Checkout more here 👇

Note to self: Update my PWAs, implement this in SkyRoutes