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