mcpField
F
flutter-dio

flutter-dio

github.com/dhruvanbhalara開発30344 回インストール8 週間前に更新
リポジトリ

flutter-dio について

Flutter の HTTP 通信を Dio で実装するための開発スキルです。型付きモデル、インターセプター、リトライ、キャッシュ、トークンの安全な扱いを説明し、単純なリクエストで http パッケージを使う場合も示します。

主な機能

  1. 01Dio のリクエストとレスポンスの実装
  2. 02型付き JSON モデルクラス
  3. 03認証とエラーのインターセプター
  4. 04リトライ、タイムアウト、キャッシュの指針
  5. 05トークンの安全な保存
  6. 06シンプルな API 向け http パッケージの指針

活用シーン

  1. 01本番向け Flutter API クライアントの構築
  2. 02トークン付与と 401 時の更新処理
  3. 03ネットワークとサーバーのエラー分類
  4. 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

基準httpDio
インターセプターなしあり、フルチェーン
リトライロジック手動バックオフ付きで組み込み
レスポンスキャッシュ手動利用可能なプラグイン
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() を呼び出さないでください)。

コメント