Flutter 状态管理 flutter_Provide

项目的商品类别页面将大量的出现类和类中间的状态变化，这就需要状态管理。现在Flutter的状态管理方案很多，redux、bloc、state、Provide。

• Scoped Model : 最早的状态管理方案，我刚学Flutter的时候就使用的这个，虽然还有公司在用，但是大部分已经选用其它方案了。

• Redux：现在国内用的最多，因为咸鱼团队一直在用，还出了自己fish redux。

• bloc：个人觉的比Redux简单，而且好用，特别是一个页面里的状态管理，用起来很爽。

• state：我们首页里已经简单接触，缺点是耦合太强，如果是大型应用，管理起来非常混乱。

• Provide：是在Google的Github下的一个项目，刚出现不久，所以可以推测他是Google的亲儿子，用起来也是相当的爽。

所以个人觉的Flutter_provide是目前最好的状态管理方案，那我们就采用这种方案来制作项目。

flutter_Provide简介

Provide是Google官方推出的状态管理模式。官方地址为：https://github.com/google/flutter-provide

个人看来Provide被设计为ScopedModel的代替品，并且允许我们更加灵活地处理数据类型和数据。

首先添加依赖

provide: ^1.0.2

使用Provide

下面就简单用flutter_provide进行一个简单的小实例，例子是这样的，我们在一个页面上增加了Text和一个RaisedButton.并且故意使用了StatelessWidget作了两个类。也就是估计作了一个不可变的页面，并且用两个类隔离了。然后我们要点击按钮，增加数字数量，也就是把状态打通。

制作最基本的页面

快速写一个最基本的页面，并且全部使用了StatelessWidget进行。

import 'package:flutter/material.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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:Text('0')
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:RaisedButton(
        onPressed: (){},
        child: Text('递增'),
      )
    );
  }
}

创建Provide

这个类似于创建一个state，但是为了跟State区分，我们创建Provide。新建一个provide文件夹，然后再里边新建一个counter.dart 文件.代码如下:

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{ //不用管理听众
  int value = 0;
  increment(){
    value++;
    notifyListeners(); //变化后通知听众，局部刷新Widget
  } 

}

这里混入了ChangeNotifier，意思是可以不用管理听众。现在你可以看到数和操作数据的方法都在Provide中，很清晰的把业务分离出来了。通过notifyListeners可以通知听众刷新。

将状态放入顶层

修改main.dart文件，先引入provide和counter：

import 'package:provide/provide.dart';
import './provide/counter.dart';

然后进行将provide和counter引入程序顶层。

void main(){
  var counter =Counter();
  var providers  =Providers();
  providers
    ..provide(Provider<Counter>.value(counter));
    //..可多个状态， ;在最后
  runApp(ProviderNode(child:MyApp(),providers:providers));
}

ProviderNode封装了InheritWidget，并且提供了 一个providers容器用于放置状态。

获取状态

使用Provide Widget的形式就可以获取状态，比如现在获取数字的状态，代码如下。

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}',
             style: Theme.of(context).textTheme.display1, //大字体
          );
        },
      ),
    );
  }
}

修改状态

直接编写按钮的单击事件，并调用provide里的方法，代码修改如下。

class MyButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child:RaisedButton(
        onPressed: (){ //修改状态
          Provide.value<Counter>(context).increment();
        },
        child: Text('递增'),
      )
    );
  }
}

其它页面读取状态

为了更进一步说明状态是共享的，在“会员中心”页面，我们也显示出这个数字，代码如下:

import 'package:flutter/material.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.value}',
             style: Theme.of(context).textTheme.display1,
          );
        },
      ),
      )
    );
  }
}

总结：通过本节终结，可以掌握flutter_provide的使用方法，并作了一个最简单的案例。如果你以前使用过其它状态管理方案，你就会知道provide到底有多爽了。所以建议小伙伴使用Provide来进行管理状态。