Flutter狀態管理 DEMO

Flutter狀態管理
ScopedModel 垃圾
Redux 鹹魚的 太大
bloc 也還行
StatefulWidget 耦合度高
Provide 谷歌親兒子

DEMO

1.添加依賴
provide: ^1.0.2 #狀態管理依賴

2.創建數據倉庫counter.dart

class Counter with ChangeNotifier{//ChangeNotifier:實現可監聽的簡便方法
  int value = 0;
  ///相加的方法
  increment(){
    value++;
    ///可以通知我們的聽衆 值改變了 局部刷新widget
    notifyListeners();
  }
}

3.app頂層的設置main.dart

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

4.頁面中使用
-讀

class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Provide<Counter>(
        builder: (context,child,counter){
          return Text("${counter.value}");
        },
      )
    );
  }
}

-寫

class Button extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: RaisedButton(
          child: Text("遞增"),
          onPressed: () {
            print("點擊了按鈕");
            Provide.value<Counter>(context).increment();
          },
        ));
  }
}