先生と生徒の会話形式で理解しよう

生徒

「Flutterで状態管理をしようと思ったんですが、Riverpodってよく聞くんです。これって何なんですか？」

先生

「FlutterのRiverpodは、アプリの状態（State）を効率的に管理するためのパッケージです。公式のProviderの進化版とも言えますよ。」

生徒

「Providerとの違いや、どうやって使い始めたらいいのかも知りたいです！」

先生

「それでは、FlutterアプリにRiverpodを導入する手順や基本的な使い方を解説していきましょう！」

1. Riverpodとは？Flutterの状態管理をシンプルに

Riverpod（リバーポッド）は、Flutterにおける状態管理ライブラリのひとつです。
Providerの開発者によって作られた後継ライブラリで、安全性と柔軟性を高めつつ、よりシンプルに状態管理ができるのが特徴です。

状態管理とは、アプリ内の変数や画面の状態（カウンターの数やログイン情報など）を、一元的に管理してUIに反映する仕組みです。

2. FlutterでRiverpodを使うための準備

まずは、FlutterプロジェクトにRiverpodを導入する必要があります。Flutterのバージョンが最新であることを確認したうえで、以下のパッケージをpubspec.yamlに追加しましょう。


dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.5.1

追加したら、flutter pub getでパッケージを取得します。これでRiverpodが使えるようになります。

3. Riverpodの基本：Providerの定義と使用方法

Riverpodでは、状態を管理するためにProviderを定義し、それをウィジェットツリーで読み取ります。
まずはシンプルな例から見てみましょう。


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

// Providerの定義
final greetingProvider = Provider((ref) => 'こんにちは、Flutter！');

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends ConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final greeting = ref.watch(greetingProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod基本')),
      body: Center(child: Text(greeting)),
    );
  }
}

上記のように、Providerを定義し、ConsumerWidget内でref.watch()を使ってその値を取得できます。

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. Riverpodで状態を持つ変数：StateProviderの使い方

Providerは固定値に使いますが、変化する状態（例えばカウンターなど）を扱うにはStateProviderを使います。


// 状態を保持するStateProviderの定義
final counterProvider = StateProvider((ref) => 0);

このように定義したcounterProviderを使って、以下のようにカウントアプリが作れます。


class CounterScreen extends ConsumerWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Scaffold(
      body: Center(child: Text('カウント: $count')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

ref.read().notifierを使って状態を変更し、ref.watch()で画面に反映させます。

5. Riverpodでの状態更新：StateNotifierとStateNotifierProvider

複雑なロジック（複数の状態変更や非同期処理など）を扱いたい場合は、StateNotifierとStateNotifierProviderを使います。


// カウンターロジックのクラス
class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
  void decrement() => state--;
}

// Providerの定義
final counterNotifierProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

画面側で使うときは次のようにします。


class NotifierCounterScreen extends ConsumerWidget {
  const NotifierCounterScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterNotifierProvider);
    final notifier = ref.read(counterNotifierProvider.notifier);

    return Scaffold(
      body: Center(child: Text('カウント: $count')),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FloatingActionButton(
            onPressed: notifier.increment,
            child: const Icon(Icons.add),
          ),
          const SizedBox(width: 20),
          FloatingActionButton(
            onPressed: notifier.decrement,
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

これで、より柔軟で複雑な状態管理が可能になります。

6. Riverpodの便利なポイントと実践での使いどころ

FlutterのRiverpodは、以下のような場面でとても便利です：

ログインユーザーの情報の保持
API通信結果の保持と画面への反映
フォームの状態管理（バリデーションなど）
画面をまたぐグローバルな状態管理

また、Riverpodは「依存性注入（DI）」にも対応しており、テストも書きやすくなっています。

7. Flutter初心者がRiverpodを学ぶためのおすすめステップ

Flutter初心者がRiverpodを活用できるようになるには、以下のステップで学習すると良いでしょう。

ProviderとStateProviderの違いを理解する
ConsumerWidgetとref.watch/ref.readの使い方を覚える
StateNotifierを使って複雑なロジックを管理する練習をする
非同期処理とFutureProvider、StreamProviderも活用してみる

状態管理の理解はFlutterアプリ開発を大きく効率化してくれます。まずは小さなアプリから試してみましょう。

まとめ

Riverpodを使ったFlutterの状態管理を振り返る

ここまでの記事では、Flutterにおける状態管理ライブラリであるRiverpodについて、基本的な考え方から具体的な使い方、実践的な活用シーンまでを段階的に解説してきました。 Flutterでアプリ開発を行ううえで「状態管理」は避けて通れないテーマであり、 Riverpodはその課題を分かりやすく、かつ安全に解決するための仕組みとして多くの現場で使われています。

Riverpodの大きな特徴は、ウィジェットツリーに依存しすぎない設計と、状態の読み取りや更新を明確に分離できる点にあります。 ProviderScopeをアプリの起点に置くことで、どの画面からでも状態にアクセスでき、 ref.watchとref.readを使い分けることで、画面更新のタイミングを意識した設計が可能になります。これにより、Flutter初心者がつまずきやすい「どこで状態を管理すればいいのか分からない」という悩みを減らすことができます。

記事の前半では、Providerを使った固定値の管理や、 StateProviderによるシンプルなカウンターの例を通して、 Riverpodの基本構文と考え方を学びました。これらは、画面に表示する文字列や数値のような単純な状態を扱う場面で非常に役立ちます。状態が変わると自動的にUIが更新される仕組みを体感することで、 FlutterとRiverpodの連携の強さを実感できたはずです。

StateNotifierによる実践的な状態管理の重要性

後半では、StateNotifierとStateNotifierProviderを使った、より実践的な状態管理の方法を紹介しました。実際のFlutterアプリ開発では、単純な数値の増減だけでなく、ログイン状態の管理やAPI通信結果の保持、複数条件による画面制御など、複雑なロジックを扱う場面が多くなります。そのようなケースでは、状態と処理を一つのクラスにまとめられるStateNotifierが非常に有効です。

ロジックをUIから切り離すことで、コードの見通しが良くなり、修正や機能追加もしやすくなります。また、Riverpodはテストとの相性も良く、状態管理部分を単体で検証できる点も大きなメリットです。これは、アプリ規模が大きくなったときに特に効果を発揮します。

まとめ用サンプル：Riverpodの基本構造を再確認


final messageProvider = Provider((ref) {
  return 'Riverpodで状態管理を学習中';
});

このように、Providerを使って状態を定義し、 ConsumerWidget内でref.watchを使って読み取るのがRiverpodの基本形です。まずはこの形をしっかり理解し、少しずつStateProviderやStateNotifierへとステップアップしていくことで、無理なく状態管理の考え方が身についていきます。

先生と生徒の振り返り会話

生徒

「Riverpodって難しそうだと思っていましたが、 ProviderやStateProviderから順番に学べば理解しやすいですね。」

先生

「そうですね。いきなり複雑な使い方を覚える必要はありません。まずは状態を読む、変更する、画面に反映するという流れを体で覚えることが大切です。」

生徒

「StateNotifierを使うと、ロジックが整理されて見やすくなるのも分かりました。 UIと処理を分けられるのが良いですね。」

先生

「その通りです。Riverpodを使いこなせるようになると、 Flutterアプリ全体の設計力も自然と身についてきますよ。」

生徒

「まずは小さなアプリでRiverpodを使って、状態管理に慣れていこうと思います。」

先生

「それが一番の近道です。今日学んだ内容を活かして、ぜひFlutter開発を楽しんでください。」

FlutterのRiverpodとは？基本の使い方を初心者向けに徹底解説