Flutter 使用provider进行全局状态管理

1. 导入provider

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  provider: ^6.0.2

2. 创建一个provider

本篇创建一个AppProvider全局状态管理类，里面管理一个int类型的变量progress。

import 'package:flutter/material.dart';

class AppProvider extends ChangeNotifier {
  int? progress = 1;

  int? getProgress() {
    return progress;
  }

  void setProgress(int? progress) {
    this.progress = progress;
    notifyListeners();
  }
}

3. 在main.dart中注册

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_provider/provider/app_provider.dart';

void main() {
  runApp(
    MultiProvider(
      // 接受监听
      providers: [
        ChangeNotifierProvider.value(value: AppProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

4. 创建一个home_page.dart的页面 ，里面包含两个组件progress1和progress2，在两个组件中通过改变全局的progress值来显示组件

值得注意的是，在build里面获取全局状态的值，必须用watch。在initState中可以用read

home_page.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_provider/provider/app_provider.dart';
import 'package:test_provider/views/src/progress1.dart';
import 'package:test_provider/views/src/progress2.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text(
          "测试",
        )),
        body: Stack(
          children: [
            _createBottomView(),
          ],
        ));
  }

  _createBottomView() {
    var progress = context.watch<AppProvider>().getProgress();
    if (progress == 1) {
      return Progress1();
    } else {
      return Progress2();
    }
  }
}

progress1.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_provider/provider/app_provider.dart';

class Progress1 extends StatefulWidget {
  const Progress1({Key? key}) : super(key: key);

  @override
  State<Progress1> createState() => _Progress1State();
}

class _Progress1State extends State<Progress1> {
  @override
  Widget build(BuildContext context) {
    return Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Column(
          children: [
            const Text("这是步骤1"),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('前往下一步'),
              onPressed: () {
                var app = context.read<AppProvider>();
                app.setProgress(2);
              },
            )
          ],
        ));
  }
}

progress2.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../provider/app_provider.dart';

class Progress2 extends StatefulWidget {
  const Progress2({Key? key}) : super(key: key);

  @override
  State<Progress2> createState() => _Progress1State();
}

class _Progress1State extends State<Progress2> {
  @override
  Widget build(BuildContext context) {
    return Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Column(
          children: [
            const Text("这是步骤2"),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('退回第一步'),
              onPressed: () {
                var app = context.read<AppProvider>();
                app.setProgress(1);
              },
            )
          ],
        ));
  }
}