Getting started

Riverpodの内部機構に飛び込む前に、まずは基本的なことから始めましょう。
Riverpodをインストールして、"Hello world"を書いてみましょう。

また、Riverpodが解決しようとしている問題点を説明したビデオもご覧いただけます。

(注意：このビデオはRiverpodの仕組みを説明するものではありません。問題点を説明しているだけです。)

どのパッケージをインストールするか#

何よりもまず、Riverpodが複数のパッケージにまたがっており、使い方が微妙に異なることを知っておく必要があります。
あなたがインストールしたいRiverpodのバリエーションは、あなたが作るアプリによって異なります。

どのパッケージを使用するかは、以下の表を参考にしてください。

app type	package name	description
Flutter + flutter_hooks	hooks_riverpod	flutter_hooksとRiverpodを一緒に使いながら、ちょっとしたおまけをつける方法です。
Flutter only	flutter_riverpod	flutter_hooksに依存しない、Riverpodの基本的な使用方法です。
Dart only (No Flutter)	riverpod	RiverpodからFlutterに関連するクラスをすべて取り除いたバージョンです。

また、十分に理解できない場合は、この判断グラフを参考にしてください。

package decision graph

パッケージのインストール#

インストールしたいパッケージが決まったら、pubspec.yamlに以下を追加してください。

Flutter + flutter_hooks
Flutter
Dart only

pubspec.yaml

environment:
  sdk: ">=2.12.0-0 <3.0.0"
  flutter: ">=1.17.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.17.0
  hooks_riverpod: ^1.0.0-dev.6

その後、 flutter pub get を実行してください。

pubspec.yaml

environment:
  sdk: ">=2.12.0-0 <3.0.0"
  flutter: ">=1.17.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0-dev.6

その後、 flutter pub get を実行してください。

pubspec.yaml

environment:
  sdk: ">=2.12.0-0 <3.0.0"

dependencies:
  riverpod: ^1.0.0-dev.6

その後、 pub get を実行してください。

これで完了です。あなたのアプリにRiverpodが追加されました！

利用例: Hello world#

さて、Riverpodのインストールが完了したので、早速使ってみましょう。

次のスニペットは、新しい依存関係を使って"Hello world"を作る方法を紹介しています。

Flutter + flutter_hooks
Flutter
Dart only

lib/main.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

// ここでは、値（ここでは "Hello world"）を格納する "provider "を作成します。
// プロバイダを使用することで、公開された値をモック/オーバーライドすることができます。
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // ウィジェットがプロバイダを読み込めるようにするためには、
    // アプリケーション全体を「ProviderScope」ウィジェットで包む必要があります。
    // ここには、私たちのプロバイダーの状態が保存されます。
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// 注：MyAppは、flutter_hooksのHookConsumerWidgetです。
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context) {
    // プロバイダを読み取るには、「ref.watch()」というフックを使います。
    // これは、MyAppがHookConsumerWidgetであるからこそ可能なことです。
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

これを flutter run で実行することができます。
これで、あなたの端末に "Hello world "が表示されます。

lib/main.dart

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

// ここでは、値（ここでは "Hello world"）を格納する "provider "を作成します。
// プロバイダを使用することで、公開された値をモック/オーバーライドすることができます。
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // ウィジェットがプロバイダを読み込めるようにするためには、
    // アプリケーション全体を「ProviderScope」ウィジェットで包む必要があります。
    // ここには、私たちのプロバイダーの状態が保存されます。
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// StatelessWidgetの代わりに、Riverpodで公開されているConsumerWidgetを拡張します。
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

これを flutter run で実行することができます。
これで、あなたの端末に "Hello world "が表示されます。

lib/main.dart

import 'package:riverpod/riverpod.dart';

// ここでは、値（ここでは "Hello world"）を格納する "provider "を作成します。
// プロバイダを使用することで、公開された値をモック/オーバーライドすることができます。
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  // このオブジェクトには、プロバイダの状態が保存されます。
  final container = ProviderContainer();

  // "container" のおかげで、私たちはプロバイダをreadすることができます。
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}

これを dart lib/main.dart で実行することができます。
これでコンソールに "Hello world "と表示されます。

さらに詳しく: コードスニペットのインストール#

Flutter と Vscode を使用している場合は、Flutter Riverpod Snippetsの使用を検討してください。

Flutter と Android Studio または IntelliJ を使用している場合は、Flutter Riverpod Snippetsの使用を検討してください。