[译] 在 Flutter 中使用 Provider 构建底部导航栏在这篇文章中，我将向你们展示在 BottomNavi

原文地址：Bottom Navigation Bar using Provider | Flutter

原文作者：Ashish Rawat

译文出自：掘金翻译计划

本文永久链接：github.com/xitu/gold-m…

译者：Xat_MassacrE

在这篇文章中，我将向你们展示在 BottomNavigationBar 中如何使用 Flutter Provider 包。

什么是 Provider ？

Provider 是 Flutter 团队推荐的一种新的状态管理方案。

注意 setState 在大多数情况下也很好用，但是你不能在什么地方都用它。尤其是当你的代码比较凌乱的时候，比如在 build 中有一个 FutureBuilder 时，使用 setState 毫无疑问就会出现问题。

让我们来看看，如何在 BottomNavigationBar 中使用吧。

第一步：在 pubspec.yaml 中添加依赖。

provider : <latest-version>

第二步：创建一个 provider 类

class BottomNavigationBarProvider with ChangeNotifier {
  int _currentIndex = 0;

  get currentIndex => _currentIndex;

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

在这个 provider 中，我保存了 BottomNavigationBar 的当前值，当这个值在 provider 中被设置的时候，BottomNavigationBar 将会接收到当前值改变的通知并更新标签。

第三步：使用 ChangeNotifierProvider 作为父组件把它包起来

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

用 ChangeNotifierProvider 把组件包了起来，该组件就会接收到值改变的通知了。

第四步：为 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,
      )),
    );
  }
}

这里的底部导航栏有三个标签。

第五步：使用 provider 创建 BottomNavigationBar

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'))
    ],
  ),
);