毎日Flutter生活 Advent Calendar 2025 の15日目です

こんにちは！tatata-keshiです

Flutterアプリ開発では、外部APIと通信してデータを取得・送信する場面が頻繁に登場します。
この記事では、Flutter公式に近い立ち位置で使われている http パッケージ を用いて、

GET / POST 通信の基本
JSONの扱い方
実践的な実装例
エラーハンドリング

までを順を追って解説します。

`http` パッケージとは？

http は、Flutter / Dartで シンプルにHTTP通信を行うためのパッケージ です。

特徴：

学習コストが低い
小〜中規模アプリに最適
REST APIとの通信に向いている

1. パッケージのインストール

まずは pubspec.yaml に http を追加します。

dependencies:
  flutter:
    sdk: flutter
  http: ^1.6.0

パッケージを取得します。

flutter pub get

2. 基本的な使い方（GET通信）

シンプルなGETリクエスト

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

Future<void> fetchData() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
  );

  if (response.statusCode == 200) {
    print(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

ポイント

Uri.parse() を必ず使う
response.statusCode で成功判定
response.body は String（JSON文字列）

3. JSONをMapに変換する

APIレスポンスは通常JSONなので、dart:convert を使って変換します。

import 'dart:convert';

final data = jsonDecode(response.body);

例：

Future<Map<String, dynamic>> fetchPost() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
  );

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load post');
  }
}

4. POST通信の方法

JSONを送信するPOSTリクエスト

Future<void> createPost() async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    headers: {
      'Content-Type': 'application/json',
    },
    body: jsonEncode({
      'title': 'Flutter',
      'body': 'HTTP POST example',
      'userId': 1,
    }),
  );

  if (response.statusCode == 201) {
    print('Post created');
  } else {
    throw Exception('Failed to create post');
  }
}

よくある注意点

Content-Type: application/json を忘れない
body は jsonEncode する

5. モデルクラスを使った実装（実践）

モデルクラス定義

class Post {
  final int id;
  final String title;
  final String body;

  Post({
    required this.id,
    required this.title,
    required this.body,
  });

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

API通信でモデルに変換

Future<Post> fetchPost() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
  );

  if (response.statusCode == 200) {
    return Post.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}

6. UIで非同期通信を扱う（FutureBuilder）

FutureBuilder<Post>(
  future: fetchPost(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      final post = snapshot.data!;
      return Column(
        children: [
          Text(post.title),
          Text(post.body),
        ],
      );
    }
  },
)

7. ヘッダー・認証情報を付与する

final response = await http.get(
  Uri.parse(url),
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN',
    'Accept': 'application/json',
  },
);

※ APIキーは flutter_dotenv などで管理するのがおすすめです。

8. エラーハンドリングの考え方

最低限、以下は分けて扱いましょう。

if (response.statusCode >= 200 && response.statusCode < 300) {
  // 成功
} else if (response.statusCode == 401) {
  // 認証エラー
} else {
  // その他エラー
}

また、通信失敗（圏外など）には try-catch が必須です。

try {
  final response = await http.get(uri);
} catch (e) {
  // ネットワークエラー
}

9. よくあるハマりポイント

await を付け忘れる
Uri.parse() を使っていない
JSONの型不一致（int / String）
UI側でFutureを毎回生成してしまう

まとめ

http パッケージはシンプルで扱いやすい
GET / POST の基本を押さえれば十分実用的
JSON → モデル変換が重要
小〜中規模アプリに最適な選択肢

FlutterでのAPI通信の第一歩として、
まずは http パッケージをしっかり使いこなせるようになるのがおすすめです 🚀