flutter-dio について
Flutter の HTTP 通信を Dio で実装するための開発スキルです。型付きモデル、インターセプター、リトライ、キャッシュ、トークンの安全な扱いを説明し、単純なリクエストで http パッケージを使う場合も示します。
主な機能
- 01Dio のリクエストとレスポンスの実装
- 02型付き JSON モデルクラス
- 03認証とエラーのインターセプター
- 04リトライ、タイムアウト、キャッシュの指針
- 05トークンの安全な保存
- 06シンプルな API 向け http パッケージの指針
活用シーン
- 01本番向け Flutter API クライアントの構築
- 02トークン付与と 401 時の更新処理
- 03ネットワークとサーバーのエラー分類
- 04注入した http.Client によるリクエストテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ dhruvanbhalara/ skills --skill flutter-dioインストール後、Claude Code で/flutter-dioを入力して読み込まれたか確認します。
詳細
Dio によるネットワーキング
- 主要な HTTP クライアントパッケージとして Dio を使用します。
- すべてのリクエスト/レスポンスボディには、
fromJson/toJsonファクトリを備えた型安全なモデルクラスを使用します。 - すべての HTTP ステータスコードを、型付き例外(例:
ServerException、NetworkException、UnauthorizedException)で適切に処理します。 - 適切なリクエストタイムアウト(
connectTimeout、receiveTimeout、sendTimeout)を設定します。
Dio インターセプター
- 横断的関心事にはインターセプターを使用します。
- 認証インターセプター: アクセストークンをヘッダーに付与し、401 時のトークンリフレッシュを処理します。
- ロギングインターセプター:
AppLoggerを介してデバッグモードでリクエスト/レスポンスをログに記録します。 - エラーインターセプター:
DioExceptionをドメイン固有のFailure型に変換します。
- すべての API 呼び出しで一貫した動作を実現するため、
injectableを介してインターセプターを集中的に登録します。
リポジトリパターン
- DataSource には生の Dio API 呼び出しのみを含めます。ビジネスロジックやマッピングは含めません。
- Repository は、ネットワークデータについてリモート DataSource とローカルキャッシュの間を仲介します。
リトライと耐障害性
- 一時的な障害(例: 500、タイムアウト)に対して、指数バックオフを用いたリトライロジックを実装します。
- 最大リトライ回数を設定します(デフォルト: 3 回)。
- ネットワーク呼び出しを削減し、オフライン UX を改善するため、適切な場合にレスポンスをキャッシュします。
パフォーマンス
- 大きなレスポンス(1MB 超)の JSON は、
compute()を使用してバックグラウンドアイソレートでパースします。 - 同期ネットワーク操作で UI スレッドをブロックしないでください。
セキュリティ
- トークンは
flutter_secure_storageを介して保存します。ソースコードやSharedPreferencesには決して保存しないでください。 - すべての API 通信は HTTPS を使用 MUST です。
代替: http パッケージ
インターセプター、キャッシュ、リトライロジックを必要としないシンプルな REST 呼び出しには、Dio の代わりに http を使用します。
Dio と http
| 基準 | http | Dio |
|---|---|---|
| インターセプター | なし | あり、フルチェーン |
| リトライロジック | 手動 | バックオフ付きで組み込み |
| レスポンスキャッシュ | 手動 | 利用可能なプラグイン |
| FormData / Multipart | 手動 | 組み込み |
| リクエストのキャンセル | なし | あり、CancelToken |
| 依存関係 | 最小限(1 パッケージ) | 重め |
| ユースケース | シンプルな CRUD API | 本番環境の API クライアント |
プロトタイプやシンプルなフェッチ&表示には http を使用します。認証、リトライ、キャッシュを必要とする本番環境の API クライアントには Dio を使用します。
基本的な http パターン
import 'dart:convert';
import 'package:http/http.dart' as http;
// GET request
Future<Map<String, dynamic>> fetchData(http.Client client) async {
final response = await client.get(
Uri.parse('https://api.example.com/data'),
headers: {'Accept': 'application/json'},
);
if (response.statusCode == 200) {
return jsonDecode(response.body) as Map<String, dynamic>;
} else {
throw Exception('Failed to fetch: ${response.statusCode}');
}
}
// POST request
Future<void> createItem(http.Client client, Map<String, dynamic> body) async {
final response = await client.post(
Uri.parse('https://api.example.com/items'),
headers: {'Content-Type': 'application/json'},
body: jsonEncode(body),
);
if (response.statusCode != 201) {
throw Exception('Failed to create: ${response.statusCode}');
}
}
テスト: テストでモックを注入できるように、常に http.Client をパラメータとして受け取ります(直接 http.get() を呼び出さないでください)。
コメント
Markdown 対応