flutter之状态管理provide的超简单demo_flutter

上一篇: 写在Flutter 1.0之前下一篇:flutter中的异步

flutter之状态管理provide的超简单demo

发布时间：2019-07-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了flutter之状态管理provide的超简单demo，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

业务流程图
简单的业务流程图，如果有用过vuex，都是类似的东西，换汤不换药

如何使用
1、引入PRovide依赖
2、新建状态仓库
3、触发状态改变
4、页面引用创库变量
● 引入provide依赖

● 新建状态仓库
在lib目录下新建provide文件夹，在Provide文件夹下新建创库文件counter.dart


      
      
      
      
      
import 'package:flutter/MATErial.dart';

class Counter wITh ChangeNotifier{
    int value = 0;

    add(){
        value++;
        notifyListeners();        //通知引用该变量地方的改变值
    }
    suBTract(){
        value--;
        notifyListeners();        //通知引用该变量地方的改变值
    }
}
●触发状态改变和页面引用

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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.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: [
                            GetProvideValue(),
                            AddButton(),
                            SubButton(),
                        ],
                    )
                ),
            ),
        );
    }
}
//获取provide状态里面的值
class GetProvideValue extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return Container(
            child: Provide(                        //在其他页面也是用同样的方法可以引用到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(context).add();
            },
            child: Text("增加"),
        );
    }
}
//改变provide状态的值,调用provide里面的方法
class SubButton extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return RaisedButton(
            onPressed: (){
                Provide.value(context).subtract();
            },
             child: Text("减少"),
        );
    }
}" title="" data-original-title="复制">
      
      
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段代码复制就可以运行了