Flutter Riverpodとは何か？基本的な使い方を紹介

2023年4月15日

Flutter Riverpodは、Flutterアプリケーションの状態管理を行うためのライブラリです。簡潔で分かりやすいコードを書くことができ、開発効率を高めることができます。この記事では、Flutter Riverpodの使い方について解説します。状態管理に苦しんでいるFlutter開発者の方や、状態管理ライブラリを探している方は、ぜひ参考にしてください。

Flutter Riverpodの概要

Riverpodとは

Flutterアプリケーションにおける状態管理には、多くのライブラリが存在しますが、その中でもRiverpodは最近注目されているライブラリの一つです。Riverpodは、Flutterの依存関係注入フレームワークであり、状態管理を容易にするために設計されています。Riverpodはシンプルで柔軟なAPIを提供し、Flutterアプリケーションのスケーラビリティを向上させることができます。この記事では、Riverpodの基本的な概念と、FlutterアプリケーションでRiverpodを使った状態管理の方法について説明します。

Riverpodのメリット

コードの可読性が向上する

コンポーネント間の依存関係を明確に定義することができ、コードの可読性を向上させます。

テストが容易になる

依存性の注入を容易にするため、テストを簡単に行うことができます。

柔軟性が高い

依存関係を柔軟に設定することができ、コードの再利用性を高めることができます。

状態管理が簡単になる

状態管理を簡単に行うことができます。StateNotifierProviderやStreamProviderを使用することで、状態の変更を監視し、反応することができます。

性能が向上する

依存関係の注入により、冗長な再レンダリングを回避することができます。そのため、アプリケーションのパフォーマンスを向上させることができます。

Riverpodの依存性注入

依存性注入とは

依存性注入（Dependency Injection、DI）は、オブジェクト指向プログラミングにおいて、クラス間の依存関係を解決するための設計パターンの一つです。通常、依存するオブジェクトを自分自身で生成するのではなく、別のクラスによって生成されたオブジェクトを注入（インジェクション）することで、クラス間の結合度を低くし、柔軟性とテスト容易性を向上させます。依存性注入は、大規模なアプリケーションで特に有用で、メンテナンス性や可読性を向上させることができます。

Riverpodを使用した依存性注入の実装方法

Riverpodを使用した依存性注入の実装方法は以下のようになります。

まずは、依存関係を管理するためのインターフェースを定義します。この例では、CounterRepositoryInterfaceというインターフェースを定義します。

abstract class CounterRepositoryInterface {
  int counter();
  void increment();
}

次に、このインターフェースを実装する具象クラスを定義します。この例では、CounterRepositoryというクラスを定義して、実装を行います。ここで、実際のロジックやデータの取得方法などを実装します。

class CounterRepository implements CounterRepositoryInterface {
  int _counter = 0;

  @override
  int counter() {
    return _counter;
  }

  @override
  void increment() {
    _counter++;
  }
}

次に、このCounterRepositoryInterfaceを提供するProviderを作成します。この例では、counterRepositoryProviderという名前でProviderを作成します。このProviderは、上記で定義したCounterRepositoryクラスを提供します。

final counterRepositoryProvider = Provider<CounterRepositoryInterface>((ref) {
  return CounterRepository();
});

