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來進行管理狀態。