Provide状态管理方案

说明：

状态管理说白了就是在一个地方设置了数据，其他地方的数据就会跟着改变，常见的应用有，登录、购物车等。废话不多说，直接上代码。

需求：

在购物车界面做一个计数器，点击按钮后+1，然后在其他页面显示对应的值，效果图如下：

实现：

1. 安装插件：pubspec.yaml（版本可从github获取最新的）

provide: ^1.0.2

2. 创建文件lib/provide/counter.dart

import 'package:flutter/material.dart';

// 混入 
class Counter with ChangeNotifier {
  int count = 0;
  increment(){
    this.count++;
    // 内部方法
    // 添加监听器，通知听众发生了变化,局部刷新Widget
    notifyListeners();
  }
}

3. 将Provide放到main.dart中

// 引入状态管理插件
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import './provide/counter.dart';

void main() {
  // 定义类
  var counter = Counter();  
  var providers = Providers(); // 注意这里的provide有s
  
  providers
    ..provide(Provider<Counter>.value(counter));

  runApp(ProviderNode(
    child: MyApp(),
    providers: providers,
  ));
}

4. 开发购物车界面 lib/pages/cart_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';// 引入状态管理插件
import 'package:provide/provide.dart';
import '../provide/counter.dart';

class CartPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('购物车')),
      body: Center(
        child: Column(
          children: <Widget>[
            Number(),
            MyButton()
          ],
        ),
      ),
    );
  }
}

// 显示数字Widget
class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 200.0, bottom: 50),
      child: Provide<Counter>(
        builder: (context, child, counter){
          return Text(
            '${counter.count}', 
            style: TextStyle(fontSize: ScreenUtil().setSp(80),)
          );
        },
      ),
    );
  }
}
// 按钮Widget
class MyButton extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        Provide.value<Counter>(context).increment();
      },
      child: Text('点击'),
    );
  }
}

3. 在个人中心界面显示+1后的数字 lib/pages/member_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:provide/provide.dart';
import '../provide/counter.dart';

class MemberPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Provide<Counter>(
          builder: (context, child, counter){
            return Text(
              '${counter.count}',
              style: TextStyle(fontSize: ScreenUtil().setSp(80),)
            );
          },
        ),
      ),
    );
  }
}

至此，我们的Provide状态管理就完美的实现了，小伙伴，你们学会了吗？