Bottom Navigation Bar using Provider | Flutter

Ashish Rawat
Jul 3, 2019 · 2 min read

In this article, I'll be showing you how you can use Flutter Provider package in the BottomNavigationBar.

What is Provider?

Provider is a new state management approach recommended by the Flutter team.

Note
setState also works fine for many case , you should not use it every where .
But in case you have a messy code like you have a FutureBuilder in the build then setState will definately cause problem.

Let's see how we can use it in BottomNavigationBar.

Step 1: Add the dependency in your pubspec.yaml.

provider : <latest-version>

Step 2: Create a provider class

class BottomNavigationBarProvider with ChangeNotifier {
int _currentIndex = 0;

get currentIndex => _currentIndex;

set currentIndex(int index) {
_currentIndex = index;
notifyListeners();
}
}

In this provider, I am storing the current value of the BottomNavigationBar and when the current value is set into to provider, the BottomNavigationBar will be notified with the current value and update the tab.

Step 3: Wrap parent Widget with ChangeNotifierProvider

home: ChangeNotifierProvider<BottomNavigationBarProvider>(
child: BottomNavigationBarExample(),
builder: (BuildContext context) => BottomNavigationBarProvider(),
),

I have wrapped my widget with ChangeNotifierProvider so my widget will be notified when the value changes.

Step 4: Create tabs for BottomNavigationBar

I have three widgets tabs which I’ll attach with my bottom navigation bar.

Step 4: Create BottomNavigationBar with provider

So I have created a list for the screens and change the screens with an index which is provided by the provider and the tab changes the provider updates the index.

Here is the code for the above example :

Persistent BottomNavigationBar

Provider works great when changing the tabs without using setState but if you want to keep your state of the screens attached with the tabs, try using PageStorageBucket , I have attached an example by Tensor Programming below:

Thanks for reading this article ❤

If I got something wrong, Let me know in the comments. We would love to improve.

Clap 👏 If this article helps you.

FlutterDevs has been working on Flutter from quite some time now. You can connect with us on Facebook,GitHub and Twitter for any flutter related queries.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Ashish Rawat

Written by

Android and Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store