Flutter学习笔记 使用Provide实现状态管理

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_42215775/article/details/101478589

首先添加插件：

dependencies:
  provide: ^1.0.2

例子：
首先新建了一个provide包，里面新建了一个counter.dart文件
内容：

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{
  int value = 0;

  increment(){
    value++;
    //通知
    notifyListeners();
  }
}

然后修改main.dart

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

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

新建了两个界面
页面一：

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

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Number(),
            MyButton(),
            Button2(),
          ],
        ),
      ),
    );
  }
}

class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.only(top: 200.0),
      child: Provide<Counter>(
        builder: (context, child, counter) {
          return Text(
            '${counter.value}',
            style: TextStyle(
              fontSize: 30,
            ),
          );
        },
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      onPressed: () {
        Provide.value<Counter>(context).increment();
      },
      child: Text('递增'),
    );
  }
}

class Button2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(onPressed: () {
      Navigator.of(context).pushNamed('/test2');
    },
    child: Text('第二个页面'),);
  }
}

页面2:

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

class B extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return BState();
  }
}

class BState extends State<B>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child:Provide<Counter>(
          builder: (context, child, counter) {
            return Text(
              '${counter.value}',
              style: TextStyle(
                fontSize: 30,
              ),
            );
          },
        ),
      ),
    );
  }
}

会发现虽然是statelesswidget，但还是可以通过Provide来实现全局的状态管理
当点击页面一递增数据后，点击跳转到页面二，会发现状态同时发生了改变