类关系

Provider常用的类有：

  • Provider
  • ListenableProvider
  • ChangeNotifierProvider
  • ValueListenableProvider
  • StreamProvider
  • FutureProvider
  • MultiProvider
  • ProxyProvider
  • ChangeNotifierProxyProvider

我们阅读源码，绘出下面的UML类关系图，读者朋友们如果看不清楚，可以尝试将放大下浏览器视图百分比。

Provider用法一览 - 图1

例子

看到这么多类，我们就疯掉了：什么情况下用什么类？

以下内容理解来自于博客：https://medium.com/flutter-community/making-sense-all-of-those-flutter-providers-e842e18f45dd，这篇文章对于初次了解Provider的学习者来说，非常容易入门，强烈推荐读者阅读。

1. 建立项目

setup.png
我们先建立项目，演示很简单，有两个Container，左边Container中有个按钮 Do something ，右边Container中有个文本，目前是 Show something 。后面将演示，点击左边按钮，右边文本同步发生变化的同步机制。

先看下初始的代码。

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       home: Scaffold(
  10.         appBar: AppBar(title: Text('My App')),
  11.         body: Row(
  12.           mainAxisAlignment: MainAxisAlignment.center,
  13.           children: <Widget>[
  15.             Container(
  16.               padding: const EdgeInsets.all(20),
  17.               color: Colors.green[200],
  18.               child: RaisedButton(
  19.                 child: Text('Do something'),
  20.                 onPressed: () {},
  21.               ),
  22.             ),
  24.             Container(
  25.               padding: const EdgeInsets.all(35),
  26.               color: Colors.blue[200],
  27.               child: Text('Show something'),
  28.             ),
  30.           ],
  31.         ),
  32.       ),
  33.     );
  34.   }
  35. }

2. 引入Provider

在 pubspec.yaml 文件中引入 Provider 库：

  1. dependencies:
  2.   provider: ^4.0.1

类中使用 Provider 的时候，引入类：

  1. import 'package:provider/provider.dart';

3. 使用Provider

Provider 顾名思义，是一个提供者，或者说提供器，它可以在 widget 树的任何地方提供一个 value ，通常是一个数据 model 。然而，这个基本的 Provider 在 value 发生变化的时候并不会更新 widget 树。

我们定义一个基本的 model ：

  1. class MyModel { 
  2.   String someValue = 'Hello';
  3.   void doSomething() {
  4.     someValue = 'Goodbye';
  5.     print(someValue);
  6.   }
  7. }

model 定义好了，如何使用 Provider 来将它提供出去呢？

1）在 wiget 树的某处（这里demo中选择了最顶层），使用 Provider ， Provider 内部有个 create 函数，这里我们返回 MyModel 实例。
2）在需要使用 MyModel 实例的 widget 中，使用 Consumer 进行包裹一层， Consumer 为消费者的含义，意思是表达对 MyModel 实例的关注以及消费使用。

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return Provider<MyModel>( //                                <--- Provider
  10.       create: (context) => MyModel(),
  11.       child: MaterialApp(
  12.         home: Scaffold(
  13.           appBar: AppBar(title: Text('My App')),
  14.           body: Row(
  15.             mainAxisAlignment: MainAxisAlignment.center,
  16.             children: <Widget>[
  18.               Container(
  19.                 padding: const EdgeInsets.all(20),
  20.                 color: Colors.green[200],
  21.                 child: Consumer<MyModel>( //                    <--- Consumer
  22.                   builder: (context, myModel, child) {
  23.                     return RaisedButton(
  24.                       child: Text('Do something'),
  25.                       onPressed: (){
  26.                         // We have access to the model.
  27.                         myModel.doSomething();
  28.                       },
  29.                     );
  30.                   },
  31.                 )
  32.               ),
  34.               Container(
  35.                 padding: const EdgeInsets.all(35),
  36.                 color: Colors.blue[200],
  37.                 child: Consumer<MyModel>( //                    <--- Consumer
  38.                   builder: (context, myModel, child) {
  39.                     return Text(myModel.someValue);
  40.                   },
  41.                 ),
  42.               ),
  44.             ],
  45.           ),
  46.         ),
  47.       ),
  48.     );
  49.   }
  50. }
  52. class MyModel { //                                               <--- MyModel
  53.   String someValue = 'Hello';
  54.   void doSomething() {
  55.     someValue = 'Goodbye';
  56.     print(someValue);
  57.   }
  58. }

