flutter 专题二 Flutter状态管理之Riverpod 0.8.4

一 、flutter 有哪些状态管理方式

Flutter的状态管理方式有很多，Redux、 Bloc、 MobX、Provider等等。单单一个Provider，我也见到了各种组合，例如ChangeNotifier + Provider / StateNotifier + Provider（ + freezed）。各种方式各有千秋，我们根据自己的习惯和项目的情况去选择就好，这里不做讨论；

二 、Riverpod 介绍

Riverpod和Provider师出同门，都来自作者Remi，Riverpod可以被认为是Provider的重写，来实现原本不可能的功能。就像它的名字一样，字母与Provider相同，但是又不相同。

你可以理解Riverpod是Provider的升级版，解决了Provider的一些痛点：

Provider是InheritedWidget的封装，所以在读取状态时需要BuildContext。这导致了许多的限制，许多新手在不理解InheritedWidget和BuildContext时，跨页面获取状态经常会ProviderNotFoundException。而Riverpod不再依赖Flutter，也就是没有使用InheritedWidget，所以也不需要BuildContext。

读取对象是编译安全的。没有那么多的运行时异常。

能够有多个相同类型的provider。

provider可以是私有的。

当不再使用provider的状态时，将其自动回收。

当然目前Riverpod也有一些不足（0.14.0+3版本）：

• 毕竟诞生不久，它还不能保证是完全稳定的。
• 可能后期会有API的破坏性改动。（比如在0.7.0就有不少Breaking，导致我之前写的部分示例内容就报错了。）
• 目前生产环境中使用需要谨慎。

三、Riverpod的三种使用方式

Riverpod 提供了三种使用方式，如下图，可以根据自己的实际项目选择适合自己的方式

本篇不引入flutter_hooks相关内容，这里我就选择flutter_riverpod 。那么将它添加到pubspec.yaml中

flutter_riverpod: ^0.14.0+3

四 、flutter 基础使用

Provider

这里使用Riverpod的Provider需要三步就可以。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';// 1.创建一个全局的provider，里面储存“Hello World!”
final Provider<String> helloWorldProvider = Provider((_) => 'Hello World!');void main() {runApp(// 2.添加“ProviderScope”。所有使用Riverpod的Flutter程序都必须// 在widget tree的根部添加它，用来储存各个provider。ProviderScope(child: MyApp(),),);
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Riverpod Example',theme: ThemeData(primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: ProviderExample(),);}
}// 3.使用“ConsumerWidget”，在“build”中获取对应的provider
class ProviderExample extends ConsumerWidget {@overrideWidget build(BuildContext context, ScopedReader watch) {final String value = watch(helloWorldProvider);return Scaffold(appBar: AppBar(title: Text('Provider Example')),body: Center(child: Text(value),),);}
}

这里储存“Hello World!” 使用的是Provider，它提供一个永远不变的对象。不过大部分场景下状态都是可变的，下面用计数器来举例。

StateProvider

在“Hello World”的基础上，做两点修改即可。

1. 定义一个全局常量StateProvider。

final StateProvider<int> counterProvider = StateProvider((_) => 0);

2、 

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';class StateProviderExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('StateProvider Example'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Consumer(builder: (context, watch, _) {/// 使用Consumer(ConsumerWidget的封装)，控制刷新的范围。int count = watch(counterProvider).state;return Text('$count',style: Theme.of(context).textTheme.headline4,);},),],),),floatingActionButton: FloatingActionButton(/// 使用read获取counterProvider，操作state。onPressed: () => context.read(counterProvider).state++,tooltip: 'Increment',child: Icon(Icons.add),),);}}

如果你的状态比较复杂可以使用ChangeNotifierProvider，如果习惯使用StateNotifier，可以使用StateNotifierProvider 。其实StateProvider的内部是StateController，也还是StateNotifier。源码如下；

class StateProvider<T>extends AlwaysAliveProviderBase<StateController<T>, StateController<T>> {StateProvider(Create<T, ProviderReference> create, {String name,}) : super((ref) => StateController(create(ref)), name);...
}class StateController<T> extends StateNotifier<T> {StateController(T state) : super(state);@overrideT get state => super.state;@overrideset state(T value) => super.state = value;
}

StateNotifierProvider的用法与StateProvider基本一致，这里就不贴出来了，有兴趣的可以点击这里查看。

2021-04-19更新：

0.14.0对StateNotifierProvider的语法有破坏性变化，避免了StateNotifierProvider的错误使用。具体见文档。

ChangeNotifierProvider
这部分没啥说的，注意ChangeNotifier与StateNotifier的区别，需要自己调用notifyListeners通知变更。

final ChangeNotifierProvider<Counter> _counterProvider = ChangeNotifierProvider((_) => Counter());class Counter extends ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}void decrement(){_count--;notifyListeners();}
}class ChangeProviderNotifierExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('ChangeNotifierProvider Example'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Consumer(builder: (context, watch, _) {int count = watch(_counterProvider).count;return Text('$count',style: Theme.of(context).textTheme.headline4,);},),],),),floatingActionButton: FloatingActionButton(/// 使用read获取counterProvider。onPressed: () => context.read(_counterProvider).increment(),tooltip: 'Increment',child: Icon(Icons.add),),);}
}

