跳到主要內容

入門指南

線上嘗試 Riverpod​

要嘗試 Riverpod，請在 Dartpad 或 Zapp 上線上試用：

安裝包​

知道要安裝哪個包後，請繼續在一行中將依賴項新增到應用，如下所示：

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

或者，您可以從以下 pubspec.yaml 位置手動將依賴項新增到您的應用：

pubspec.yaml
name: my_app_name
environment:
  sdk: ^3.6.0
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.6.1
  riverpod_annotation: ^2.6.1

dev_dependencies:
  build_runner:
  custom_lint:
  riverpod_generator: ^2.6.5
  riverpod_lint: ^2.6.5

然後，使用 flutter pub get 安裝包。

現在你可以執行程式碼生成工具 dart run build_runner watch.

就是這樣。你已將 Riverpod 新增到你的應用中！

啟用 riverpod_lint/custom_lint​

Riverpod 附帶一個可選的 riverpod_lint 包， 該包提供 lint 規則以幫助您編寫更好的程式碼， 並提供自定義重構選項。

如果按照前面的步驟操作，則應該已經安裝了該包， 但需要單獨的步驟才能啟用它。

要啟用riverpod_lint，您需要在 pubspec.yaml 檔案的旁邊新增一個 analysis_options.yaml 檔案，幷包含以下內容：

analysis_options.yaml
analyzer:
  plugins:
    - custom_lint

現在，如果在程式碼庫中使用 Riverpod 時出錯，您應該會在 IDE 中看到警告。

要檢視警告和重構的完整列表，請前往 riverpod_lint 頁面。

備註

這些警告不會顯示在 dart analyze 命令的結果中。 如果要在 CI 或終端中檢查這些警告，可以執行以下命令：

dart run custom_lint

使用示例：Hello world​

現在我們已經安裝了 Riverpod，我們可以開始使用它了。

以下程式碼片段展示瞭如何使用我們的新依賴項來建立 “Hello world”：

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
@riverpod
String helloWorld(Ref ref) {
  return 'Hello world';
}

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
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),
        ),
      ),
    );
  }
}

然後，使用 flutter run 啟動應用程式。
這將在您的裝置上呈現 “Hello world”。

更進一步：安裝程式碼片段​

如果你使用的 Flutter 是 VS Code ，請考慮使用 Flutter Riverpod Snippets

如果您使用的 Flutter 是 Android Studio 或 IntelliJ ，請考慮使用 Flutter Riverpod Snippets

img

選擇你的下一步​

瞭解一些基本概念：

跟著教程走：