Flutter之Provide 状态管理使用

在flutter 开发应用中，不同组件及不同页面的之间的数据通信及状态通知变得尤为重要。
今天也是学习了一下provide这个状态管理组件。其实状态管理组件很多，同事在用event_bus
可是听说provide是谷歌的亲儿子。所以小白我就来试一试。结果有点小复杂。
还好最终是完成了这个状态的Demo

#1.在pubspec.yaml中添加依赖并点击图中 ②处进行下载

官网： 查看最新版本

dependencies:
  provide: ^1.0.2 # 这里的版本查看官方

#2.在lib下新建一个provide文件夹并新建一个自定义的文件 我这里新建了一个counter.dart

#3. 编辑counter.dart

import 'package:flutter/material.dart';

class Counter with ChangeNotifier { //父类的方法 不限制听众
  int value=0; 
  
  void addNum() {
    value++;
    notifyListeners(); //父类的方法,发出通知 
  }
}

#3.设置顶层main.dart文件进行修改

import 'package:provide/provide.dart'; //引入provide
import './provide/counter.dart'; //引入方法文件



//修改main 方法 ProviderNode表示的是提供者
 void main() {
     var providers = Providers()..provide(Provider.function((ctx) => Counter()));
     runApp(ProviderNode(child:MyApp(),providers: providers)); 

 }

#3.页面临听 为了展示provide的强大全局通信的能力，这里我建了两个没有关联的组件 并把它们组装在主方法里

//数字展示组件
class Number extends StatelessWidget {
  const Number({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Provide<Counter>(
    builder: (BuildContext context, Widget child, Counter counter) {
        return Text(
            '${counter.value}', //监听状态文件里面值的变化
            style: Theme.of(context).textTheme.display1,
        );
    },
    ),
    );
  }
}

//按钮点击组件
class ClickBtn extends StatelessWidget {
  const ClickBtn({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
      return Container(
      child:RaisedButton(
          onPressed: () => Provide.value<Counter>(context).addNum(), //触发状态文件里的事件
          child: Text("递增"),
      ),
    );
  
  }
}

#4.把它们组装在主方法里如图所示。点击按钮就可以操作并看到结果了。