最近一兩個(gè)月在一些Flutter的話題中不斷的見(jiàn)到了Riverpod這個(gè)關(guān)鍵詞，細(xì)看后發(fā)現(xiàn)它是Flutter狀態(tài)管理的一個(gè)新方式。
Flutter的狀態(tài)管理方式有很多，Redux挫剑、 Bloc、 MobX氛魁、Provider等等暮顺。單單一個(gè)Provider，我也見(jiàn)到了各種組合秀存，例如ChangeNotifier + Provider / StateNotifier + Provider（ + freezed）捶码。各種方式各有千秋，我們根據(jù)自己的習(xí)慣和項(xiàng)目的情況去選擇就好或链，這里不做討論惫恼。本篇只是來(lái)介紹一下Riverpod，給大家提供一個(gè)新的選擇澳盐。
1.介紹
Riverpod和Provider師出同門祈纯，都來(lái)自作者Remi，Riverpod可以被認(rèn)為是Provider的重寫叼耙，來(lái)實(shí)現(xiàn)原本不可能的功能腕窥。就像它的名字一樣，字母與provider相同筛婉，但是又不相同簇爆。
你可以理解Riverpod是Provider的升級(jí)版，解決了Provider的一些痛點(diǎn)：
Provider是InheritedWidget的封裝爽撒，所以在讀取狀態(tài)時(shí)需要BuildContext入蛆。這導(dǎo)致了許多的限制，許多新手在不理解InheritedWidget和BuildContext時(shí)硕勿，跨頁(yè)面獲取狀態(tài)經(jīng)常會(huì)ProviderNotFoundException哨毁。而Riverpod不再依賴Flutter，也就是沒(méi)有使用InheritedWidget源武，所以也不需要BuildContext扼褪。讀取對(duì)象是編譯安全的。沒(méi)有那么多的運(yùn)行時(shí)異常粱栖。
能夠有多個(gè)相同類型的provider迎捺。
provider可以是私有的。
當(dāng)不再使用provider的狀態(tài)時(shí)查排，將其自動(dòng)回收凳枝。
當(dāng)然目前Riverpod也有一些不足（0.14.1版本）：
- 畢竟誕生不久，它還不能保證是完全穩(wěn)定的跋核。
- 可能后期會(huì)有API的破壞性改動(dòng)岖瑰。（比如在0.7.0就有不少Breaking，導(dǎo)致我之前寫的部分示例內(nèi)容就報(bào)錯(cuò)了砂代。）
- 目前生產(chǎn)環(huán)境中使用需要謹(jǐn)慎蹋订。
2.如何選擇
作者提供了Riverpod的三種方式，怎樣選擇如下圖：
本篇不引入flutter_hooks相關(guān)內(nèi)容刻伊，這里我就選擇
flutter_riverpod 露戒。那么將它添加到pubspec.yaml中：
flutter_riverpod: ^0.14.1
然后執(zhí)行flutter pub get椒功。
3.基礎(chǔ)使用
Provider
這里使用Riverpod的Provider需要三步就可以。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 1.創(chuàng)建一個(gè)全局的provider智什，里面儲(chǔ)存“Hello World!”
final Provider<String> helloWorldProvider = Provider((_) => 'Hello World!');
void main() {
runApp(
// 2.添加“ProviderScope”动漾。所有使用Riverpod的Flutter程序都必須
// 在widget tree的根部添加它，用來(lái)儲(chǔ)存各個(gè)provider荠锭。
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Riverpod Example',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ProviderExample(),
);
}
}
// 3.使用“ConsumerWidget”旱眯，在“build”中獲取對(duì)應(yīng)的provider
class ProviderExample extends ConsumerWidget {
@override
Widget build(BuildContext context, ScopedReader watch) {
final String value = watch(helloWorldProvider);
return Scaffold(
appBar: AppBar(title: Text('Provider Example')),
body: Center(
child: Text(value),
),
);
}
}
這里儲(chǔ)存“Hello World!” 使用的是Provider，它提供一個(gè)永遠(yuǎn)不變的對(duì)象证九。不過(guò)大部分場(chǎng)景下?tīng)顟B(tài)都是可變的删豺，下面用計(jì)數(shù)器來(lái)舉例。
StateProvider
在“Hello World”的基礎(chǔ)上愧怜，做兩點(diǎn)修改即可呀页。
-
定義一個(gè)全局常量
StateProvider。final StateProvider<int> counterProvider = StateProvider((_) => 0); import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; class StateProviderExample extends StatelessWidget { @override Widget 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), ), ); } }
如果你的狀態(tài)比較復(fù)雜可以使用ChangeNotifierProvider疾党，如果習(xí)慣使用StateNotifier，可以使用StateNotifierProvider 惨奕。其實(shí)StateProvider的內(nèi)部是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);
@override
T get state => super.state;
@override
set state(T value) => super.state = value;
}
StateNotifierProvider的用法與StateProvider基本一致雹洗，這里就不貼出來(lái)了，有興趣的可以點(diǎn)擊這里查看卧波。
2021-04-19更新：
0.14.0對(duì)StateNotifierProvider的語(yǔ)法有破壞性變化时肿，避免了StateNotifierProvider的錯(cuò)誤使用。具體見(jiàn)文檔港粱。
ChangeNotifierProvider
這部分沒(méi)啥說(shuō)的螃成，注意ChangeNotifier與StateNotifier的區(qū)別，需要自己調(diào)用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 {
@override
Widget 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 {
/// 延時(shí)3s
await Future.delayed(const Duration(seconds: 3));
return 'Riverpod';
});
class FutureProviderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FutureProvider Example'),
),
body: Center(
child: Consumer(
builder: (context, watch, _) {
AsyncValue<String> futureProviderValue = watch(futureProvider);
/// 根據(jù)相應(yīng)狀態(tài)展示
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上監(jiān)聽(tīng)provider的狀態(tài)變化，可以使用ProviderListener望忆。用上面的計(jì)數(shù)器例子罩阵，當(dāng)計(jì)數(shù)器為5時(shí)竿秆，觸發(fā)監(jiān)聽(tīng)。
ProviderListener<StateController<int>>(
provider: counterProvider,
onChange: (_, counter) {
if (counter.state == 5) {
print('當(dāng)前計(jì)數(shù)器為5稿壁，觸發(fā)監(jiān)聽(tīng)幽钢。');
}
},
child: Consumer(
builder: (context, watch, _) {
int count = watch(counterProvider).state;
return Text(
'$count',
style: Theme.of(context).textTheme.headline4,
);
},
),
),
ScopeProvider
一般我們?cè)趯?shí)現(xiàn)一個(gè)列表的Item時(shí)，需要傳入相應(yīng)的index大致如下：
ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ProductItem(index: index);
},
)
如果使用ScopedProvider并結(jié)合 ProviderScope常摧，就可以簡(jiǎn)單的獲取index，不必從構(gòu)造方法接收它威创。使用起來(lái)很簡(jiǎn)單落午，直接上代碼：
/// 定義ScopedProvider
final ScopedProvider<int> currentProductIndex = ScopedProvider<int>(null);
class ScopeProviderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ScopedProvider'),
),
body: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ProviderScope(
overrides: [
/// 修改value
currentProductIndex.overrideWithValue(index),
],
/// 使用'const'關(guān)鍵字實(shí)例化了“ProductItem”，
/// 但仍然可以在內(nèi)部動(dòng)態(tài)獲取內(nèi)容肚豺。
child: const ProductItem(),
);
},
),
);
}
}
class ProductItem extends ConsumerWidget {
const ProductItem({Key key}): super(key: key);
@override
Widget build(BuildContext context, ScopedReader watch) {
/// 獲取相應(yīng)index
final index = watch(currentProductIndex);
return ListTile(title: Text('item $index'));
}
}
4.修飾符
family
family的作用是可以在獲取provider時(shí)可以添加一個(gè)參數(shù)溃斋。直接上例子，一看便知：
/// 使用family吸申，可以在獲取provider時(shí)傳入city
final _weatherProvider = Provider.family<String, String>((ref, city) {
return '$city (Sunny)';
});
class FamilyExample extends StatelessWidget {
@override
Widget 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時(shí)傳入的參數(shù)是有限制的梗劫。比如bool 、int 截碴、 double 梳侨、 String 、常量或是重寫了==和hashCode的不可變對(duì)象日丹。
autoDispose
前面我們的例子中走哺，創(chuàng)建的provider因?yàn)楸４嬖赪idget Tree的根部。所以即使頁(yè)面關(guān)閉哲虾，再次進(jìn)入頁(yè)面時(shí)會(huì)獲取之前的狀態(tài)丙躏。
這顯然是不靈活的，那么這里就可以使用autoDispose束凑，它可以在我們不再使用provider時(shí)晒旅，自動(dòng)將其銷毀。那么合理的使用它可以避免內(nèi)存泄漏汪诉。
比如之前的計(jì)數(shù)器例子废恋，只需加一個(gè)autoDispose就可以避免此類問(wèn)題。
final stateProvider = StateProvider.autoDispose((_) => 0);
如果你需要自定義dispose事件扒寄，可以使用onDispose拴签。比如你的provider中有網(wǎng)絡(luò)請(qǐng)求(使用Dio)：
final myProvider = FutureProvider.autoDispose((ref) async {
final cancelToken = CancelToken();
// 當(dāng)provider被銷毀時(shí)，取消http請(qǐng)求
ref.onDispose(() => cancelToken.cancel());
// http請(qǐng)求
final response = await dio.get('path', cancelToken: cancelToken);
// 如果請(qǐng)求成功完成旗们，則保持該狀態(tài)蚓哩。
ref.maintainState = true;
return response;
});
上面代碼中出現(xiàn)了ref.maintainState，這個(gè)參數(shù)默認(rèn)為false上渴。如果用戶離開(kāi)頁(yè)面并且請(qǐng)求失敗岸梨，下次則將再次執(zhí)行該請(qǐng)求喜颁。但是，如果請(qǐng)求成功完成（maintainState為true）曹阔，則將保留狀態(tài)半开，下次重新進(jìn)入頁(yè)面時(shí)不會(huì)觸發(fā)新的請(qǐng)求。
使用autoDispose可以達(dá)到限制provider是全局還是局部作用赃份。這樣一來(lái)寂拆，可以更方便的解決跨頁(yè)面使用provider的問(wèn)題。
5.進(jìn)階使用
Combining providers
1.如果創(chuàng)建的provider需要另一個(gè)provider的狀態(tài)抓韩，這時(shí)就需要使用ProviderReference的read方法纠永。
下面的示例是，給予城市和國(guó)家的provider谒拴，當(dāng)創(chuàng)建locationProvider時(shí)尝江，獲取城市和國(guó)家的狀態(tài)。
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就可以提供多個(gè)相同類型的Provider英上，這也是相比Provider的一個(gè)優(yōu)點(diǎn)炭序。
2.如果獲取的狀態(tài)值會(huì)發(fā)生變化，我們需要監(jiān)聽(tīng)它苍日〔涯簦可以使用ProviderReference的watch方法。
下面的示例是相恃，給予城市provider彼妻，當(dāng)城市變化時(shí)，天氣也相應(yīng)變化豆茫。
final StateProvider<String> cityProvider = StateProvider((ref) => 'London');
final StateProvider<String> weatherProvider = StateProvider((ref) {
/// watch監(jiān)聽(tīng)
final String city = ref.watch(cityProvider).state;
return '$city (Sunny)';
});
class CombiningProviderExample2 extends StatelessWidget {
@override
Widget 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;
/// 修改狀態(tài)
if (city == 'London') {
context.read(cityProvider).state = "Xi'an";
} else {
context.read(cityProvider).state = 'London';
}
},
tooltip: 'Refresh',
child: Icon(Icons.refresh),
),
);
}
}
refresh
強(qiáng)制provider立即刷新侨歉，重新返回創(chuàng)建的值。這種適合列表下拉刷新揩魂，或者請(qǐng)求數(shù)據(jù)錯(cuò)誤時(shí)重試幽邓。
final FutureProvider<List<String>> productsProvider = FutureProvider((_) async {
/// 延時(shí)3s
await Future.delayed(const Duration(seconds: 3));
return List.generate(50, (index) => 'Item $index');
});
class RefreshProviderExample extends StatelessWidget {
@override
Widget 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
當(dāng)狀態(tài)中某一個(gè)值發(fā)生變化時(shí)，相應(yīng)Consumer下的builder就會(huì)執(zhí)行火脉，重建widget牵舵。如果使用select可以指定某一值更改時(shí)進(jìn)行刷新，精準(zhǔn)控制刷新范圍倦挂，避免不必要的rebuild畸颅。
不過(guò)目前（0.14.1版本），select這種局部監(jiān)聽(tīng)只支持使用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 {
@override
Widget 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變化時(shí)犯戏，這里的Text也會(huì)刷新送火。
// 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變化時(shí)拳话，只有對(duì)應(yīng)的Text會(huì)變化。
onPressed: () => context.read(personProvider).age = Random.secure().nextInt(255),
tooltip: 'Refresh',
child: Icon(Icons.refresh),
),
);
}
}
其他
細(xì)心的你會(huì)發(fā)現(xiàn)种吸，在使用read獲取provider時(shí)還是使用了context弃衍。一開(kāi)始不是說(shuō)，沒(méi)有使用InheritedWidget坚俗，所以也不需要BuildContext嗎镜盯？
其實(shí)Riverpod本身確實(shí)如此，但是在Flutter的應(yīng)用中猖败，為了便于高效（時(shí)間復(fù)雜度O(1)）的在Widget Tree中獲取ProviderContainer（在ProviderScope中隱式創(chuàng)建速缆，用來(lái)儲(chǔ)存provider），需要在根部使用InheritedWidget辙浑，便于最終獲取provider激涤。
read拟糕、refresh判呕、Consumer、ProviderListener等方法和Widget的內(nèi)部其實(shí)都調(diào)用了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中l(wèi)isten的值為false，使用getElementForInheritedWidgetOfExactType方法犁嗅，這樣在數(shù)據(jù)發(fā)生變化時(shí)就不會(huì)掉用didChangeDependencies边涕，避免不必要的rebuild。相對(duì)的褂微，Consumer功蜓、ProviderListener中l(wèi)isten的值為ture，會(huì)實(shí)現(xiàn)我們需要的widget重建宠蚂。
我們可以還可以通過(guò)Flutter Inspector檢查已有的狀態(tài)式撼，所有狀態(tài)匯總在ProviderScope下面，這也是Riverpod的一個(gè)優(yōu)點(diǎn)求厕。如下圖所示：
發(fā)布本篇時(shí)著隆，有關(guān)Riverpod的資料與討論很少。本篇也是我在實(shí)踐完官網(wǎng)文檔后的理解呀癣，如有錯(cuò)誤美浦，歡迎指出！
個(gè)人認(rèn)為Riverpod是相對(duì)更輕松便捷的一種狀態(tài)管理方式项栏，待它穩(wěn)定時(shí)應(yīng)該能被更多的人喜愛(ài)浦辨。
Riverpod的相關(guān)示例代碼我已經(jīng)上傳至Github，有興趣的可以看看沼沈。后面如果Riverpod有變動(dòng)時(shí)荤牍，我也會(huì)及時(shí)更新案腺。大家可以收藏起來(lái)，多多點(diǎn)贊支持一下康吵，給我點(diǎn)更新動(dòng)力劈榨！
