Flutter ネットワーキングの実装

目次

• 設定とパーミッション
• リクエスト実行とレスポンス処理
• バックグラウンドパース
• ワークフロー: ネットワーク操作の実行
• 例

設定とパーミッション

ネットワークアクセスに必要な環境とプラットフォーム固有のパーミッションを設定します。

1. ターミナルから http パッケージ依存関係を追加します:

   flutter pub add http
   

2. Dart ファイルでパッケージをインポートします:

   import 'package:http/http.dart' as http;
   

3. android/app/src/main/AndroidManifest.xml にインターネットパーミッションを追加して Android パーミッションを設定します:

   <uses-permission android:name="android.permission.INTERNET" />
   

4. macos/Runner/DebugProfile.entitlements と macos/Runner/Release.entitlements の両方にネットワーククライアントキーを追加して macOS エンタイトルメントを設定します:

   <key>com.apple.security.network.client</key>
   <true/>
   

リクエスト実行とレスポンス処理

HTTP 操作を実行し、レスポンスを厳密に型付けされた Dart オブジェクトにマップします。

• URI: URL 文字列を Uri.parse('your_url') を使用して常にパースします。
• ヘッダー: headers パラメータマップを通じて認可およびコンテンツタイプヘッダーを注入します。認証トークンには HttpHeaders.authorizationHeader を使用します。
• ペイロード: POST および PUT リクエストの場合、dart:convert の jsonEncode() を使用してボディをエンコードします。
• ステータス検証: response.statusCode を評価します。200 OK（GET/PUT/DELETE）と 201 CREATED（POST）を成功として扱います。
• エラーハンドリング: 成功以外のステータスコードに対して明示的な例外をスローします。失敗時に null を返さないでください。これにより FutureBuilder がエラー状態をトリガーせず、無限ローディングインジケータが発生します。
• デシリアライゼーション: jsonDecode(response.body) を使用して生の文字列をパースし、ファクトリコンストラクタ（例えば fromJson）を使用して、カスタム Dart オブジェクトにマップします。

バックグラウンドパース

UI がカクつく（フレームドロップ）のを防ぐために、高い負荷の JSON パースを別の Isolate にオフロードします。

• package:flutter/foundation.dart をインポートします。
• compute() 関数を使用して、パース ロジックをバックグラウンド Isolate で実行します。
• compute() に渡されるパース関数は、トップレベル関数または静的メソッドである必要があります。クロージャーまたはインスタンスメソッドは Isolate 間で渡すことができないためです。

ワークフロー: ネットワーク操作の実行

ネットワーク操作を実装して検証するには、以下のチェックリストを使用してください。

タスク進捗:

• 1. fromJson ファクトリコンストラクタを持つ厳密に型付けされた Dart モデルを定義します。
• 2. Future<Model> を返すネットワークリクエストメソッドを実装します。
• 3. 操作タイプに基づいて条件付きロジックを適用します:
  • データフェッチの場合（GET）: URI にクエリパラメータを追加します。
  • データ変更の場合（POST/PUT）: 'Content-Type': 'application/json; charset=UTF-8' を設定し、jsonEncode ボディをアタッチします。
  • データ削除の場合（DELETE）: 成功時（200 OK）に空のモデルインスタンスを返します。
• 4. statusCode を検証し、失敗時に Exception をスローします。
• 5. FutureBuilder を使用して Future を UI に統合します。
• 6. snapshot.hasData、snapshot.hasError を処理し、デフォルトで CircularProgressIndicator に設定します。
• 7. フィードバックループ: アプリを実行 → ネットワークリクエストをトリガー → コンソールでハンドルされていない例外を確認 → パースまたはパーミッションエラーを修正します。

例

高忠実度の実装: バックグラウンドでのフェッチとパース

import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// 1. Isolate 用のトップレベルパース関数
List<Photo> parsePhotos(String responseBody) {
  final parsed = (jsonDecode(responseBody) as List<Object?>)
      .cast<Map<String, Object?>>();
  return parsed.map<Photo>(Photo.fromJson).toList();
}

// 2. バックグラウンドパース付きネットワーク実行
Future<List<Photo>> fetchPhotos() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/photos'),
    headers: {
      HttpHeaders.authorizationHeader: 'Bearer your_token_here',
      HttpHeaders.acceptHeader: 'application/json',
    },
  );

  if (response.statusCode == 200) {
    // 重い処理をバックグラウンド Isolate にオフロード
    return compute(parsePhotos, response.body);
  } else {
    throw Exception('Failed to load photos. Status: ${response.statusCode}');
  }
}

// 3. 厳密に型付けされたモデル
class Photo {
  final int id;
  final String title;
  final String thumbnailUrl;

  const Photo({
    required this.id,
    required this.title,
    required this.thumbnailUrl,
  });

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      id: json['id'] as int,
      title: json['title'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

// 4. UI 統合
class PhotoGallery extends StatefulWidget {
  const PhotoGallery({super.key});

  @override
  State<PhotoGallery> createState() => _PhotoGalleryState();
}

class _PhotoGalleryState extends State<PhotoGallery> {
  late Future<List<Photo>> _futurePhotos;

  @override
  void initState() {
    super.initState();
    // リビルド時の再フェッチを防ぐために Future を一度だけ初期化
    _futurePhotos = fetchPhotos();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Photo>>(
      future: _futurePhotos,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final photos = snapshot.data!;
          return ListView.builder(
            itemCount: photos.length,
            itemBuilder: (context, index) => ListTile(
              leading: Image.network(photos[index].thumbnailUrl),
              title: Text(photos[index].title),
            ),
          );
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        }
        
        // デフォルトローディング状態
        return const Center(child: CircularProgressIndicator());
      },
    );
  }
}