flutter状态管理之Provide的简单使用

场景：点击按钮，让页面上的数字+1，每点击一次就+一次
步骤1:首先创建一个按钮和一个文本用来显示数字的变化：

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import 'package:practice_mall/counter.dart';
class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('购物车'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Number(),
            MyButton()
          ],
        ),
      ),
    );
  }
}
//创建文本组件
class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 200),
      child: Provide<Counter>(
        builder: (context,child,counter){
          return Text('${counter.value}');
        },
      ),
    );
  }
}
//创建按钮
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        Provide.value<Counter>(context).increment();
      },
      child: Text('++'),
    );
  }
}

步骤2:单独写一个dart类，用来写一个使数字每次+1的方法

import 'package:flutter/cupertino.dart';

class Counter with ChangeNotifier{
  int value = 0;
  increment(){
   value++;
   notifyListeners();
  }
}

步骤3：在程序的入口文件main.dart中加入一下代码

void main(){
  var counter = Counter();
  var provider = Providers();// Creates a new empty provider.
  provider..provide(Provider<Counter>.value(counter));
  runApp(ProviderNode(child: MyPage(), providers: provider));
}
......
......
......

步骤4:
在步骤1中的页面设置text的值和按钮的方法