FlutterでAPIを取得する方法｜http・JSON・FutureBuilderの基本

FlutterでAPIを取得するには、非同期処理、HTTPリクエスト、JSON変換、ローディング表示を組み合わせます。この記事ではGETでデータを取得する最小構成を扱います。

この記事の結論

まずはhttp.getでレスポンスを取得し、jsonDecodeでMapに変換し、FutureBuilderや状態管理で画面に表示する流れを押さえます。

パッケージを追加する

flutter pub add http

GETリクエストを送る

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

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

  if (response.statusCode != 200) {
    throw Exception("API取得に失敗しました");
  }

  return jsonDecode(response.body) as Map<String, dynamic>;
}

画面に表示する

FutureBuilder<Map<String, dynamic>>(
  future: fetchPost(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    if (snapshot.hasError) {
      return Text("エラー: ${snapshot.error}");
    }
    final data = snapshot.data!;
    return Text(data["title"] as String);
  },
)

本番ではModelに分ける

最初はMapで確認しても構いませんが、画面が増えたらModelクラス、Repository、エラー処理へ分けると保守しやすくなります。

実装後に確認すること

• statusCodeを確認しているか
• jsonDecodeの型を確認しているか
• ローディングとエラー表示があるか
• API URLやキーを直接散らばらせていないか

よくあるつまずき

• awaitを書き忘れる
• ステータスコードを見ない
• API取得をbuild内で毎回実行する
• エラー時の画面を用意しない

次に読む記事

• Flutter httpパッケージの使い方｜GET・POST・ヘッダー指定の基本 — Flutterのhttpパッケージを初心者向けに解説します。GET、POST、headers、JSON送信、エラー処理、APIクライアント化の基本を整理します。
• Dart async awaitの使い方｜Futureを順番に待つ基本を初心者向けに解説 — Dartのasync/awaitを初心者向けに解説します。Futureとthenの関係、awaitで待つ書き方、try-catch、Future.wait、Flutterでローディング表示につなげる考え方を整理します。
• Flutter状態管理とは？setState・Provider・Riverpodの違いを初心者向けに解説 — Flutterの状態管理を初心者向けに解説します。状態とは何か、setState、Provider、Riverpodをどの順番で学ぶかを整理します。

まとめ

FlutterのAPI取得は、http、Future、JSON、ローディング表示の組み合わせです。まずはGETの最小構成を動かし、次にModelやRepositoryへ整理しましょう。