flutter状态管理:Riverpod 入门
熟悉我的朋友应该都知道，我好几年前写过一个「Flutter状态管理之路」系列，那个时候介绍的是Provider，这也是官方推荐的状态管理工具，但当时没有写完，因为写着写着，觉得有很多地方不尽人意，用着很别扭，所以在写了7篇文章之后，就暂时搁置了。
一晃时间过了这么久，Flutter内部依然没有一个能够碾压一切的状态管理框架，GetX可能是，但是我觉得不是，InheritedWidget系的状态管理，才应该是正统的状态管理。
最近在留意Provider的后续进展时，意外发现了一个新的库——Riverpod，号称是新一代的状态管理工具，仔细一看，嘿，居然还是Provider的作者，好家伙，这是搬起石头砸自己的脚啊。
就像作者所说，Riverpod就是对Provider的重写，可不是吗，字母都没变，就换了个顺序，这名字也是取的博大精深。
其实Provider在使用上已经非常不错了，只不过随着Flutter的更加深入，大家对它的需求也就越来越高，特别是对Provider中因为InheritedWidget层次问题导致的异常和BuildContext的使用这些问题诟病很多，而Riverpod，正是在Provider的基础上，探索出了一条心的状态管理之路。
大家可以先把官方文档看一看 riverpod.dev ，看完之后发现还是一脸懵逼，那就对了，Riverpod和Provider一样，有很多类型的Provider，分别用于不同的场景，所以，理清这些Provider的不同作用和使用场景，对于我们用好Riverpod是非常有帮助的。
官网的文档，虽然是作者精心编写的，但它的教程，站在的是一个创作者的角度，所以很多入门的初学者看上去会有点摸不清方向，所以，这才有了这个系列的文章。
我将在这个系列中，带领大家对文档进行一次精读，进行一次赏析，本文不全是对文档的翻译，而且讲解的顺序也不一样，所以，如果你想入门Riverpod进行状态管理，那么本文一定是你的最佳选择。
Provider第一眼
首先，我们为什么要进行状态管理，状态管理是解决申明式UI开发，关于数据状态的一个处理操作，例如Widget A依赖于同级的Widget B的数据，那么这个时候，就只能把数据状态上提到它们的父类，但是这样比较麻烦，Riverpod和Provider这样的状态管理框架，就是为了解决类似的问题而产生的。
将一个state包裹在一个Provider中可以有下面一些好处。
- 允许在多个位置轻松访问该状态。Provider可以完全替代Singletons、Service Locators、依赖注入或InheritedWidgets等模式
- 简化了这个状态与其他状态的结合，你有没有为，如何把多个对象合并成一个而苦恼过？这种场景可以直接在Provider内部实现
- 实现了性能优化。无论是过滤Widget的重建，还是缓存昂贵的状态计算；Provider确保只有受状态变化影响的部分才被重新计算
- 增加了你的应用程序的可测试性。使用Provider，你不需要复杂的setUp/tearDown步骤。此外，任何Provider都可以被重写，以便在测试期间有不同的行为，这可以轻松地测试一个非常具体的行为
- 允许与高级功能轻松集成，如logging或pull-to-refresh
首先，我们通过一个简单的例子，来感受下，Riverpod是怎么进行状态管理的。
Provider是Riverpod应用程序中最重要的部分。Provider是一个对象，它封装了一个state并允许监听该state。Provider有很多变体形式，但它们的工作方式都是一样的。
最常见的用法是将它们声明为全局常量，例如下面这样。
final myProvider = Provider((ref) {
return MyValue();
});
不要被Provider的全局变量所吓倒。Provider是完全final的。声明一个Provider与声明一个函数没有什么不同，而且Provider是可测试和可维护的。
这段代码由三个部分组成。
- final myProvider，一个变量的声明。这个变量是我们将来用来读取我们Provider的状态的。Provider应该始终是final的
- Provider，我们决定使用的Provider类型。Provider是所有Provider类型中最基本的。它暴露了一个永不改变的对象。我们可以用其他Provider如StreamProvider或StateNotifierProvider来替换Provider，以改变值的交互方式
- 一个创建共享状态的函数。该函数将始终接收一个名为ref的对象作为参数。这个对象允许我们读取其他Provider，在我们Provider的状态将被销毁时执行一些操作，以及其它一些事情
传递给Provider的函数返回的对象的类型，取决于所使用的Provider。例如，一个Provider的函数可以创建任何对象。另一方面，StreamProvider的回调将被期望返回一个Stream。
你可以不受限制地声明你想要的多个Provider。与使用package:provider不同的是，Riverpod允许创建多个暴露相同 "类型 "的状态的provider。
final cityProvider = Provider((ref) => 'London'); final countryProvider = Provider((ref) => 'England');两个Provider都创建了一个字符串，但这并没有任何问题。
为了使Provider发挥作用，您必须在Flutter应用程序的根部添加ProviderScope。
void main() {
runApp(ProviderScope(child: MyApp()));
}
以上就是Riverpod最简单的使用，我们看下完整的示例代码。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');
void main() {
runApp(
// For widgets to be able to read providers, we need to wrap the entire
// application in a "ProviderScope" widget.
// This is where the state of our providers will be stored.
ProviderScope(
child: MyApp(),
),
);
}
// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final String value = ref.watch(helloWorldProvider);
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Example')),
body: Center(
child: Text(value),
),
),
);
}
}
可以发现，Riverpod的使用比package:Provider还要简单，申明一个全局变量来管理状态数据，然后就可以在任意地方获取数据了。
如何读取Provider的状态值
在有了一个简单的了解后，我们先来了解下关于状态中的「读」。
在Riverpod中，我们不像package:Provider那样需要依赖BuildContext，取而代之的是一个「ref」变量。这个东西，就是联系存取双方的纽带，这个对象允许我们与Provider互动，不管是来自一个Widget还是另一个Provider。
从Provider中获取ref
所有Provider都有一个 "ref "作为参数。
final provider = Provider((ref) {
// use ref to obtain other providers
final repository = ref.watch(repositoryProvider);
return SomeValue(repository);
})
这个参数可以安全地传递给其它Provider或者类，来获取所需要的值。
例如，一个常见的用例是将Provider的 "ref "传递给一个StateNotifier。
final counterProvider = StateNotifierProvider<Counter, int>((ref) {
return Counter(ref);
});
class Counter extends StateNotifier<int> {
Counter(this.ref): super(0);
final Ref ref;
void increment() {
// Counter can use the "ref" to read other providers
final repository = ref.read(repositoryProvider);
repository.post('...');
}
}
这样做，可以使我们的Counter类能够读取Provider。
这种方式是联系组件和Provider的一个重要方式。
从Widget中获取ref
Widgets自然没有一个ref参数。但是Riverpod提供了多种解决方案来从widget中获得这个参数。
扩展ConsumerWidget
在widget树中获得一个ref的最常见的方法是用ConsumerWidget代替StatelessWidget。
ConsumerWidget在使用上与StatelessWidget相同，唯一的区别是它的构建方法上有一个额外的参数："ref "对象。
一个典型的ConsumerWidget看起来像这样。
class HomeView extends ConsumerWidget {
const HomeView({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
// use ref to listen to a provider
final counter = ref.watch(counterProvider);
return Text('$counter');
}
}
扩展ConsumerStatefulWidget
与ConsumerWidget类似，ConsumerStatefulWidget和ConsumerState相当于一个带有状态的StatefulWidget，不同的是，state有一个 "ref "对象。
这一次，"ref "不是作为构建方法的参数传递，而是作为ConsumerState对象的一个属性。
class HomeView extends ConsumerStatefulWidget {
const HomeView({Key? key}): super(key: key);
@override
HomeViewState createState() => HomeViewState();
}
class HomeViewState extends ConsumerState<HomeView> {
@override
void initState() {
super.initState();
// "ref" can be used in all life-cycles of a StatefulWidget.
ref.read(counterProvider);
}
@override
Widget build(BuildContext context) {
// We can also use "ref" to listen to a provider inside the build method
final counter = ref.watch(counterProvider);
return Text('$counter');
}
}
通过ref来获取状态
现在我们有了一个 "ref"，我们可以开始使用它。
ref "有三个主要用途。
- 获得一个Provider的值并监听变化，这样，当这个值发生变化时，这将重建订阅该值的Widget或Provider。这是通过ref.watch完成的
- 在一个Provider上添加一个监听器，以执行一个action，如导航到一个新的页面或在该Provider发生变化时执行一些操作。这是通过 ref.listen 完成的
- 获取一个Provider的值，同时忽略它的变化。当我们在一个事件中需要一个Provider的值时，这很有用，比如 "点击操作"。这是通过ref.read完成的
只要有可能，最好使用 ref.watch 而不是 ref.read 或 ref.listen 来实现一个功能。 通过依赖ref.watch，你的应用程序变得既是反应式的又是声明式的，这使得它更容易维护。
通过ref.watch观察Provider的状态
ref.watch在Widget的构建方法中使用，或者在Provider的主体中使用，以使得Widget/Provider可以监听另一个Provider。
例如，Provider可以使用 ref.watch 来将多个Provider合并成一个新的值。
一个例子是过滤一个todo-list，我们需要两个Provider。
- filterTypeProvider，一个暴露当前过滤器类型的Provider（None，表示只显示已完成的任务）
- todosProvider，一个暴露整个任务列表的Provider
通过使用ref.watch，我们可以制作第三个Provider，结合这两个Provider来创建一个过滤后的任务列表。
final filterTypeProvider = StateProvider<FilterType>((ref) => FilterType.none);
final todosProvider = StateNotifierProvider<TodoList, List<Todo>>((ref) => TodoList());
final filteredTodoListProvider = Provider((ref) {
// obtains both the filter and the list of todos
final FilterType filter = ref.watch(filterTypeProvider);
final List<Todo> todos = ref.watch(todosProvider);
switch (filter) {
case FilterType.completed:
// return the completed list of todos
return todos.where((todo) => todo.isCompleted).toList();
case FilterType.none:
// returns the unfiltered list of todos
return todos;
}
});
有了这段代码，filteredTodoListProvider现在就可以管理过滤后的任务列表。
如果过滤器或任务列表发生变化，过滤后的列表也会自动更新。同时，如果过滤器和任务列表都没有改变，过滤后的列表将不会被重新计算。
类似地，一个Widget可以使用ref.watch来显示来自Provider的内容，并在该内容发生变化时更新用户界面。
final counterProvider = StateProvider((ref) => 0);
class HomeView extends ConsumerWidget {
const HomeView({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
// use ref to listen to a provider
final counter = ref.watch(counterProvider);
return Text('$counter');
}
}
这段代码显示了一个Widget，它监听了一个存储计数的Provider。如果该计数发生变化，该Widget将重建，用户界面将更新以显示新的值。
ref.watch方法不应该被异步调用，比如在ElevatedButton的onPressed中。也不应该在initState和其他State的生命周期内使用它。在这些情况下，考虑使用 ref.read 来代替。
通过ref.listen监听Provider的变化
与ref.watch类似，可以使用ref.listen来观察一个Provider。
它们之间的主要区别是，如果被监听的Provider发生变化，使用ref.listen不会重建widget/provider，而是会调用一个自定义函数。
这对于在某个变化发生时执行某些操作是很有用的，比如在发生错误时显示一个snackbar。
ref.listen方法需要2个参数，第一个是Provider，第二个是当状态改变时我们要执行的回调函数。回调函数在被调用时将被传递2个值，即先前状态的值和新状态的值。
ref.listen方法也可以在Provider的体内使用。
final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter(ref));
final anotherProvider = Provider((ref) {
ref.listen<int>(counterProvider, (int? previousCount, int newCount) {
print('The counter changed $newCount');
});
// ...
});
或在一个Widget的Build方法中使用。
final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter(ref));
class HomeView extends ConsumerWidget {
const HomeView({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
ref.listen<int>(counterProvider, (int? previousCount, int newCount) {
print('The counter changed $newCount');
});
return Container();
}
}
ref.listen也不应该被异步调用，比如在ElevatedButton的onPressed中。也不应该在initState和其他State的生命周期内使用它。
通过ref.read来读取Provider的状态
ref.read方法是一种在不监听的情况下获取Provider的状态的方法。
它通常用于由用户交互触发的函数中。例如，当用户点击一个按钮时，我们可以使用ref.read来增加一个计数器的值。
final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter(ref));
class HomeView extends ConsumerWidget {
const HomeView({Key? key}): super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
// Call `increment()` on the `Counter` class
ref.read(counterProvider.notifier).increment();
},
),
);
}
}
应该尽可能地避免使用ref.read，因为它不是响应式的。
它存在于使用watch或listen会导致问题的情况下。如果可以的话，使用watch/listen几乎总是更好的，尤其是watch。
关于ref.read到底什么时候用
首先，永远不要在Widget的build函数中直接使用ref.read。
你可能很想使用ref.read来优化一个Widget的性能，例如通过下面的代码来实现。
final counterProvider = StateProvider((ref) => 0);
Widget build(BuildContext context, WidgetRef ref) {
// use "read" to ignore updates on a provider
final counter = ref.read(counterProvider.notifier);
return ElevatedButton(
onPressed: () => counter.state++,
child: const Text('button'),
);
}
但这是一种非常糟糕的做法，会导致难以追踪的错误。
以这种方式使用 ref.read 通常与这样的想法有关："Provider所暴露的值永远不会改变，所以使用'ref.read'是安全的"。这个假设的问题是，虽然今天该Provider可能确实从未更新过它的值，但不能保证明天也是如此。
软件往往变化很大，而且很可能在未来，一个以前从未改变的值需要改变。
如果你使用ref.read，当这个值需要改变时，你必须翻阅整个代码库，将ref.read改为ref.watch--这很容易出错，而且你很可能会忘记一些情况。
如果你一开始就使用ref.watch，你在重构时就会减少问题。
但是如果我想用ref.read来减少我的widget重构的次数呢？
虽然这个目标值得称赞，但需要注意的是，你可以用ref.watch代替来达到完全相同的效果（减少构建的次数）。
Provider提供了各种方法来获得一个值，同时减少重建的次数，你可以用这些方法来代替。
例如下面的代码（bad）。
final counterProvider = StateProvider((ref) => 0);
Widget build(BuildContext context, WidgetRef ref) {
StateController<int> counter = ref.read(counterProvider.notifier);
return ElevatedButton(
onPressed: () => counter.state++,
child: const Text('button'),
);
}
我们可以这样改。
final counterProvider = StateProvider((ref) => 0);
Widget build(BuildContext context, WidgetRef ref) {
StateController<int> counter = ref.watch(counterProvider.notifier);
return ElevatedButton(
onPressed: () => counter.state++,
child: const Text('button'),
);
}
这两个片段代码都达到了同样的效果：当计数器增加时，我们的按钮将不会重建。
另一方面，第二种方法支持计数器被重置的情况。例如，应用程序的另一部分可以调用。
ref.refresh(counterProvider);
这将重新创建StateController对象。
如果我们在这里使用ref.read，我们的按钮仍然会使用之前的StateController实例，而这个实例已经被弃置，不应该再被使用。
而使用ref.watch则可以正确地重建按钮，使用新的StateController。
关于ref.read可以读哪些值
根据你想监听的Provider，你可能有多个可能的值可以监听。
作为一个例子，考虑下面的StreamProvider。
final userProvider = StreamProvider<User>(...);
当读取这个userProvider时，你可以像下面这样。
- 通过监听userProvider本身同步读取当前状态。
Widget build(BuildContext context, WidgetRef ref) {
AsyncValue<User> user = ref.watch(userProvider);
return user.when(
loading: () => const CircularProgressIndicator(),
error: (error, stack) => const Text('Oops'),
data: (user) => Text(user.name),
);
}
- 通过监听userProvider.stream来获得相关的Stream。
Widget build(BuildContext context, WidgetRef ref) {
Stream<User> user = ref.watch(userProvider.stream);
}
- 通过监听userProvider.future获得一个Future，该Future以最新发出的值进行解析。
Widget build(BuildContext context, WidgetRef ref) {
Future<User> user = ref.watch(userProvider.future);
}
其他Provider可能提供不同的替代值。
欲了解更多信息，请查阅API参考资料，参考每个Provider的API文档。
通过select来控制精确的读范围
最后要提到的一个与读取Provider有关的功能是，能够减少Widget/Provider从ref.watch重建的次数，或者ref.listen执行函数的频率的功能。
这一点很重要，因为默认情况下，监听一个Provider会监听整个对象的状态。但有时，一个Widget/Provider可能只关心一些属性的变化，而不是整个对象。
例如，一个Provider可能暴露了一个User对象。
abstract class User {
String get name;
int get age;
}
但一个Widget可能只使用用户名。
Widget build(BuildContext context, WidgetRef ref) {
User user = ref.watch(userProvider);
return Text(user.name);
}
如果我们简单地使用ref.watch，当用户的年龄发生变化时，这将重建widget。
解决方案是使用select来明确地告诉Riverpod我们只想监听用户的名字属性。
更新后的代码将是这样。
Widget build(BuildContext context, WidgetRef ref) {
String name = ref.watch(userProvider.select((user) => user.name));
return Text(name);
}
通过使用select，我们能够指定一个函数来返回我们关心的属性。
每当用户改变时，Riverpod将调用这个函数并比较之前和新的结果。如果它们是不同的（例如当名字改变时），Riverpod将重建Widget。然而，如果它们是相等的（例如当年龄改变时），Riverpod将不会重建Widget。
这个场景也可以使用select和ref.listen。
ref.listen<String>( userProvider.select((user) => user.name), (String? previousName, String newName) { print('The user name changed $newName'); } );这样做也将只在名称改变时调用listener。
另外，你不一定要返回对象的一个属性。任何覆盖==的值都可以使用。例如，你可以这样做。
final label = ref.watch(userProvider.select((user) => 'Mr ${user.name}'));
读取状态，是一个非常重要的部分，什么时候用什么样的方式来读，都会有不同的效果。
ProviderObserver
ProviderObserver可以监听一个ProviderContainer的变化。
要使用它，你可以扩展ProviderObserver类并覆盖你想使用的方法。ProviderObserver有三个方法。
- didAddProvider：在每次初始化一个Provider时被调用
- didDisposeProvider：在每次销毁Provider的时候被调用
- didUpdateProvider：每次在Provider更新时都会被调用
ProviderObserver的一个简单用例是通过覆盖didUpdateProvider方法来记录Provider的变化。
// A Counter example implemented with riverpod with Logger
class Logger extends ProviderObserver {
@override
void didUpdateProvider(
ProviderBase provider,
Object? previousValue,
Object? newValue,
ProviderContainer container,
) {
print('''
{
"provider": "${provider.name ?? provider.runtimeType}",
"newValue": "$newValue"
}''');
}
}
void main() {
runApp(
// Adding ProviderScope enables Riverpod for the entire project
// Adding our Logger to the list of observers
ProviderScope(observers: [Logger()], child: const MyApp()),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
final counterProvider = StateProvider((ref) => 0, name: 'counter');
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Scaffold(
appBar: AppBar(title: const Text('Counter example')),
body: Center(
child: Text('$count'),
),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).state++,
child: const Icon(Icons.add),
),
);
}
}
现在，每当我们的Provider的值被更新时，logger将记录它。
I/flutter (16783): {
I/flutter (16783): "provider": "counter",
I/flutter (16783): "newValue": "1"
I/flutter (16783): }
对于诸如StateController（StateProvider.state的状态）和ChangeNotifier等可改变的状态，previousValue和newValue将是相同的。因为它们引用的是同一个StateController / ChangeNotifier。
这些是对Riverpod的最基本了解，但是却是很重要的部分，特别是如何对状态值进行读取，这是我们用好Riverpod的核心。
推荐原作者博客: xuyisheng.top/