Flutter 使用provider進(jìn)行全局狀態(tài)管理

1. 導(dǎo)入provider

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  provider: ^6.0.2

2. 創(chuàng)建一個provider

本篇創(chuàng)建一個AppProvider全局狀態(tài)管理類，里面管理一個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(
      // 接受監(jiān)聽
      providers: [
        ChangeNotifierProvider.value(value: AppProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

4. 創(chuàng)建一個home_page.dart的頁面 ，里面包含兩個組件progress1和progress2，在兩個組件中通過改變?nèi)值膒rogress值來顯示組件

值得注意的是，在build里面獲取全局狀態(tài)的值，必須用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);
              },
            )
          ],
        ));
  }
}