Flutter状态管理之-provide

1.在pubspec.yaml文件中引入provide库

2.新建状态仓库

  • 在lib目录下新建provide文件件,在该文件夹下新建counter.dart文件

3.在需要使用的文件中,先引入头文件,再定义使用

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

void main() {
  var counter = Counter();
  var proviters = Providers();
  proviters..provide(Provider<Counter>.value(counter));

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      routes: {
        'memberRouter': (BuildContext context) => new MemberInfo(),
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text('测试demo'),
          leading: IconButton(
            icon: Icon(Icons.add_a_photo),
            onPressed: () {
              Navigator.pushNamed(context, 'memberRouter');
            },
          ),
        ),
        body: Center(
          child: Column(
            children: <Widget>[Number(), MyButton(), MyButton2()],
          ),
        ),
      ),
    );
  }
}

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: TextStyle(color: Colors.pink, fontSize: 20.0),
          );
        },
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('点击增加'),
        onPressed: () {
          Provide.value<Counter>(context).increament();
        },
      ),
    );
  }
}

class MyButton2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('递增2'),
        onPressed: () {
          Navigator.pushNamed(context, 'memberRouter');
        },
      ),
    );
  }
}

显示结果:

posted @ 2021-08-02 14:41  技术宅_布丁  阅读(312)  评论(0)    收藏  举报