当前位置：首页 > news >正文

Flutter Riverpod 状态管理详解：下一代状态管理方案

news 2026/6/1 3:39:39

Flutter Riverpod 状态管理详解：下一代状态管理方案

引言

Riverpod 是由 Flutter 社区核心贡献者 Remi Rousselet 开发的下一代状态管理库。它是 Provider 的继承者，解决了 Provider 的诸多限制，提供了更强大、更灵活的状态管理方案。

Riverpod 核心概念

什么是 Riverpod

Riverpod 是一个用于管理应用状态的库，它的主要特点包括：

完全独立于 Widget 树
支持多种状态管理方式
内置依赖注入
自动处理生命周期
强大的测试支持

核心组件

Provider：最基础的提供者，用于提供值
StateProvider：用于管理简单状态
StateNotifierProvider：用于管理复杂状态
ChangeNotifierProvider：兼容 ChangeNotifier
FutureProvider：用于异步操作
StreamProvider：用于流数据

基础用法

创建 Provider

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

在 Widget 中使用

class CounterPage extends ConsumerWidget { const CounterPage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final count = ref.watch(counterProvider); return Scaffold( appBar: AppBar(title: const Text('Counter')), body: Center( child: Text('Count: $count'), ), floatingActionButton: FloatingActionButton( onPressed: () { ref.read(counterProvider.notifier).state++; }, child: const Icon(Icons.add), ), ); } }

初始化应用

void main() { runApp( ProviderScope( child: const MyApp(), ), ); }

不同类型的 Provider

StateNotifierProvider

class CounterNotifier extends StateNotifier<int> { CounterNotifier() : super(0); void increment() => state++; void decrement() => state--; void reset() => state = 0; } final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) { return CounterNotifier(); });

FutureProvider

final weatherProvider = FutureProvider<Weather>((ref) async { final repository = ref.watch(weatherRepositoryProvider); return repository.fetchWeather('Beijing'); }); class WeatherPage extends ConsumerWidget { const WeatherPage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final weatherAsyncValue = ref.watch(weatherProvider); return Scaffold( appBar: AppBar(title: const Text('Weather')), body: weatherAsyncValue.when( loading: () => const Center(child: CircularProgressIndicator()), error: (error, stack) => Center(child: Text('Error: $error')), data: (weather) => Center( child: Column( children: [ Text(weather.city), Text('${weather.temperature}°C'), ], ), ), ), ); } }

StreamProvider

final timerProvider = StreamProvider<int>((ref) { return Stream.periodic(const Duration(seconds: 1), (count) => count); });

依赖注入

定义依赖

final apiClientProvider = Provider<ApiClient>((ref) { return ApiClient(); }); final weatherRepositoryProvider = Provider<WeatherRepository>((ref) { final apiClient = ref.watch(apiClientProvider); return WeatherRepository(apiClient: apiClient); });

自动清理资源

final databaseProvider = Provider<Database>((ref) { final database = Database(); ref.onDispose(() { database.close(); }); return database; });

高级特性

监听状态变化

ref.listen(counterProvider, (previous, next) { if (next >= 10) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Reached 10!')), ); } });

选择性监听

final userProvider = StateNotifierProvider<UserNotifier, User>((ref) => UserNotifier()); ref.listen(userProvider.select((user) => user.isLoggedIn), (_, isLoggedIn) { if (isLoggedIn) { // 跳转到主页 } });

缓存与刷新

final weatherProvider = FutureProvider<Weather>((ref) async { final city = ref.watch(cityProvider); return fetchWeather(city); }); // 刷新数据 ref.refresh(weatherProvider); // 手动控制缓存 ref.invalidate(weatherProvider);

家族 Provider

final userProvider = FutureProvider.family<User, String>((ref, userId) async { return fetchUser(userId); }); // 使用 final user = ref.watch(userProvider('123'));

测试支持

测试 Provider

void main() { test('counter increments', () async { await ProviderContainer().run((ref) async { final counter = ref.read(counterProvider.notifier); expect(ref.read(counterProvider), 0); counter.increment(); expect(ref.read(counterProvider), 1); counter.increment(); expect(ref.read(counterProvider), 2); }); }); }

模拟依赖

void main() { test('weather provider with mock', () async { await ProviderContainer( overrides: [ weatherRepositoryProvider.overrideWithValue(MockWeatherRepository()), ], ).run((ref) async { final weather = await ref.read(weatherProvider.future); expect(weather.city, 'Mock City'); }); }); }

与其他状态管理对比

特性	Riverpod	Provider	Bloc
依赖注入	内置	有限	手动
Widget 树依赖	无	有	无
测试支持	优秀	中等	优秀
学习曲线	中等	平缓	较陡
灵活性	高	低	中

最佳实践

1. 组织 Provider

// providers/counter_provider.dart final counterProvider = StateNotifierProvider<CounterNotifier, int>(...); // providers/weather_provider.dart final weatherProvider = FutureProvider<Weather>(...); // providers/user_provider.dart final userProvider = StateNotifierProvider<UserNotifier, User>(...);

2. 使用 Selector 优化性能

Consumer( builder: (context, ref, child) { final userName = ref.watch(userProvider.select((user) => user.name)); return Text(userName); }, )

3. 避免不必要的重建

final expensiveComputationProvider = Provider((ref) { // 这个计算只会执行一次，结果会被缓存 return computeExpensiveValue(); });

4. 使用 AutoDispose

final temporaryDataProvider = StateProvider.autoDispose((ref) => '');

实战案例：Todo 应用

class Todo { final String id; final String title; final bool completed; Todo({required this.id, required this.title, this.completed = false}); Todo copyWith({String? id, String? title, bool? completed}) { return Todo( id: id ?? this.id, title: title ?? this.title, completed: completed ?? this.completed, ); } } class TodoNotifier extends StateNotifier<List<Todo>> { TodoNotifier() : super([]); void addTodo(String title) { state = [...state, Todo(id: DateTime.now().toString(), title: title)]; } void toggleTodo(String id) { state = state.map((todo) { if (todo.id == id) { return todo.copyWith(completed: !todo.completed); } return todo; }).toList(); } void removeTodo(String id) { state = state.where((todo) => todo.id != id).toList(); } } final todoProvider = StateNotifierProvider<TodoNotifier, List<Todo>>((ref) { return TodoNotifier(); }); class TodoPage extends ConsumerWidget { const TodoPage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final todos = ref.watch(todoProvider); final textController = TextEditingController(); return Scaffold( appBar: AppBar(title: const Text('Todos')), body: Column( children: [ TextField( controller: textController, decoration: const InputDecoration(hintText: 'Add todo'), onSubmitted: (value) { if (value.isNotEmpty) { ref.read(todoProvider.notifier).addTodo(value); textController.clear(); } }, ), Expanded( child: ListView.builder( itemCount: todos.length, itemBuilder: (context, index) { final todo = todos[index]; return ListTile( title: Text(todo.title), leading: Checkbox( value: todo.completed, onChanged: (_) { ref.read(todoProvider.notifier).toggleTodo(todo.id); }, ), trailing: IconButton( icon: const Icon(Icons.delete), onPressed: () { ref.read(todoProvider.notifier).removeTodo(todo.id); }, ), ); }, ), ), ], ), ); } }