Flutter Riverpod #
一、Riverpod基础 #
1.1 安装 #
yaml
dependencies:
flutter_riverpod: ^2.4.9
1.2 基本用法 #
dart
final counterProvider = StateProvider<int>((ref) => 0);
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return MaterialApp(
home: Scaffold(
body: Center(child: Text('$count')),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).state++,
child: Icon(Icons.add),
),
),
);
}
}
二、Provider类型 #
2.1 StateProvider #
dart
final counterProvider = StateProvider<int>((ref) => 0);
ref.watch(counterProvider);
ref.read(counterProvider.notifier).state = 10;
2.2 StateNotifierProvider #
dart
class Counter extends StateNotifier<int> {
Counter() : super(0);
void increment() => state++;
void decrement() => state--;
}
final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter());
ref.watch(counterProvider);
ref.read(counterProvider.notifier).increment();
2.3 FutureProvider #
dart
final dataProvider = FutureProvider<String>((ref) async {
await Future.delayed(Duration(seconds: 1));
return 'Data loaded';
});
ref.watch(dataProvider).when(
data: (data) => Text(data),
loading: () => CircularProgressIndicator(),
error: (error, stack) => Text('Error: $error'),
);
2.4 StreamProvider #
dart
final streamProvider = StreamProvider<int>((ref) {
return Stream.periodic(Duration(seconds: 1), (count) => count);
});
三、总结 #
3.1 核心概念 #
| 概念 | 说明 |
|---|---|
| ProviderScope | 作用域 |
| ref.watch | 监听变化 |
| ref.read | 获取实例 |
| StateProvider | 简单状态 |
| StateNotifierProvider | 复杂状态 |
3.2 下一步 #
让我们学习 Bloc模式!
最后更新:2026-03-28