运行一下：
provider.png

:::info

  • 右侧文本”Hello”来自MyModel的someValue
  • 点击左侧按钮将会执行model的doSomething方法。doSomething虽然改变了model的someValue值，但是右侧文本并不会发生变化，因为Provider widget并没有监听它提供的值的变化。 :::

    4. 使用ChangeNotifierProvider

和 Provider widget不同，ChangeNotifierProvider会监听模型的变化。当模型发生变化时， Consumer 下的 widgets 都会被重建。

下面代码中，我们把 Provider 修改成了ChangeNotifierProvider。 MyModel 类需要继承 ChangeNotifier 或者使用 mixin 。这样我们就可以在模型发生变化的时候调用 notifyListeners() ，然后 ChangeNotifierProvider 就会被通知到然后 Consumer 的 widgets 就会被重建。

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return ChangeNotifierProvider<MyModel>( //      <--- ChangeNotifierProvider
  10.       create: (context) => MyModel(),
  11.       child: MaterialApp(
  12.         home: Scaffold(
  13.           appBar: AppBar(title: Text('My App')),
  14.           body: Row(
  15.             mainAxisAlignment: MainAxisAlignment.center,
  16.             children: <Widget>[
  18.               Container(
  19.                   padding: const EdgeInsets.all(20),
  20.                   color: Colors.green[200],
  21.                   child: Consumer<MyModel>( //                  <--- Consumer
  22.                     builder: (context, myModel, child) {
  23.                       return RaisedButton(
  24.                         child: Text('Do something'),
  25.                         onPressed: (){
  26.                           myModel.doSomething();
  27.                         },
  28.                       );
  29.                     },
  30.                   )
  31.               ),
  33.               Container(
  34.                 padding: const EdgeInsets.all(35),
  35.                 color: Colors.blue[200],
  36.                 child: Consumer<MyModel>( //                    <--- Consumer
  37.                   builder: (context, myModel, child) {
  38.                     return Text(myModel.someValue);
  39.                   },
  40.                 ),
  41.               ),
  43.             ],
  44.           ),
  45.         ),
  46.       ),
  47.     );
  48.   }
  49. }
  51. class MyModel with ChangeNotifier { //                          <--- MyModel
  52.   String someValue = 'Hello';
  54.   void doSomething() {
  55.     someValue = 'Goodbye';
  56.     print(someValue);
  57.     notifyListeners();
  58.   }
  59. }

ChangeNotifierProvider.gif

:::info

  • 我们看下上面的代码，可以发现按钮的点击事件因为用了MyModel实例的doSomething方法，也作为了Consumer使用。但MyModel模型发生变化的时候，按钮是没有必要更新的。所以可以使用 Provider.of，并且设置listener为false。这样当模型变化时按钮就不会重建。下面是如何使用Provider.of。 :::
    1. class MyButton extends StatelessWidget {
    2. @override
    3. Widget build(BuildContext context) {
    4.   final myModel = Provider.of<MyModel>(context, listen: false);
    5.   return RaisedButton(
    6.     child: Text('Do something'),
    7.     onPressed: () {
    8.       myModel.doSomething();
    9.     },
    10.   );
    11. }
    12. }

    5. 使用FutureProvider

FutureProvider 是对 FutureBuilder widget的封装。我们可以提供给一些初始化数据来展示UI，并且可以提供一个Future对象。 FutureProvider 监听到Future完成后，便通知 Consumers widgets进行重建。

