[Flutter] RiverpodのFutureProviderで再検索する方法

Flutterでの状態管理において、Riverpodは非常に人気のあるライブラリの一つです。今回の記事では、RiverpodのFutureProviderを使用してデータを非同期に取得し、特定の条件下でデータを再検索（再フェッチ）する方法を解説します。さらに、再検索時の挙動をカスタマイズする方法についても説明します。

FutureProviderの基本的な使い方

FutureProviderは、非同期処理を扱うためのProviderです。これを利用することで、非同期処理の結果を状態として管理し、ウィジェットツリー内のどこからでも簡単にアクセスできます。

まずは、簡単なFutureProviderの定義から見ていきましょう：

final myFutureProvider = FutureProvider<int>((ref) async {
  // 何か時間がかかる処理
  await Future.delayed(Duration(seconds: 2));
  return 42;
});

このProviderは、2秒後に数値42を返す非同期処理をラップしています。ウィジェット側でこのProviderを使用するには、次のようにします：

Consumer(builder: (context, ref, child) {
  final asyncValue = ref.watch(myFutureProvider);

  return asyncValue.when(
    data: (data) => Text('Data: $data'),
    loading: () => CircularProgressIndicator(),
    error: (e, stack) => Text('Error: $e'),
  );
});

「ref.invalidate」で再検索する方法

データを更新する必要がある場合、ref.invalidateメソッドを使用して行います。ref.invalidateは指定されたProviderのキャッシュをクリアし、データの再取得を促します。

void reloadData(WidgetRef ref) {
  ref.invalidate(myFutureProvider);
}

この関数を呼び出すと、myFutureProviderは再び実行され、新たなデータをフェッチします。

再検索時のLoading状態の制御

デフォルトでは、FutureProviderを再検索しても、再取得中にloading状態に遷移しません。つまり、前のデータが画面に表示され続けます。しかし、再検索時にloading状態を明示的に表示させたい場合は、asyncValue.when関数のskipLoadingOnRefreshプロパティをfalseに設定します。

return asyncValue.when(
　　　　skipLoadingOnRefresh: false,
  data: (data) => Text('Data: $data'),
  loading: () => CircularProgressIndicator(),
  error: (e, stack) => Text('Error: $e'),
);

この設定を行うと、再検索の間、ウィジェットはloading状態を表示するようになります。

まとめ

この記事では、次のことを解説しました。

• FutureProviderを再検索する場合はref.invalidateを使う
• 再検索中はloading状態にする場合はasyncValue.when関数でskipLoadingOnRefreshにfalseを設定する