Dynamic Bottom Navigation with go router | Flutter | Power series

So you are at the point in life where you wanted to implement bottom navigation with go router which is can be controlled by API. First of all, why dwell in complicated stuff, bottom navigation with go router is no simple task in itself, and you want it to be dynamic assuming driven by either API or Firestore.

Fear not, I have already spent a good amount of time implementing it and spending a little more time so, you don’t have to spend and build upon my work.

We’ll be building this by taking a baby step, adding complexity with each step.

1. Building simple bottom navigation.
2. Navigating bottom navbar screens with go router.
3. API-driven bottom navigation.

Without further ado, let’s get started. Also if you are more kinda show me the damm code person just check this GitHub repository.

Starting with simple bottom navigation bar.

One of the awesome things about Flutter is having built-in APIs for most of the simple app needs below is a simple code of static bottom navigation.

Don’t think any explanation is needed, but it’s there to give us a starting point. If you want to start code too then please refer to this branch. Alright then, we can increase a little bit of complexity.

Navigating bottom navbar screens with go router.

Instead of using buildBodyand currentIndexfor routing, we’ll be using go router to navigate between screens.

Why go router? reason being it’s now under the wing of official Flutter packages and not to mention its simplicity and good documentation.

For scenarios like this go router has a new type of route called ShellRoute. ShellRoute is a route that displays a UI shell around the route. You’ll instinctively understand about shellRoute once we do the implementation.

First, we’ll rename HomeViewto AppScaffold. This we’ll be the UI that our ShellRoute will be rendering.

As you can see 1has a child attribute, so instead of buildBody we’ll be rendering a child which is passed and we’ll be getting from shellRoute builder.

In onTap callback, all we need to do is context.go(location) to do the navigation, and currentIndex is calculated on the runtime every time navigation takes place by reversing the location.

ShellRoute has multiple goRoute whose returns a widget and that is child attribute to shellRoute builder.

To dive in detail code please check this branch.

API driven bottom navigation.

Okay, now our next step is to make the bottom navigation bar API driven. We’ll be getting bottom navigation items from an API.

I have created a gist that has the layout in it. The larger purpose of this layout JSON file is to build a complete layout. Right now I have simplified it to navigation only but you can overload it with your particular requirements.

We’ll be needing an app state class whose purpose is to keep track of the app layout.

In AppScaffold.initState we’ll do the API call to the gist file and parse the layout and update the AppState.

Wrapping buildLayout in try-catch and on any exception we’ll set a default layout.

The complete code can be found in this repo.

Personal Note

Hey, thank you for reading this article. As I have said the reason for writing this blog is I have spent a good time building one of my applications, so spending some more time writing it down, simplifying it, and hosting a boilerplate Github repository. So anyone can use it and has a starting point.

If you have any suggestions please feel free to write a comment or reach out to me on LinkedIn.

Also the past year I have been working exclusively on Flutter and have built many interesting things, If you would like to see more of the power series please follow to get notified.

Fin.