Flutter Riverpodの使い方｜Providerで状態を読み書きする基本

RiverpodはFlutterで状態を安全に共有するためのライブラリです。setStateで扱いきれない状態、API結果、ログイン状態などをWidgetの外へ分けたい時に候補になります。

この記事の結論

最初はProviderScope、Provider、ConsumerWidget、ref.watchの4つを押さえれば十分です。小さな値を表示するところから始め、APIや認証状態へ広げます。

パッケージを追加する

flutter pub add flutter_riverpod

ProviderScopeで包む

Riverpodを使うアプリは、通常アプリのルートをProviderScopeで包みます。

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

Providerを定義して読む

final messageProvider = Provider<String>((ref) {
  return "Hello Riverpod";
});

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final message = ref.watch(messageProvider);
    return Text(message);
  }
}

setStateとの使い分け

• 画面内だけの一時的な値はsetState
• 複数Widgetで共有する値はRiverpod
• API結果やキャッシュはRiverpodのProviderへ分離
• 認証状態はアプリ全体で参照できる形にする

実装後に確認すること

• ProviderScopeをルートに置いているか
• ConsumerWidgetまたはConsumerでrefを使っているか
• 画面内だけの状態までRiverpod化しすぎていないか
• パッケージのバージョンと公式サンプルを確認したか

よくあるつまずき

• ProviderScopeを忘れる
• ref.watchとref.readの使い分けを混同する
• 小さな状態まで分けすぎて読みにくくする
• API取得とUI表示の責務を混ぜる

次に読む記事

• Flutter状態管理とは？setState・Provider・Riverpodの違いを初心者向けに解説 — Flutterの状態管理を初心者向けに解説します。状態とは何か、setState、Provider、Riverpodをどの順番で学ぶかを整理します。
• Flutter setStateの使い方｜画面を更新する基本と注意点 — FlutterのsetStateを初心者向けに解説します。値を変更して画面を更新する流れ、よくある書き方、非同期処理後の注意点を整理します。
• FlutterでAPIを取得する方法｜http・JSON・FutureBuilderの基本 — FlutterでAPIを取得する基本を解説します。httpパッケージ、GETリクエスト、JSONパース、Future、ローディングとエラー表示の流れを整理します。

まとめ

Riverpodは状態をWidgetの外へ分け、テストや再利用をしやすくする道具です。まずは小さなProviderを作り、ref.watchで表示する流れを確認しましょう。