14.provide状态管理基础

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

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

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

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

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

Provide：是在Google的Github下的一个项目

官方地址：：https://github.com/google/flutter-provide

f2764fd2bd27771f64416607b57ba5f.png

页面代码

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 RaisedButton(
      onPressed: (){},
      child: Text('递增'),
    );
  }
}

1.添加依赖
在pubspec.yaml中添加Provide的依赖

dependencies:
    provide: ^1.0.2

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

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int value =0 ;

  increment(){
    value++;
    notifyListeners();
  }
}

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

3.将状态放入顶层
先引入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));
}

4.获取状态
使用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,
          );
        },
      ),
    );
  }
}

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

class MyButton extends StatelessWidget {


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

全部代码
main.dart

import 'package:flutter/material.dart';
import './pages/index_page.dart';
import 'package:provide/provide.dart';
import './provide/counter.dart';

void main() {
  var counter = Counter();
  var providers = Providers();
  providers..provide(Provider<Counter>.value(counter));
  runApp(ProviderNode(child: MyApp(), providers: providers));
}

counter.dart

import 'package:flutter/material.dart';

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

页面

import 'package:flutter/material.dart';
import 'package:flutter_shop/provide/counter.dart';
import 'package:provide/provide.dart';
import '../provide/counter.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: Provide<Counter>(
        builder: (context,child,counter){
          return Text(
            '${counter.value}',
            style: Theme.of(context).textTheme.display1,
          );
        },
      ),
    );
  }
}


class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        Provide.value<Counter>(context).increment();
      },
      child: Text('递增'),
    );
  }
}