下面代码展示了右侧文本初始以 ‘default value’ 展现，然后3秒后Future完成，返回’new data’展示。

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return FutureProvider<MyModel>( //                      <--- FutureProvider
  10.       initialData: MyModel(someValue: 'default value'),
  11.       create: (context) => someAsyncFunctionToGetMyModel(),
  12.       child: MaterialApp(
  13.         home: Scaffold(
  14.           appBar: AppBar(title: Text('My App')),
  15.           body: Row(
  16.             mainAxisAlignment: MainAxisAlignment.center,
  17.             children: <Widget>[
  19.               Container(
  20.                 padding: const EdgeInsets.all(20),
  21.                 color: Colors.green[200],
  22.                 child: Consumer<MyModel>( //                    <--- Consumer
  23.                   builder: (context, myModel, child) {
  24.                     return RaisedButton(
  25.                       child: Text('Do something'),
  26.                       onPressed: (){
  27.                         myModel.doSomething();
  28.                       },
  29.                     );
  30.                   },
  31.                 )
  32.               ),
  34.               Container(
  35.                 padding: const EdgeInsets.all(35),
  36.                 color: Colors.blue[200],
  37.                 child: Consumer<MyModel>( //                    <--- Consumer
  38.                   builder: (context, myModel, child) {
  39.                     return Text(myModel.someValue);
  40.                   },
  41.                 ),
  42.               ),
  44.             ],
  45.           ),
  46.         ),
  47.       ),
  48.     );
  50.   }
  51. }
  53. Future<MyModel> someAsyncFunctionToGetMyModel() async { //  <--- async function
  54.   await Future.delayed(Duration(seconds: 3));
  55.   return MyModel(someValue: 'new data');
  56. }
  58. class MyModel { //                                               <--- MyModel
  59.   MyModel({this.someValue});
  60.   String someValue = 'Hello';
  61.   Future<void> doSomething() async {
  62.     await Future.delayed(Duration(seconds: 2));
  63.     someValue = 'Goodbye';
  64.     print(someValue);
  65.   }
  66. }

FutureProvider.gif

6. 使用StreamProvider

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return StreamProvider<MyModel>( //                       <--- StreamProvider
  10.       initialData: MyModel(someValue: 'default value'),
  11.       create: (context) => getStreamOfMyModel(),
  12.       child: MaterialApp(
  13.         home: Scaffold(
  14.           appBar: AppBar(title: Text('My App')),
  15.           body: Row(
  16.             mainAxisAlignment: MainAxisAlignment.center,
  17.             children: <Widget>[
  19.               Container(
  20.                 padding: const EdgeInsets.all(20),
  21.                 color: Colors.green[200],
  22.                 child: Consumer<MyModel>( //                    <--- Consumer
  23.                   builder: (context, myModel, child) {
  24.                     return RaisedButton(
  25.                       child: Text('Do something'),
  26.                       onPressed: (){
  27.                         myModel.doSomething();
  28.                       },
  29.                     );
  30.                   },
  31.                 )
  32.               ),
  34.               Container(
  35.                 padding: const EdgeInsets.all(35),
  36.                 color: Colors.blue[200],
  37.                 child: Consumer<MyModel>( //                    <--- Consumer
  38.                   builder: (context, myModel, child) {
  39.                     return Text(myModel.someValue);
  40.                   },
  41.                 ),
  42.               ),
  44.             ],
  45.           ),
  46.         ),
  47.       ),
  48.     );
  50.   }
  51. }
  53. Stream<MyModel> getStreamOfMyModel() { //                        <--- Stream
  54.   return Stream<MyModel>.periodic(Duration(seconds: 1),
  55.           (x) => MyModel(someValue: '$x'))
  56.       .take(10);
  57. }
  59. class MyModel { //                                               <--- MyModel
  60.   MyModel({this.someValue});
  61.   String someValue = 'Hello';
  62.   void doSomething() {
  63.     someValue = 'Goodbye';
  64.     print(someValue);
  65.   }
  66. }

StreamProvider.gif