これらを使って、UIやロジック内で依存性を解決することができます。以下は、カウンターアプリケーションの例です。この例では、ボタンを押すとカウントが増えるシンプルなアプリケーションを作成します。

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Counter App'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'You have pushed the button this many times:',
                ),
                Consumer(
                  builder: (context, watch, _) {
                    final counter = watch(counterRepositoryProvider).counter();
                    return Text(
                      '$counter',
                      style: Theme.of(context).textTheme.headline4,
                    );
                  },
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              context.read(counterRepositoryProvider).increment();
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

上記の例では、ProviderScopeを使ってProviderのスコープを指定し、UI側ではcounterRepositoryProviderをwatchして、カウンターの値を取得しています。また、floatingActionButtonのonPressedでは、context.readを使ってcounterRepositoryProviderを取得し、incrementメソッドを呼び出すことで、カウントを増やしています。

Riverpodのステート管理

ステート管理とは

ステート管理とは、アプリケーション内の状態（state）を管理することを指します。アプリケーションが複雑になると、状態を管理することが困難になります。ステート管理の目的は、状態を管理し、アプリケーション内での状態変更を追跡することで、アプリケーションの挙動を制御することです。ステート管理は、アプリケーションのパフォーマンス、保守性、拡張性を向上させることができます。ステート管理には、様々なライブラリやフレームワークがありますが、Flutterでは、ProviderやRiverpodといった依存性注入ライブラリがよく使われます。

Riverpodを使用したステート管理のメリット

Riverpodは、ステート管理や依存性注入に利用できます。Riverpodを使用することで、グローバルなステート管理が簡単になり、コードの再利用性が向上します。また、RiverpodはImmutable（イミュータブル）な値を扱えるため、ステートの変更が予測可能であるため、バグの発生を減らすことができます。さらに、Riverpodを使用することで、アプリケーション内でステート管理と依存性注入を一貫して使用することができ、コードの見通しがよくなります。

Riverpodを使用したステート管理の実装方法

Riverpodを使用したステート管理には、以下の手順が含まれます。

プロバイダーの作成

Riverpodでは、ステートを提供するためにプロバイダーと呼ばれるものを作成します。プロバイダーは、値を提供するために使用されます。

final counterProvider = StateProvider((ref) => 0);

上記の例では、StateProviderを使用してカウンターの初期値を0として宣言しています。

プロバイダーを使用したステートの読み書き

Provider.ofメソッドを使用することで、プロバイダーを介してステートを読み書きすることができます。

final MyApp = StatelessWidget(
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('Riverpod Counter')),
          body: Center(
            child: Consumer(
              builder: (context, watch, _) {
                final counter = watch(counterProvider).state;
                return Text('$counter');
              },
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => context.read(counterProvider).state++,
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
);

上記の例では、Consumerウィジェットを使用して、counterProviderからステートの値を取得し、表示するために使用しています。また、context.readメソッドを使用して、ステートを更新するためにonPressedメソッド内でカウンターの値をインクリメントしています。

以上が、Riverpodを使用したステート管理の基本的な実装方法です。

Riverpodのテスト

テストの重要性

ソフトウェア開発において、テストは非常に重要な役割を担います。テストによって、ソフトウェアの品質を向上させることができます。テストを行うことで、バグやエラーを早期に発見し、修正することができます。また、テストを行うことで、コードの品質を向上させ、保守性を高めることができます。テストは、ソフトウェア開発のプロセスにおいて欠かせないものであり、重要な投資であると言えます。

Riverpodを使用したテストのメリット

Riverpodを使用することで、依存性注入を利用したテストが容易になります。テスト中に必要なオブジェクトを手動でインスタンス化する必要がなくなり、テストコードの作成が簡素化されます。また、テスト時にステート変更を追跡できるため、アプリケーションのロジックに関するバグをより早く検出できます。さらに、Riverpodは、アプリケーションのロジックを分離してテスト可能な単一の関数に変換することができるため、テストの保守性も向上します。

Riverpodを使用したテストの実装方法

Riverpodを使用したテストは、簡単に実装できます。まず、テストファイルでtestWidgetsを使用して、ウィジェットツリー内のウィジェットをテストすることができます。そして、ProviderScopeを使用して、ウィジェットツリーのコンテキスト内でProviderをテストできます。

以下は、Riverpodを使用してCounterアプリのテストを行う例です。まず、Counterウィジェットを定義し、useProviderを使用してCounterProviderを使用します。

class Counter extends StatelessWidget {
  const Counter({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final count = context.read(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter App'),
      ),
      body: Center(
        child: Text(
          '$count',
          style: const TextStyle(fontSize: 48),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(counterProvider.notifier).increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

final counterProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() {
    state++;
  }
}

次に、Counterウィジェットを使用してテストを行います。以下の例では、testWidgetsを使用して、Counterウィジェットをレンダリングして、テストを行います。

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(
      ProviderScope(
        child: MaterialApp(
          home: const Counter(),
        ),
      ),
    );

    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

ProviderScopeを使用して、ウィジェットツリーのコンテキストを設定し、テストでProviderを使用できます。また、pumpWidgetを使用してウィジェットをレンダリングし、tapを使用してボタンをタップし、pumpを使用してウィジェットの再レンダリングをトリガーします。最後に、expectを使用して、ウィジェット内のテキストを検索し、検証を行います。

このように、Riverpodを使用することで、テストをより簡単に行うことができます。ProviderScopeを使用して、コンテキスト内でProviderをテストすることができます。また、ウィジェットツリー内のウィジェットを直接テストすることができるため、テストの信頼性も向上します。