用了就会爱上--跨组件状态共享（Provider）

众所周知Flutter Widget 分为有状态的StatefulWidget 和无状态的 StatelessWidget 在StatefulWidget里我们通过setState方法来改变数据刷新页面，如下

int _index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('provider demo'),),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(_index.toString()),
          SizedBox(height: 10,width: double.infinity,),
          RaisedButton(onPressed: (){
            setState(() {
              _index++;
            });
          }, child: Text('加1'),)
        ],
      ),
    );
  }

每次点击按钮都会setState()来重新build页面，当数据简单的时候这种方法还是可行的，一旦数据复杂庞大起来的时候，代码中将充满了setState方法，这不是我们想见到的，能不能有办法，数据一改变就自动刷新页面呢？Flutter为我们提供了组件状态管理的Provider。官方文档点此查阅https://pub.dev/packages/provider
使用起来也是相当方便呢
1.在pubspec.yaml导入provider的包

provider: ^4.0.4

2.创建数据类，该类需继承ChangeNotifier

class ProviderDemoNotifier extends ChangeNotifier {
  int _index = 1;
  int get index => _index;
  set index(int value) {
    _index = value;
    notifyListeners();  //调用此方法可刷新页面，相当于调用了setstate
  }

}

3.重写刚才的界面

@override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ProviderDemoNotifier>(
        create: (_) => ProviderDemoNotifier(),
        child: Scaffold(
          appBar: AppBar(
            title: Text('provider demo'),
          ),
          body: Consumer(builder: (BuildContext context, ProviderDemoNotifier notifier, Widget child) =>
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(notifier.index.toString()),
                  SizedBox(height: 10,width: double.infinity,),
                  RaisedButton(onPressed: (){
                    notifier.index++;
                  }, child: Text('加1'),)
                ],
              ),
          )
        ));
  }

每次更新index的值都会重新刷新页面，其实就是通过ChangeNotifier 中的 notifyListeners() 方法刷新页面。