• The original address: Bottom Navigation Bar using the Provider | Flutter
  • Originally written by Ashish Rawat
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Xat_MassacrE

In this article, I will show you how to use the Flutter Provider package in the BottomNavigationBar.

What is a Provider?

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

Note that setState works fine in most situations, but you can’t use it everywhere.

Especially when your code is messy, such as when you have a FutureBuilder in your build, using setState is definitely problematic.

Let’s see how this works in the BottomNavigationBar.

Step 1: Add dependencies in pubspec.yaml.

provider : <latest-version>
Copy the code

Step 2: Create a Provider class

class BottomNavigationBarProvider with ChangeNotifier { int _currentIndex = 0; get currentIndex => _currentIndex; set currentIndex(int index) { _currentIndex = index; notifyListeners(); }}Copy the code

In this provider, I save the current value of the BottomNavigationBar, and when this value is set in the Provider, the BottomNavigationBar will receive notification of the current value change and update the label.

Step 3: Wrap it with the ChangeNotifierProvider as the parent

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

By wrapping the component with the ChangeNotifierProvider, the component is notified of the value change.

Step 4: Create a label for BottomNavigationBar

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
        alignment: Alignment.center,
        height: 300,
        width: 300,
        child: Text(
          "Home",
          style: TextStyle(color: Colors.white, fontSize: 30), ), color: Colors.amber, )), ); }}Copy the code

The bottom navigation bar here has three tabs.

Step 5: Create the BottomNavigationBar using the Provider

var currentTab = [
  Home(),
  Profile(),
  Setting(),
  ];
///
var provider = Provider.of<BottomNavigationBarProvider>(context);
return Scaffold(
  body: currentTab[provider.currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: provider.currentIndex,
    onTap: (index) {
      provider.currentIndex = index;
    },
    items: [
      BottomNavigationBarItem(
        icon: new Icon(Icons.home),
        title: new Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.person),
        title: new Text('Profile'),
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.settings), title: Text('Settings'))],),);Copy the code

Here I create a list for the screen, change the page displayed on the screen using the provider-provided subscript, and change the Privider and update the subscript by clicking on the label.

The following is an example:

Use Provider as a simple app for the bottom navigation bar

Persistent BottomNavigationBar

Provider works fine when you don’t use setState to change tags, but if you want to keep tabs on the screen, you need PageStorageBucket. Here’s an example from Tensor Programming:

Contribute to tensor-programming/flutter_presistance_bottom_nav_tutorial development by creating an account on GitHub.

Thanks for reading this ❤

If there are any mistakes in the article, please point them out in the comments, we would like to get suggestions for improvement.

Follow me on LinkedIn.

Pay attention to my GitHub Repositories.

Follow me on Twitter.

FlutterDevs has been working on Flutter for some time. You can follow us on Facebook, GitHub and Twitter.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.