flutter之狀態管理provide的超簡單demo

業務流程圖

簡單的業務流程圖，若是有用過vuex，都是相似的東西，換湯不換藥

如何使用

一、引入provide依賴
二、新建狀態倉庫
三、觸發狀態改變
四、頁面引用創庫變量

● 引入provide依賴

● 新建狀態倉庫
在lib目錄下新建provide文件夾，在provide文件夾下新建創庫文件counter.dart

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{
    int value = 0;

    add(){
        value++;
        notifyListeners();        //通知引用該變量地方的改變值
    }
    subtract(){
        value--;
        notifyListeners();        //通知引用該變量地方的改變值
    }
}

●觸發狀態改變和頁面引用

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

void main(){
    //main函數裏面引用provide
    var counter = Counter();
    var providers =Providers();
    providers..provide(Provider<Counter>.value(counter));
    runApp(ProviderNode(child: MyApp(),providers: providers,));
}

class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return MaterialApp(
            title: "flutter provide",
            home: Scaffold(
                appBar: AppBar(
                    title: Text("flutter provide"),
                ),
                body: Container(
                    child:Column(
                        children: <Widget>[
                            GetProvideValue(),
                            AddButton(),
                            SubButton(),
                        ],
                    )
                ),
            ),
        );
    }
}
//獲取provide狀態裏面的值
class GetProvideValue extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return Container(
            child: Provide<Counter>(                        //在其餘頁面也是用一樣的方法能夠引用到provide裏面的參數
                    builder: (context,child,counter){
                        return Text(
                            "${counter.value}"
                        );
                    },
                ),
        );
    }
}
//改變provide狀態的值,調用provide裏面的方法
class AddButton extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return RaisedButton(
            onPressed: (){
                Provide.value<Counter>(context).add();
            },
            child: Text("增長"),
        );
    }
}
//改變provide狀態的值,調用provide裏面的方法
class SubButton extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return RaisedButton(
            onPressed: (){
                Provide.value<Counter>(context).subtract();
            },
             child: Text("減小"),
        );
    }
}

新建完項目，直接把上面2段代碼複製就能夠運行了