Flutter httpパッケージの使い方｜GET・POST・ヘッダー指定の基本

httpパッケージは、FlutterでREST APIへアクセスする時によく使う基本パッケージです。まずはGETとPOST、headers、JSONの扱いを理解しましょう。

この記事の結論

GETはデータ取得、POSTはデータ送信に使います。JSON APIではheadersにContent-Typeを指定し、bodyをjsonEncodeして送信します。

追加とimport

flutter pub add http

import "dart:convert";
import "package:http/http.dart" as http;

GETの基本

final response = await http.get(
  Uri.parse("https://example.com/posts"),
);

if (response.statusCode == 200) {
  final data = jsonDecode(response.body);
  print(data);
}

POSTでJSONを送る

final response = await http.post(
  Uri.parse("https://example.com/posts"),
  headers: {"Content-Type": "application/json"},
  body: jsonEncode({"title": "Hello"}),
);

APIクライアントに分ける

画面から直接httpを呼ぶと、テストや変更が難しくなります。慣れてきたらApiClientやRepositoryに分けます。

class ApiClient {
  Future<Map<String, dynamic>> getJson(String path) async {
    final response = await http.get(Uri.parse(path));
    if (response.statusCode != 200) {
      throw Exception("Request failed");
    }
    return jsonDecode(response.body) as Map<String, dynamic>;
  }
}

実装後に確認すること

• Uri.parseを使っているか
• statusCodeを確認しているか
• POSTでContent-Typeを指定しているか
• 画面と通信処理を分ける準備があるか

よくあるつまずき

• 文字列URLをそのまま渡して型エラーにする
• JSON送信でheadersを忘れる
• 通信エラーを握りつぶす
• APIキーをアプリに直書きする

次に読む記事

• FlutterでAPIを取得する方法｜http・JSON・FutureBuilderの基本 — FlutterでAPIを取得する基本を解説します。httpパッケージ、GETリクエスト、JSONパース、Future、ローディングとエラー表示の流れを整理します。
• Dart async awaitの使い方｜Futureを順番に待つ基本を初心者向けに解説 — Dartのasync/awaitを初心者向けに解説します。Futureとthenの関係、awaitで待つ書き方、try-catch、Future.wait、Flutterでローディング表示につなげる考え方を整理します。
• FlutterでFirebaseを使う方法｜初期設定からfirebase_coreまで — FlutterでFirebaseを使う基本を解説します。Firebase CLI、FlutterFire CLI、flutterfire configure、firebase_core、初期化コードの流れを整理します。

まとめ

httpパッケージはFlutterのREST API通信の基本です。GET、POST、headers、jsonEncode/jsonDecodeを小さなコードで確認し、実務ではAPIクライアントへ分けましょう。