FutureProvider

final FutureProvider<String> futureProvider = FutureProvider((_) async {/// 延时3sawait Future.delayed(const Duration(seconds: 3));return 'Riverpod';
});class FutureProviderExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('FutureProvider Example'),),body: Center(child: Consumer(builder: (context, watch, _) {AsyncValue<String> futureProviderValue = watch(futureProvider);/// 根据相应状态展示return futureProviderValue.when(loading: () => CircularProgressIndicator(),error: (error, stack) => Text('Oops, something unexpected happened'),data: (value) => Text('Hello $value',style: Theme.of(context).textTheme.headline4,),);},),),);}
}

作者也提供了StreamProvider。用法大同小异，有兴趣的可以查看我的示例代码。

ProviderListener
如果你希望在Widget Tree上监听provider的状态变化，可以使用ProviderListener。用上面的计数器例子，当计数器为5时，触发监听。

ProviderListener<StateController<int>>(provider: counterProvider,onChange: (_, counter) {if (counter.state == 5) {print('当前计数器为5，触发监听。');}},child: Consumer(builder: (context, watch, _) {int count = watch(counterProvider).state;return Text('$count',style: Theme.of(context).textTheme.headline4,);},),
),

ScopeProvider

一般我们在实现一个列表的Item时，需要传入相应的index大致如下：

ListView.builder(itemCount: 50,itemBuilder: (context, index) {return ProductItem(index: index);},
)

如果使用ScopedProvider并结合 ProviderScope，就可以简单的获取index，不必从构造方法接收它。使用起来很简单，直接上代码：

/// 定义ScopedProvider
final ScopedProvider<int> currentProductIndex = ScopedProvider<int>(null);class ScopeProviderExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('ScopedProvider'),),body: ListView.builder(itemCount: 50,itemBuilder: (context, index) {return ProviderScope(overrides: [/// 修改valuecurrentProductIndex.overrideWithValue(index),],/// 使用'const'关键字实例化了“ProductItem”，/// 但仍然可以在内部动态获取内容。child: const ProductItem(),);},),);}
}class ProductItem extends ConsumerWidget {const ProductItem({Key key}): super(key: key);@overrideWidget build(BuildContext context, ScopedReader watch) {/// 获取相应indexfinal index = watch(currentProductIndex);return ListTile(title: Text('item $index'));}
}

4.修饰符

family

family的作用是可以在获取provider时可以添加一个参数。直接上例子，一看便知：

/// 使用family，可以在获取provider时传入city
final _weatherProvider = Provider.family<String, String>((ref, city) {return '$city (Sunny)';
});class FamilyExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Family')),body: Center(child: Consumer(builder: (context, watch, _) {/// 这里可以传参“London”final String weather = watch(_weatherProvider('London'));return Text('$weather',);},),),);}
}

意： 使用family时传入的参数是有限制的。比如bool 、 int 、 double 、 String 、常量或是重写了==和hashCode的不可变对象。

autoDispose
前面我们的例子中，创建的provider因为保存在Widget Tree的根部。所以即使页面关闭，再次进入页面时会获取之前的状态。

这显然是不灵活的，那么这里就可以使用autoDispose，它可以在我们不再使用provider时，自动将其销毁。那么合理的使用它可以避免内存泄漏。

比如之前的计数器例子，只需加一个autoDispose就可以避免此类问题。

final stateProvider = StateProvider.autoDispose((_) => 0);

如果你需要自定义dispose事件，可以使用onDispose。比如你的provider中有网络请求(使用Dio)：

final myProvider = FutureProvider.autoDispose((ref) async {final cancelToken = CancelToken();// 当provider被销毁时，取消http请求ref.onDispose(() => cancelToken.cancel());// http请求final response = await dio.get('path', cancelToken: cancelToken);// 如果请求成功完成，则保持该状态。ref.maintainState = true;return response;
});

上面代码中出现了ref.maintainState，这个参数默认为false。如果用户离开页面并且请求失败，下次则将再次执行该请求。但是，如果请求成功完成（maintainState为true），则将保留状态，下次重新进入页面时不会触发新的请求。

使用autoDispose可以达到限制provider是全局还是局部作用。这样一来，可以更方便的解决跨页面使用provider的问题。

5.进阶使用
Combining providers
1.如果创建的provider需要另一个provider的状态，这时就需要使用ProviderReference的read方法。

下面的示例是，给予城市和国家的provider，当创建locationProvider时，获取城市和国家的状态。

final Provider<String> cityProvider = Provider((ref) => 'London');
final Provider<String> countryProvider = Provider((ref) => 'England');
final Provider<Location> locationProvider = Provider((ref) => Location(ref));class Location {Location(this._ref);final ProviderReference _ref;String get label {/// read 获取final city = _ref.read(cityProvider);final country = _ref.read(countryProvider);return '$city ($country)';}
}

使用Riverpod就可以提供多个相同类型的Provider，这也是相比Provider的一个优点。

2.如果获取的状态值会发生变化，我们需要监听它。可以使用ProviderReference的watch方法。

下面的示例是，给予城市provider，当城市变化时，天气也相应变化。

final StateProvider<String> cityProvider = StateProvider((ref) => 'London');
final StateProvider<String> weatherProvider = StateProvider((ref) {/// watch监听final String city = ref.watch(cityProvider).state;return '$city (Sunny)';
});class CombiningProviderExample2 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('CombiningProvider')),body: Center(child: Consumer(builder: (context, watch, _) {final String weather = watch(weatherProvider).state;return Text('$weather',);},),),floatingActionButton: FloatingActionButton(onPressed: () {String city = context.read(cityProvider).state;/// 修改状态if (city == 'London') {context.read(cityProvider).state = "Xi'an";} else {context.read(cityProvider).state = 'London';}},tooltip: 'Refresh',child: Icon(Icons.refresh),),);}
}

refresh

强制provider立即刷新，重新返回创建的值。这种适合列表下拉刷新，或者请求数据错误时重试。

final FutureProvider<List<String>> productsProvider = FutureProvider((_) async {/// 延时3sawait Future.delayed(const Duration(seconds: 3));return List.generate(50, (index) => 'Item $index');
});class RefreshProviderExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('RefreshProvider'),),body: Center(child: Consumer(builder: (context, watch, _) {AsyncValue<List<String>> productsProviderValue = watch(productsProvider);return productsProviderValue.when(loading: () => CircularProgressIndicator(),error: (error, stack) => Text('Oops, something unexpected happened'),data: (list) => RefreshIndicator(onRefresh: () => context.refresh(productsProvider), /// 刷新child: ListView(children: [for (final item in list) ListTile(title: Text(item)),],),),);},),),);}
}

select
当状态中某一个值发生变化时，相应Consumer下的builder就会执行，重建widget。如果使用select可以指定某一值更改时进行刷新，精准控制刷新范围，避免不必要的rebuild。

不过目前（0.14.0+3版本），select这种局部监听只支持使用hooks_riverpod包的useProvider。所以这里需要引用hooks_riverpod。

final ChangeNotifierProvider<Person> personProvider = ChangeNotifierProvider((_) => Person());class Person extends ChangeNotifier {int _age = 0;int get age => _age;set age(int age) {_age = age;notifyListeners();}String _name = 'weilu';String get name => _name;set name(String name) {_name = name;notifyListeners();}
}class SelectExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Select Example'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[HookBuilder(builder: (_) {String name = useProvider(personProvider.select((p) => p.name));/// 如果使用下面的方式，则age变化时，这里的Text也会刷新。
//                String name = useProvider(personProvider).name;return Text('name:$name',);},),HookBuilder(builder: (_) {int age = useProvider(personProvider.select((p) => p.age));return Text('age:$age',);},),],),),floatingActionButton: FloatingActionButton(// 这里age变化时，只有对应的Text会变化。onPressed: () => context.read(personProvider).age = Random.secure().nextInt(255),tooltip: 'Refresh',child: Icon(Icons.refresh),),);}
}

其他
细心的你会发现，在使用read获取provider时还是使用了context。一开始不是说，没有使用InheritedWidget，所以也不需要BuildContext吗？

其实Riverpod本身确实如此，但是在Flutter的应用中，为了便于高效（时间复杂度O(1)）的在Widget Tree中获取ProviderContainer（在ProviderScope中隐式创建，用来储存provider），需要在根部使用InheritedWidget，便于最终获取provider。

read、refresh、Consumer、ProviderListener等方法和Widget的内部其实都调用了ProviderScope.containerOf(context, listen = xx);，不同的是listen的值。

static ProviderContainer containerOf(BuildContext context, {bool listen = true,}) {UncontrolledProviderScope scope;if (listen) {scope = context //.dependOnInheritedWidgetOfExactType<UncontrolledProviderScope>();} else {scope = context.getElementForInheritedWidgetOfExactType<UncontrolledProviderScope>().widget as UncontrolledProviderScope;}return scope.container;}

比如read中listen的值为false，使用getElementForInheritedWidgetOfExactType方法，这样在数据发生变化时就不会掉用didChangeDependencies，避免不必要的rebuild。相对的，Consumer、ProviderListener中listen的值为ture，会实现我们需要的widget重建。

我们可以还可以通过Flutter Inspector检查已有的状态，所有状态汇总在ProviderScope下面，这也是Riverpod的一个优点。如下图所示：

发布本篇时，有关Riverpod的资料与讨论很少。本篇也是我在实践完官网文档后的理解，如有错误，欢迎指出！

个人认为Riverpod是相对更轻松便捷的一种状态管理方式，待它稳定时应该能被更多的人喜爱。

Riverpod的相关示例代码我已经上传至Github，有兴趣的可以看看。后面如果Riverpod有变动时，我也会及时更新。大家可以收藏起来，多多点赞支持一下，给我点更新动力！

5、参考

https://riverpod.dev/docs