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