Flutterのネットワーク通信の基本を解説！httpとDioの使い方と実装例まとめ
生徒
「Flutterでネットワーク通信ってどうやるんですか？APIからデータを取りたいんですけど…」
先生
「FlutterでAPI通信を行うには、httpパッケージやDioパッケージを使うのが一般的ですよ。」
生徒
「httpとDioって何が違うんですか？初心者はどっちを使えばいいですか？」
先生
「それぞれ特徴があるので、今回はhttpとDioの基本と実装方法を比較しながら解説しましょう！」
1. Flutterでのネットワーク通信とは？
Flutterでネットワーク通信を行うとは、Web API（外部のサーバー）とデータのやりとりを行うことです。例えば、天気情報アプリで最新の天気を取得したり、ニュースアプリで記事一覧を取得する場合などに使われます。
Flutterでネットワーク通信を実装するには、主に以下の2つのパッケージがよく使われます：
httpパッケージ：軽量で公式パッケージ。シンプルな用途に向いています。Dioパッケージ：機能が豊富で、リトライ処理・ログ出力・インターセプターなどの機能が使えます。
2. httpパッケージの基本的な使い方
まずはhttpパッケージの基本的な使い方を紹介します。Flutterプロジェクトにhttpパッケージを追加するには、pubspec.yamlに以下を追加します。
dependencies:
http: ^0.13.5
次に、APIからデータを取得する簡単なコード例を見てみましょう。
import 'package:http/http.dart' as http;
import 'dart:convert';
Future<void> fetchData() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
if (response.statusCode == 200) {
final data = json.decode(response.body);
print(data);
} else {
print('通信に失敗しました');
}
}
このように、http.get()でデータを取得し、json.decode()でJSONをMap形式に変換できます。
3. Dioパッケージの使い方とメリット
Dioはhttpよりも高機能で、実務レベルではよく使われるパッケージです。まずはpubspec.yamlに以下を追加します。
dependencies:
dio: ^5.3.2
次に、Dioを使って同じようにAPI通信する例を見てみましょう。
import 'package:dio/dio.dart';
Future<void> fetchDataWithDio() async {
final dio = Dio();
try {
final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
print(response.data);
} catch (e) {
print('エラーが発生しました: $e');
}
}
Dioは、エラーハンドリングがしやすく、タイムアウトやログ出力、トークン付きリクエストなども簡単に扱える点が大きなメリットです。
Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。
Flutter実践開発をAmazonで見る※ Amazon広告リンク
4. httpとDioの違いを比較
Flutter初心者がどちらを選ぶべきか迷うところですが、以下のような比較ができます。
| 項目 | httpパッケージ | Dioパッケージ |
|---|---|---|
| 使いやすさ | 簡単でシンプル | やや複雑 |
| 機能の豊富さ | 最低限 | 多機能（ログ、トークン、リトライなど） |
| エラーハンドリング | 自前で実装が必要 | try-catchで簡単に管理可 |
| 向いている用途 | 小規模アプリ・学習用 | 実務・中〜大規模アプリ |
5. JSONデータの表示方法（UIとの連携）
取得したデータはFlutterのウィジェットで表示することも重要です。例えばFutureBuilderを使えば、非同期で取得したJSONを画面に反映できます。
FutureBuilder(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('エラーが発生しました');
} else {
return Text(snapshot.data.toString());
}
},
)
このようにFutureBuilderを活用することで、APIのレスポンスをUIに結びつけて表示できます。
6. Dioでインターセプターやトークン処理もできる
Dioの大きな利点は、HTTPリクエストの前後に処理を挟める「インターセプター」が使える点です。例えば、APIトークンを自動付与するような処理を一元管理できます。
dio.interceptors.add(InterceptorsWrapper(
onRequest: (options, handler) {
options.headers['Authorization'] = 'Bearer YOUR_TOKEN_HERE';
return handler.next(options);
},
));
このようにして、毎回ヘッダーを手動で追加する手間を省けるのがDioの便利なポイントです。
7. Flutterのネットワーク通信で注意すべきポイント
Flutterでネットワーク通信を行う際には、以下の点にも注意しましょう。
- AndroidManifestやiOSの設定：インターネットを使うにはAndroidやiOSの設定ファイルで通信許可を有効にする必要があります。
- 非同期処理：
awaitやasyncの使い方を正しく理解しておくこと。 - JSONのパース：
json.decode()だけでなく、モデルクラスに変換する習慣も大事。