7. 使用ValueListenableProvider

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return Provider<MyModel>(//                              <--- Provider
  10.       create: (context) => MyModel(),
  11.       child: Consumer<MyModel>( //                           <--- MyModel Consumer
  12.           builder: (context, myModel, child) {
  13.             return ValueListenableProvider<String>.value( // <--- ValueListenableProvider
  14.               value: myModel.someValue,
  15.               child: MaterialApp(
  16.                 home: Scaffold(
  17.                   appBar: AppBar(title: Text('My App')),
  18.                   body: Row(
  19.                     mainAxisAlignment: MainAxisAlignment.center,
  20.                     children: <Widget>[
  22.                       Container(
  23.                           padding: const EdgeInsets.all(20),
  24.                           color: Colors.green[200],
  25.                           child: Consumer<MyModel>( //       <--- Consumer
  26.                             builder: (context, myModel, child) {
  27.                               return RaisedButton(
  28.                                 child: Text('Do something'),
  29.                                 onPressed: (){
  30.                                   myModel.doSomething();
  31.                                 },
  32.                               );
  33.                             },
  34.                           )
  35.                       ),
  37.                       Container(
  38.                         padding: const EdgeInsets.all(35),
  39.                         color: Colors.blue[200],
  40.                         child: Consumer<String>(//           <--- String Consumer
  41.                           builder: (context, myValue, child) {
  42.                             return Text(myValue);
  43.                           },
  44.                         ),
  45.                       ),
  47.                     ],
  48.                   ),
  49.                 ),
  50.               ),
  51.             );
  52.           }),
  53.     );
  54.   }
  55. }
  57. class MyModel { //                                             <--- MyModel
  58.   ValueNotifier<String> someValue = ValueNotifier('Hello'); // <--- ValueNotifier
  59.   void doSomething() {
  60.     someValue.value = 'Goodbye';
  61.     print(someValue.value);
  62.   }
  63. }

ValueListenableProvider.gif

:::info

  • 点击’Do something’按钮因为ValueListenableProvider的作用会将”Hello”修改为”Goodbye”。
  • 使用Provider.of<MyModel>(context, listen: false)比在widget树上层使用Consumer更好，不然每次都要重建整个树。
  • 这个例子中，在widget树顶层使用Consumer并不是一个很好的做法，只是方便演示。 :::

    8. 使用ListenableProvider

    没有太好的使用场景。

    9. 使用MultiProvider

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MultiProvider( //                                     <--- MultiProvider
  10.       providers: [
  11.         ChangeNotifierProvider<MyModel>(create: (context) => MyModel()),
  12.         ChangeNotifierProvider<AnotherModel>(create: (context) => AnotherModel()),
  13.       ],
  14.       child: MaterialApp(
  15.         home: Scaffold(
  16.           appBar: AppBar(title: Text('My App')),
  17.           body: Column(
  18.             children: <Widget>[
  19.               Row(
  20.                 mainAxisAlignment: MainAxisAlignment.center,
  21.                 children: <Widget>[
  23.                   Container(
  24.                       padding: const EdgeInsets.all(20),
  25.                       color: Colors.green[200],
  26.                       child: Consumer<MyModel>( //            <--- MyModel Consumer
  27.                         builder: (context, myModel, child) {
  28.                           return RaisedButton(
  29.                             child: Text('Do something'),
  30.                             onPressed: (){
  31.                               // We have access to the model.
  32.                               myModel.doSomething();
  33.                             },
  34.                           );
  35.                         },
  36.                       )
  37.                   ),
  39.                   Container(
  40.                     padding: const EdgeInsets.all(35),
  41.                     color: Colors.blue[200],
  42.                     child: Consumer<MyModel>( //              <--- MyModel Consumer
  43.                       builder: (context, myModel, child) {
  44.                         return Text(myModel.someValue);
  45.                       },
  46.                     ),
  47.                   ),
  49.                 ],
  50.               ),
  52.              // SizedBox(height: 5),
  54.               Row(
  55.                 mainAxisAlignment: MainAxisAlignment.center,
  56.                 children: <Widget>[
  58.                   Container(
  59.                       padding: const EdgeInsets.all(20),
  60.                       color: Colors.red[200],
  61.                       child: Consumer<AnotherModel>( //      <--- AnotherModel Consumer
  62.                         builder: (context, myModel, child) {
  63.                           return RaisedButton(
  64.                             child: Text('Do something'),
  65.                             onPressed: (){
  66.                               myModel.doSomething();
  67.                             },
  68.                           );
  69.                         },
  70.                       )
  71.                   ),
  73.                   Container(
  74.                     padding: const EdgeInsets.all(35),
  75.                     color: Colors.yellow[200],
  76.                     child: Consumer<AnotherModel>( //        <--- AnotherModel Consumer
  77.                       builder: (context, anotherModel, child) {
  78.                         return Text('${anotherModel.someValue}');
  79.                       },
  80.                     ),
  81.                   ),
  83.                 ],
  84.               ),
  85.             ],
  86.           ),
  87.         ),
  88.       ),
  89.     );
  91.   }
  92. }
  94. class MyModel with ChangeNotifier { //                        <--- MyModel
  95.   String someValue = 'Hello';
  96.   void doSomething() {
  97.     someValue = 'Goodbye';
  98.     print(someValue);
  99.     notifyListeners();
  100.   }
  101. }
  103. class AnotherModel with ChangeNotifier { //                   <--- AnotherModel
  104.   int someValue = 0;
  105.   void doSomething() {
  106.     someValue = 5;
  107.     print(someValue);
  108.     notifyListeners();
  109.   }
  110. }

