Riverpod 是 Flutter 中一个强大的状态管理库,它是 Provider 的改进版,解决了 Provider 的一些限制。以下是 Riverpod 的基本使用方法:
1. 安装依赖
首先在 pubspec.yaml
中添加依赖:
1dependencies:
2 flutter_riverpod: ^2.0.0
然后运行 flutter pub get
2. 基本使用
创建 Provider
1// 创建一个简单的计数器 provider
2final counterProvider = StateProvider<int>((ref) => 0);
在 Widget 中使用
1import 'package:flutter_riverpod/flutter_riverpod.dart';
2
3class CounterPage extends ConsumerWidget {
4 @override
5 Widget build(BuildContext context, WidgetRef ref) {
6 final counter = ref.watch(counterProvider);
7
8 return Scaffold(
9 body: Center(
10 child: Text('Count: $counter'),
11 ),
12 floatingActionButton: FloatingActionButton(
13 onPressed: () => ref.read(counterProvider.notifier).state++,
14 child: Icon(Icons.add),
15 ),
16 );
17 }
18}
3. Provider 类型
Riverpod 提供了多种类型的 Provider:
StateProvider
用于简单的状态管理:
1final themeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.light);
StateNotifierProvider
用于更复杂的状态管理:
1class CounterNotifier extends StateNotifier<int> {
2 CounterNotifier() : super(0);
3
4 void increment() => state++;
5 void decrement() => state--;
6}
7
8final counterNotifierProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());
FutureProvider
用于异步操作:
1final userDataProvider = FutureProvider<User>((ref) async {
2 return fetchUserData();
3});
StreamProvider
用于流数据:
1final chatMessagesProvider = StreamProvider<List<Message>>((ref) {
2 return chatRoom.messages;
3});
4. 高级用法
Provider 依赖
1final configProvider = Provider<Config>((ref) => Config());
2
3final apiClientProvider = Provider<ApiClient>((ref) {
4 final config = ref.watch(configProvider);
5 return ApiClient(config);
6});
监听 Provider 变化
1ref.listen<int>(counterProvider, (previous, count) {
2 if (count >= 10) {
3 showDialog(context: context, ...);
4 }
5});
组合 Provider
1final userPreferencesProvider = Provider<UserPreferences>((ref) {
2 final theme = ref.watch(themeProvider);
3 final locale = ref.watch(localeProvider);
4 return UserPreferences(theme, locale);
5});
5. 最佳实践
- 将 Provider 定义在单独的文件中(如
providers.dart
) - 对于复杂逻辑,使用
StateNotifierProvider
而不是StateProvider
- 使用
ConsumerWidget
或Consumer
来最小化重建范围 - 考虑使用
autoDispose
修饰符来避免内存泄漏:
1final tempProvider = StateProvider.autoDispose<int>((ref) => 0);
6. 示例:完整应用
1import 'package:flutter/material.dart';
2import 'package:flutter_riverpod/flutter_riverpod.dart';
3
4// 定义 Provider
5final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());
6
7class CounterNotifier extends StateNotifier<int> {
8 CounterNotifier() : super(0);
9
10 void increment() => state++;
11 void decrement() => state--;
12}
13
14void main() {
15 runApp(ProviderScope(child: MyApp()));
16}
17
18class MyApp extends StatelessWidget {
19 @override
20 Widget build(BuildContext context) {
21 return MaterialApp(
22 home: CounterPage(),
23 );
24 }
25}
26
27class CounterPage extends ConsumerWidget {
28 @override
29 Widget build(BuildContext context, WidgetRef ref) {
30 final count = ref.watch(counterProvider);
31 final counterNotifier = ref.read(counterProvider.notifier);
32
33 return Scaffold(
34 appBar: AppBar(title: Text('Riverpod Example')),
35 body: Center(
36 child: Text('Count: $count', style: TextStyle(fontSize: 24)),
37 ),
38 floatingActionButton: Column(
39 mainAxisAlignment: MainAxisAlignment.end,
40 children: [
41 FloatingActionButton(
42 onPressed: counterNotifier.increment,
43 child: Icon(Icons.add),
44 ),
45 SizedBox(height: 10),
46 FloatingActionButton(
47 onPressed: counterNotifier.decrement,
48 child: Icon(Icons.remove),
49 ),
50 ],
51 ),
52 );
53 }
54}
Riverpod 提供了更灵活、更强大的状态管理解决方案,适合各种规模的 Flutter 应用。