httpパッケージでプロフェッショナルなネットワーク呼び出しを組み立てましょう。タイムアウト、ステータスコード、型付きデコード、そして網羅的な状態です。
このレッスンを Kodokon で開くhttpパッケージは要点を押さえています。リクエスト、ヘッダー、ボディです。dioはインターセプター、キャンセル、リトライを加えますが、より重い依存関係と引き換えです。アプリがいくつかのエンドポイントを超えて大きくなったら良い選択でしょう。どのクライアントを使うにせよ、まじめなネットワーク呼び出しの構造は変わりません。タイムアウト、HTTPステータスコードの確認、型付きのデコード、そして三つの画面の状態（ロード中、エラー、データ）を明示的に扱うことです。
flutter pub add httpimport 'dart:convert';
import 'package:http/http.dart' as http;
class Article {
const Article({required this.title});
factory Article.fromJson(Map<String, dynamic> json) =>
Article(title: json['title'] as String);
final String title;
}
Future<List<Article>> fetchArticles() async {
final uri = Uri.https('api.example.com', '/articles');
final response = await http
.get(uri)
.timeout(const Duration(seconds: 8));
if (response.statusCode != 200) {
throw Exception('HTTP ${response.statusCode}');
}
final body = utf8.decode(response.bodyBytes);
final data = jsonDecode(body) as List<dynamic>;
return [
for (final item in data)
Article.fromJson(item as Map<String, dynamic>),
];
}二つの挙動がよく人を驚かせます。一つ目、httpは404や500のステータスに対して例外を投げません。ネットワークの観点からはリクエストは「成功」したので、statusCodeを確認するのはあなたの役目です。二つ目、jsonDecodeはdynamicを返します。型付けを取り戻すために、すぐにキャストしましょう（as List<dynamic>、as Map<String, dynamic>）。大きなペイロードでは、UIを固まらせないよう、デコードをcomputeでアイソレートに逃がしましょう。
残るのは画面の状態を表現することです。isLoadingのような真偽フラグをerror != nullと組み合わせると、必ず矛盾した状態に行き着きます（ロード中でかつ同時にエラー）。sealedクラスは状態を互いに排他的にし、switchを網羅的にします。明日あなたが状態を一つ追加すれば、コンパイラが更新すべき画面をすべて指摘してくれます。
import 'package:flutter/material.dart';
sealed class ArticlesState {
const ArticlesState();
}
class ArticlesLoading extends ArticlesState {
const ArticlesLoading();
}
class ArticlesError extends ArticlesState {
const ArticlesError(this.message);
final String message;
}
class ArticlesLoaded extends ArticlesState {
const ArticlesLoaded(this.titles);
final List<String> titles;
}
Widget buildArticlesBody(ArticlesState state) {
return switch (state) {
ArticlesLoading() => const Center(
child: CircularProgressIndicator(),
),
ArticlesError(:final message) => Center(
child: Text(message),
),
ArticlesLoaded(:final titles) => ListView.builder(
itemCount: titles.length,
itemBuilder: (context, index) => ListTile(
title: Text(titles[index]),
),
),
};
}http.get呼び出しが500のレスポンスを受け取ります。httpパッケージは何をしますか？try/catchでキャッチできる例外を投げる。Responseを普通に返す。statusCodeを確認するのはあなたの役目だ。jsonDecodeがUTF-8を扱えない。response.bodyはlatin-1としてデコードされる。utf8.decode(response.bodyBytes)を使おう。sealedクラスの決定的な利点は何ですか？switchが網羅的になる。コンパイラが未処理の状態を指摘してくれる。