SuperAPI AI 工具集

riverpod-getting-started

编程与开发

查看项目

更新于 10-16 02:11

技能介绍

本技能文档介绍 Riverpod 的入门步骤,主要面向 Flutter 与纯 Dart 项目。

一、用途 用于在 Flutter 或 Dart 项目中引入 Riverpod 状态管理库并完成最基础的接入,包括安装包、配置根级作用域、运行一个 hello-world provider,以及可选地启用代码生成与 lint。

二、安装 Riverpod 提供主包:Flutter 使用 flutter_riverpod,纯 Dart 使用 riverpod;此外还有可选的代码生成与 hooks 相关包。

Flutter 安装: flutter pub add flutter_riverpod

带代码生成: flutter pub add flutter_riverpod riverpod_annotation flutter pub add dev:riverpod_generator build_runner

纯 Dart 安装: dart pub add riverpod

带代码生成: dart pub add riverpod riverpod_annotation dart pub add dev:riverpod_generator build_runner

手动 pubspec.yaml(Flutter): dependencies: flutter: sdk: flutter flutter_riverpod: ^2.0.0 # use latest from pub.dev

dev_dependencies: build_runner: riverpod_generator: ^2.0.0 # if using code generation

随后运行 flutter pub get(纯 Dart 运行 dart pub get)。若使用代码生成,运行: dart run build_runner watch -d

文档提到:部分 Riverpod 包可能与最新 json_serializable 的兼容性有关,可能需要 Flutter 的 beta 渠道;如果 pub get 失败,可尝试 flutter channel beta 或使用 Riverpod <=3.1.0。

三、包裹应用 Widget 需要 ProviderScope(Flutter),Dart 需要 ProviderContainer 才能读取 provider。

Flutter — ProviderScope: import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';

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

纯 Dart — ProviderContainer: final container = ProviderContainer(); final value = container.read(helloWorldProvider); print(value); // Don't forget to container.dispose() when done

四、Hello world(带代码生成的 Flutter) import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod String helloWorld(Ref ref) { return 'Hello world'; }

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

class MyApp extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final String value = ref.watch(helloWorldProvider); return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Example')), body: Center(child: Text(value)), ), ); } }

运行 dart run build_runner build(或 watch)生成 main.g.dart。若不使用代码生成,则使用手动 provider(例如 final helloWorldProvider = Provider<String>((ref) => 'Hello world');),并采用相同的 ProviderScope 加 ConsumerWidget 模式。

五、启用 riverpod_lint 通过 analysis_options.yaml 添加可选 linter: plugins: riverpod_lint: ^2.0.0 # use latest from https://pub.dev/packages/riverpod_lint

该配置提供 Riverpod 的 lint 规则和重构功能,完整列表见 riverpod_lint 包页面。

六、进一步 代码生成与 hooks 可参见 riverpod-codegen-and-hooks 技能或相关文档;VS Code / Android Studio 可考虑安装 Flutter Riverpod Snippets 扩展以加快样板代码编写。

七、适用场景与限制 适用于 Flutter 与纯 Dart 项目引入 Riverpod 的初始配置。资料未提供收费、价格、性能效果或各平台支持范围等信息。