MultiProvider.gif

10. 使用ProxyProvider

  1. MultiProvider(
  2.   providers: [
  3.     ChangeNotifierProvider<MyModel>(
  4.       create: (context) => MyModel(),
  5.     ),
  6.     ProxyProvider<MyModel, AnotherModel>(
  7.       update: (context, myModel, anotherModel) => AnotherModel(myModel),
  8.     ),
  9.   ],
  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MultiProvider( //                              <--- MultiProvider
  10.       providers: [
  11.         ChangeNotifierProvider<MyModel>( //               <--- ChangeNotifierProvider
  12.           create: (context) => MyModel(),
  13.         ),
  14.         ProxyProvider<MyModel, AnotherModel>( //          <--- ProxyProvider
  15.           update: (context, myModel, anotherModel) => AnotherModel(myModel),
  16.         ),
  17.       ],
  18.       child: MaterialApp(
  19.         home: Scaffold(
  20.           appBar: AppBar(title: Text('My App')),
  21.           body: Column(
  22.             children: <Widget>[
  23.               Row(
  24.                 mainAxisAlignment: MainAxisAlignment.center,
  25.                 children: <Widget>[
  27.                   Container(
  28.                       padding: const EdgeInsets.all(20),
  29.                       color: Colors.green[200],
  30.                       child: Consumer<MyModel>( //          <--- MyModel Consumer
  31.                         builder: (context, myModel, child) {
  32.                           return RaisedButton(
  33.                             child: Text('Do something'),
  34.                             onPressed: (){
  35.                               myModel.doSomething('Goodbye');
  36.                             },
  37.                           );
  38.                         },
  39.                       )
  40.                   ),
  42.                   Container(
  43.                     padding: const EdgeInsets.all(35),
  44.                     color: Colors.blue[200],
  45.                     child: Consumer<MyModel>( //            <--- MyModel Consumer
  46.                       builder: (context, myModel, child) {
  47.                         return Text(myModel.someValue);
  48.                       },
  49.                     ),
  50.                   ),
  52.                 ],
  53.               ),
  55.               Container(
  56.                   padding: const EdgeInsets.all(20),
  57.                   color: Colors.red[200],
  58.                   child: Consumer<AnotherModel>( //          <--- AnotherModel Consumer
  59.                     builder: (context, anotherModel, child) {
  60.                       return RaisedButton(
  61.                         child: Text('Do something else'),
  62.                         onPressed: (){
  63.                           anotherModel.doSomethingElse();
  64.                         },
  65.                       );
  66.                     },
  67.                   )
  68.               ),
  70.             ],
  71.           ),
  72.         ),
  73.       ),
  74.     );
  76.   }
  77. }
  79. class MyModel with ChangeNotifier { //                       <--- MyModel
  80.   String someValue = 'Hello';
  81.   void doSomething(String value) {
  82.     someValue = value;
  83.     print(someValue);
  84.     notifyListeners();
  85.   }
  86. }
  88. class AnotherModel { //                                      <--- AnotherModel
  89.   MyModel _myModel;
  90.   AnotherModel(this._myModel);
  91.   void doSomethingElse() {
  92.     _myModel.doSomething('See you later');
  93.     print('doing something else');
  94.   }
  95. }

ProxyProvider.gif

11. Provider builder函数和值构造函数

在前面的例子中， Provider 的model使用的是 create 创建函数来创建返回的

  1. Provider<MyModel>(
  2.   create: (context) => MyModel(),
  3.   child: ...
  4. )

如果我们用已存在的对象值呢？

使用value来引用：

  1. final myModel = MyModel();
  2. ...
  3. Provider<MyModel>.value(
  4.     value: myModel, 
  5.     child: ...
  6. )

参考学习资料