Flutter高级第5篇：官方推荐的状态管理库 provider 的使用

一丶 状态管理

通俗的讲：当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组
件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以用 Flutter 中的状
态管理来管理统一的状态（数据），实现不同组件直接的传值和数据共享。
现在 Flutter 的状态管理方案很多，redux、bloc、state、provide、provider。
目前我们推荐使用 provider，这个是官方提供的状态管理解决方案。相比其他状态管理库使
用起来比较方便。

二、 关于 于flutter provider 库和 和 flutter provide 库

provider 是 Flutter 团队推出的状态管理模式。
官方地址为： https://pub.dev/packages/provider
注意：p rovider 和 provide 是两个库哦。Flutter 官方推荐使用的是 provider 哦，provider 是
flutter 官方出的。provide 不是 Flutter 官方写的哦

三丶 flutter provider 的使用

1、配置依赖 provider: ^3.0.0+1
2、新建一个文件夹叫 provider，在 provider 文件夹里面放我们对于的状态管理类
3、在 provider 里面新建 Counter.dart
4、Counter.dart 里面新建一个类继承 minxins 的 ChangeNotifier 代码如下

import 'package:flutter/material.dart';
class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}

5、找到 main.dart 修改代码如下

import 'package:flutter/material.dart';
import 'routers/router.dart';
import 'package:provider/provider.dart';
import 'provider/Counter.dart';
void main() =>runApp(MyApp());
// void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
// Provider<Counter>.value(value: foo),
        ChangeNotifierProvider(builder: (_) => Counter()),
      ],
      child: MaterialApp(
// home: Tabs(),
        debugShowCheckedModeBanner: false,
        initialRoute: '/productContent',
        onGenerateRoute: onGenerateRoute,
        theme: ThemeData(
// primaryColor: Colors.yellow
            primaryColor: Colors.white),
      ),
    );
  }
}

6、获取值、以及设置值

import 'package:provider/provider.dart';
import '../../provider/Counter.dart';
Widget build(BuildContext context) {
  final counter = Provider.of<Counter>(context);
// counter.init();
  return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          counter.increment();
        },
      ),
      body: Text("counter 的值:${counter.count}")
  );
}