flutter_riverpod如何使用

最近在学习Flutter的状态管理，看到Riverpod这个库挺受欢迎的，但不太清楚具体怎么使用。比如：

  1. 如何创建和初始化Provider？
  2. 在Widget中如何读取Provider的值？
  3. 不同Provider之间如何相互依赖？
  4. 状态更新后如何自动刷新UI？
  5. 有没有最佳实践或常见的使用模式可以分享？

希望能得到一个简单的使用示例和基本概念的解释，谢谢！

2 回复

Flutter Riverpod 使用步骤：

  1. 添加依赖：flutter_riverpod
  2. 用 ProviderScope 包裹根组件
  3. 创建 Provider：final myProvider = Provider((ref) => MyClass());
  4. 使用：ConsumerWidget + ref.watch(myProvider)

简单易用，状态管理更清晰。

更多关于flutter_riverpod如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter Riverpod 是 Flutter 应用的状态管理库，提供响应式、类型安全的状态管理。以下是基本使用方法：

1. 安装依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_riverpod: ^2.4.9

2. 基本使用

创建 Provider

// 简单值 Provider
final counterProvider = StateProvider<int>((ref) => 0);

// 异步 Provider
final userProvider = FutureProvider<User>((ref) async {
  return fetchUser();
});

// 状态 Provider
final todoProvider = StateNotifierProvider<TodoNotifier, List<Todo>>((ref) {
  return TodoNotifier();
});

在 Widget 中使用

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    
    return Scaffold(
      body: Center(
        child: Text('Count: $counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}

应用入口

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

3. 核心概念

  • ref.watch(): 监听 Provider 变化并重建 Widget
  • ref.read(): 一次性读取 Provider 值（不在 build 中使用）
  • ref.listen(): 监听变化但不重建，用于副作用

4. 状态更新

// 更新 StateProvider
ref.read(counterProvider.notifier).state = 10;

// 在 StateNotifier 中
class TodoNotifier extends StateNotifier<List<Todo>> {
  TodoNotifier() : super([]);
  
  void addTodo(String title) {
    state = [...state, Todo(title: title)];
  }
}

Riverpod 提供了类型安全、测试友好的状态管理，适合各种规模的 Flutter 应用。

回到顶部