riverpod-pull-to-refresh

Riverpod — プルして更新

手順

Riverpod はプルして更新する操作に適しています。プロバイダーを無効化して更新し、読み込み・データ・エラーの状態の処理は AsyncValue に任せます。

1. プロバイダーと UI

データを取得する非同期プロバイダー（例：FutureProvider または AsyncNotifierProvider）を定義します。ref.watch(provider) で表示すると、AsyncValue を取得できます。

2. RefreshIndicator

スクロール可能なウィジェット（ListView、SingleChildScrollView など）を RefreshIndicator で囲みます。onRefresh では ref.refresh(provider.future) を呼び出し、新しいデータが読み込まれるまでインジケーターを表示し続けます。

RefreshIndicator(
  onRefresh: () => ref.refresh(activityProvider.future),
  child: ListView(
    children: [
      // content
    ],
  ),
)

3. 読み込み状態とエラー状態

AsyncValue のパターンマッチングを使用します。

• 初回読み込み： データもエラーもない場合は、全画面のスピナーを表示します。
• 更新： 更新インジケーターを表示し、新しい結果が届くまで以前のデータ（または以前のエラー）を表示し続けます。
• データ： AsyncValue(:final value?) などを使用して値を表示します。
• エラー： AsyncValue(:final error?) を使用してエラーを表示します。

例（構文は Riverpod のバージョンによって異なる場合があります）：

final activity = ref.watch(activityProvider);
switch (activity) {
  AsyncValue<Activity>(:final value?) => Text(value.activity),
  AsyncValue(:final error?) => Text('Error: $error'),
  _ => const CircularProgressIndicator(),
}

API で nullable なデータに対して公開されている場合は、valueOrNull（または同等の機能）を使用します。お使いのバージョンの AsyncValue API の正確な仕様については、ドキュメントを参照してください。