Bottom Navigation Bar in Flutter using GetX

Flutter, one of the fastest way to build cross-platform native mobile applications, it allows developers to develop interactive, smooth, feature-rich and beautiful UI apps.

What is a bottom navigation bar?

Based on Material design definition, A material widget that’s displayed at the bottom of an app for selecting among a small number of views, typically between three and five, may consist of multiple items in form of labels, icons, or both, It provides quick navigation between the top-level views of an app

This article is written based on the bottom navigation bar in Flutter using GetX state management video tutorial on TeamArtisans's youtube channel.

Why GetX?

GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

Grab a coffee ☕ and let’s jump together

Our page and controller before implementing

If you’re new to GetX or didn't work yet, I recommend you to go to our youtube channel and watch the scaffolding video tutorial.

Let’s make our page and controller ready.

Dashboard Page:

Dashboard page - where your bottom navigation and page container will be placed.

Dashboard Controller

Dashboard Controller

So … now we create our bottom navigation bar widget

And IndexedStack widget which will contain the pages

if you look at the children value you see 4 stateless widgets and the assigned index value will show the specific page come from the bottom navigation bar so now let’s have a look at our dashboard page

and at the end let’s define the changeTabIndex method inside the dashboard controller

Now reload the app and you’ll see the bottom navigation and indexed stack widgets working on your dashboard page.

Full source code: https://github.com/TeamArtisansDev/flutter-getx-bottom-navigation-example

Hope you enjoyed this tutorial, in case of having question leave your comment here or join our Discord team.

TeamArtisans | Flutter GetX tutorial — Bottom Navigation Bar

Watch our video tutorials on youtube:

TeamArtisans

Website: https://teamartisans.com​​
Facebook: https://facebook.com/TeamArtisans​​
Twitter: https://twitter.com/TeamArtisans​​
Instagram: https://instagram.com/TeamArtisans​​
Medium: https://medium.com/TeamArtisans​​
Linkedin: https://linkedin.com/company/TeamArti...​
Discord: https://discord.gg/UHABgp5D​

With love ❤️ and respect 👍