Bottom navigation Bar in Flutter using GetX

In this blog, I’ll walk you through the steps of creating bottom navigation bar in Flutter using GetX.

I’ll be GetX for state management in this tutorial.

Step 1 : Project setup

Create a New Flutter project. Add the latest version of Get in pubspec.yaml file and run flutter pub get

Step 2 : Creating the Controller

Create your business logic class and place the tabIndex variable inside it. the tabIndex variable is made observable by using a simple .obs. Whenever the value of tabIndex the IndexedStackwidget gets rebuilt. Inside the controller, we got a function to update the value of tabIndex. This function will be passed to the onTapof BottomNavigationBar. So whenever, an item is tapped, this changeTabIndex(int index) will be called.

Step 3 : Creating the Widget

Delete the MyApp class if it is present. I’m using LandingPage class as my home widget. Add the following class to the main.dart file

Bottom navigation bar in flutter

Create a Stateless widget and make it as the home page of your app. In the build method, return a SafeArea widget with Scaffold as the child widget.

Pass the BottomNavigationBar to the Scaffold widget. In the above code sample, I’m adding 4 bottom navigation bar items to the bottom navigation bar. Each item has an icon, text label & a background color. We can customize the bottom navigation bar showUnselectedLabels, showSelectedLabels,
backgroundColor, unselectedItemColor, selectedItemColor, unselectedLabelStyle, selectedLabelStyle. The currentIndex value should be 0. 0 here indicates the first widget in the IndexedStackwidget. onTap takes a function as value & this gets called every time an item is tapped. When the tabIndex value changes in the controller, the IndexedStack gets rebuilt every time. We wrapped the IndexedStack widget inside Obx builder, this takes of observing the tabIndex in the controller and rebuilding the stack.

Below is the working video of the code.

Bottom navigation working video

Thanks for giving a read, That’s it for now! Feels like learnt something interesting ? Share with your friends too. Stay tuned to be notified about my new articles, Follow me on Medium & Twitter.