Riverpod简单使用 flutter

 

下面用 Flutter + Riverpod 2.x/3.x 最精简的方式带你跑通一个计数器 Demo，涵盖安装、定义 Provider、读/写状态三个核心步骤。

一、添加依赖

pubspec.yaml：
dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.4.0   # 或 ^3.x

flutter pub get


二、入口包 ProviderScope

main.dart 中必须用 ProviderScope 包裹应用，这是 Riverpod 存储状态的容器：
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// ① 全局定义 Provider（简单可变状态用 StateProvider）
final counterProvider = StateProvider<int>((ref) => 0);

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterPage());
  }
}


三、UI 中用 ConsumerWidget 读写状态

class CounterPage extends ConsumerWidget {
  const CounterPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ② 监听 —— build 中用 watch，值变自动重建
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod Counter')),
      body: Center(
        child: Text('$count', style: const TextStyle(fontSize: 48)),
      ),
      floatingActionButton: FloatingActionButton(
        // ③ 修改 —— 回调中用 read，取 notifier 改 state
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: const Icon(Icons.add),
      ),
    );
  }
}


四、核心要点速记

操作 写法 说明

定义简单状态 final xxxProvider = StateProvider<T>((ref) => initVal) 适合 int/bool/String 等简单值

监听（重建UI） ref.watch(xxxProvider) 只在 build 里用

修改状态 ref.read(xxxProvider.notifier).state = newValue 只在回调(onPressed等)用

Widget 基类 继承 ConsumerWidget，拿到 WidgetRef ref 或 Consumer(builder:...)

只读值/派生 Provider((ref) => ...) + ref.watch(otherProvider) 适合配置、计算派生值

⚠️ 常见坑：ref.watch 不要写在 onPressed 回调里，会导致运行时报错。

五、进阶（可选）

• 复杂业务逻辑 → 用 NotifierProvider（Riverpod 2+ 推荐替代 StateNotifierProvider），把逻辑封进 extends Notifier<T>

- 异步请求 → FutureProvider / AsyncNotifierProvider，自带 loading/error/data 处理
• 代码生成 → riverpod_generator + @riverpod 注解减少手写样板