はじめに
Flutterでアプリを開発していると、API通信などの「非同期処理」を扱う場面が多くあります。
しかし、単にFutureやasync/awaitを使うだけでは、「ロード中」「成功」「失敗」といった状態を安全かつ明確に扱うのが難しくなります。
そこで、RiverpodのAsyncValueを使うことで、非同期処理の状態を一元的に管理し、UIとロジックをきれいに分離できるようになります。
本レポートでは、 AsyncValueの仕組みと活用方法を整理し、非同期状態管理の理解を深めます。
AsyncValueとは？
AsyncValueは、Riverpodが提供する「非同期状態を安全に表現するためのクラス」です。
3つの状態を明確に持つのが特徴です。
| 状態 | 説明 |
|---|---|
AsyncLoading | データを取得中の状態 |
AsyncData | データ取得が成功した状態 |
AsyncError | 例外が発生した状態 |
これにより、「ロード中なのにUIが更新されない」「エラー処理を忘れていた」などのミスを防げます。
使用例
[php]
// Riverpodを利用するためのimport
import ‘package:flutter_riverpod/flutter_riverpod.dart’;
import ‘package:flutter/material.dart’;
// 非同期処理を行うProvider（例：API通信）
final userProvider = FutureProvider<String>((ref) async {
await Future.delayed(const Duration(seconds: 2)); // 擬似的な通信待機
return "ユーザー情報を取得しました";
});
class AsyncValueExamplePage extends ConsumerWidget {
const AsyncValueExamplePage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
// Providerから状態を取得
final asyncValue = ref.watch(userProvider);
return Scaffold(
appBar: AppBar(title: const Text(‘AsyncValueの例’)),
body: Center(
child: asyncValue.when(
loading: () => const CircularProgressIndicator(),
error: (error, stack) => Text(‘エラー: $error’),
data: (data) => Text(data),
),
),
);
}
}
[/php]
ポイント
- ・.when() メソッドを使うと、「ロード中／成功／失敗」の分岐を簡潔に記述できます。
- ・UIロジックを AsyncValueに任せることで、状態管理がシンプルになります。
AsyncValueを使うメリット
- １.状態遷移が明確になる
→ ローディング・成功・失敗を1つの型で表現できる - ２.例外処理を見逃さない
→.when()を書くことで全状態を網羅できる - ３.UIとロジックを分離しやすい
→ 非同期処理の結果をWidgetに自然に反映できる - ４.テストしやすい
→ 状態のパターンを固定してテストできる
まとめ
- ・非同期処理では、「成功・失敗・ロード中」の状態を明確に管理することが重要です。
- ・Riverpodの AsyncValueを使うことで、これらの状態を安全に扱えます。
- ・.when()メソッドによってUIを分岐でき、例外処理の漏れも防げます。