记录Flutter中如何使用状态管理Provider

操作步骤

1.下载provider插件

flutter pub add provider

2.创建一个保存和操作状态的文件 provider.dart

import 'package:flutter/cupertino.dart'; // 要使用 ChangeNotifier 和 notifyListeners需要导入这个包
import 'dart:math'; // 因为我用到了随机函数 所以需要导入这个包

class CounterProvider extends ChangeNotifier {
  Map<String, dynamic> userInfo = {'name': 'jianjian', 'age': 11, 'sex': '男'};

  void changeName() {
    userInfo['name'] = 'xiaojian${Random().nextInt(10)}';
    notifyListeners(); // 通知用到这个provider的widget更新ui
  }
}

3.在项目入口函数中引入

import 'package:provider/provider.dart';
import 'package:my_app/provide.dart'; // 引入我们创建的provider

void main() {
  runApp(MultiProvider(
    providers: [ChangeNotifierProvider(create: (context) => CounterProvider())],
    child: const MyApp(),
  ));
}

4.如何使用provider提供的数据?创建一个widget

import 'package:flutter/material.dart';
import 'package:my_app/provide.dart'; // 这里是引入我们第二步创建的provider 
import 'package:provider/provider.dart'; // 这个是我们下载的provider包

class ProvideWidget extends StatelessWidget {
  const ProvideWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('状态管理'),
        centerTitle: true,
      ),
      body: Column(children: [
        // 使用第二步我们保存的userInfo数据
        Text('${context.watch<CounterProvider>().userInfo}'),
        ElevatedButton(
            onPressed: () {
              // 修改第二步我们保存的userInfo数据
              context.read<CounterProvider>().changeName();
            },
            child: const Text('修改名字'))
      ]),
    );
  }
}