Riverpodを知る

Riverpodとは？

Widgetにデータを受け渡す時に使うFlutterの状態管理パッケージ。

とりあえず使ってみる

まずはどんなものなのか知るため、Riverpodドキュメントにあるカウントアプリを作ってみる。
riverpod.dev

パッケージをインストールする
pub.dev
最新版をインストール

コードはこんな感じで、わからない所にコメントを入れて理解度を高める。

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

void main() {
  runApp(
    // ProviderScopeでWidgetの上位部分を囲むことで下位でもProviderを使うことができる
    const ProviderScope(child: MyApp()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

// カウンターの状態管理。グローバル変数として宣言。
// finalで宣言された変数は定数として扱われて再代入できない。
// StateProvider:単純な値（列挙、文字、bool、数値など）を扱うときに利用する。
final counterProvider = StateProvider((ref) => 0);

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
        appBar: AppBar(
          title: Text('カウントアプリ'),
        ),
        body: Center(
          // Consumerを使うと、部分的な再描画が可能になる。パフォーマンス向上。
          child: Consumer(
            builder: (context, ref, _) {
              // ref.watchでプロバイダを監視することができる。
              final count = ref.watch(counterProvider);
              return Text('$count');
            },
          ),
        ),
        // カウンターアプリのインクリメント用ボタン
        floatingActionButton: FloatingActionButton(
          // このref.readでプロバイダの状態を取得する。ユーザ操作によって呼び出されることが一般的らしい。
          onPressed: () => ref.read(counterProvider.notifier).state++,
          child: const Icon(Icons.add),
        ),
      );
  }
}

結果

まとめ

・RiverpodはProviderと同じ開発者が作成した状態管理パッケージ。Providerの上位互換、改良版。
・Riverpodはデザインパターンのシングルトンに近い。もしくはその代替。
・Riverpodは限定的な箇所のウィジェット更新ができることからパフォーマンス向上につながる。