flutter Provide 狀態管理篇

Provide是Google官方推出的狀態管理模式。官方地址為：

https://github.com/google/flutter-provide

 

現在Flutter的狀態管理方案很多，redux、bloc、state、Provide。

• Scoped Model : 最早的狀態管理方案，我剛學Flutter的時候就使用的這個，雖然還有公司在用，但是大部分已經選用其它方案了。

• Redux：現在國內用的最多，因為咸魚團隊一直在用，還出了自己fish redux。阿里宣布開源Flutter應用框架Fish Redux！

• bloc：比Redux簡單，而且好用，特別是一個頁面里的狀態管理。

• state：缺點是耦合太強，如果是大型應用，管理起來非常混亂。

• Provide：是在Google的Github下的一個項目，剛出現不久，所以可以推測他是Google的親兒子。

步驟：

1. 添加依賴

2. 創建狀態管理dart文件

import 'package:flutter/material.dart';

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

3. 將狀態放入頂層

void main() {
  var counter =Counter();
  var providers = Providers();

  //將counter對象添加進providers
  providers..provide(Provider<Counter>.value(counter));

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

Provider<Counter>.value將counter包裝成了_ValueProvider。並在它的內部提供了StreamController從而實現對數據進行流式操作。

4. 獲取狀態

　　同樣的Provide也提供了兩種獲取State的方法。我們先來介紹第一種，通過Provide小部件獲取。

class Number extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 200.0),
      child: Provide<Counter>(
        builder: (context, child,counter) {
          return Text('${counter.value}',style: TextStyle(fontSize: 30.0),);
        },
      )
    );
  }
}

builder方法接收三個參數

• 第一個參數context：代表上下文。
• 第二個參數child：假如這個小部件足夠復雜，內部有一些小部件是不會改變的，那么我們可以將這部分小部件寫在Provide的child屬性中，讓builder不再重復創建這些小部件，以提升性能。
• 第三個參數counter：這個參數代表了我們獲取的頂層providers中的狀態。

第二種獲取方式：Provide.value<T>(context)

final currentCounter = Provide.value<Counter>(context);

5. 修改狀態

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

 

獲取數據流

可參考　　https://juejin.im/post/5c6d4b52f265da2dc675b407