CONTENT
ここから
前の節では、PokeAPIから返ってくるデータの形を確認しました。
ただ、FlutterアプリからAPIへアクセスするには、まだ準備が必要です。
その準備として使うのが、httpパッケージです。
httpパッケージは、FlutterアプリからWeb上のAPIへリクエストを送り、返ってきたデータを受け取るためのパッケージです。公式のFlutterドキュメントでも、インターネットからデータを取得する手順として、まずhttpパッケージを追加する流れが紹介されています。
この節で作ること
この節では、Flutterプロジェクトにhttpパッケージを追加します。
まだ画面には大きな変化はありません。
でも、ここはかなり大事です。
アプリが外の世界と通信できるようになる、最初の一歩です。
httpパッケージとは
httpパッケージは、FlutterやDartでHTTP通信を行うためのライブラリです。
たとえば、次のようなことができます。
| できること | 内容 |
|---|---|
| APIにアクセスする | PokeAPIなどにリクエストを送る |
| JSONを取得する | ポケモンの名前、画像URL、高さ、重さなどを受け取る |
| 通信結果を判定する | 成功したか、失敗したかを確認する |
| アプリ画面にデータを表示する | APIの結果をFlutterのUIに反映する |
pub.devでは、httpパッケージは「HTTPリソースを扱いやすくするための、Futureベースのライブラリ」と説明されています。
忙しい方はここだけ見て
Flutterプロジェクトのフォルダで、次のコマンドを実行します。
flutter pub add http
そのあと、Dartファイルで次のように読み込みます。
import 'package:http/http.dart' as http;
これで、FlutterアプリからAPI通信を行う準備ができます。
手順1：Flutterプロジェクトを開く
まず、VS CodeやAndroid Studioで、作成中のFlutterプロジェクトを開きます。
今回の教材では、ポケモン図鑑アプリを作っている前提です。
プロジェクトの中に、次のようなファイルがあることを確認してください。
pubspec.yaml
lib/
main.dart
pubspec.yaml は、Flutterアプリで使うパッケージや画像、フォントなどを管理するファイルです。
ここにhttpパッケージが追加されます。
手順2：ターミナルを開く
VS Codeの場合は、上のメニューから次のように開きます。
ターミナル → 新しいターミナル
ターミナルを開いたら、今いる場所がFlutterプロジェクトの中になっているか確認します。
ls
次のようなファイルが表示されていれば大丈夫です。
pubspec.yaml
lib
android
ios
pubspec.yaml が見えていれば、正しい場所にいます。
手順3：httpパッケージを追加する
ターミナルで、次のコマンドを実行します。
flutter pub add http
Flutter公式ドキュメントでも、パッケージを追加する方法として flutter pub add パッケージ名 が紹介されています。
実行すると、pubspec.yaml にhttpパッケージが自動で追加されます。
例として、次のような形になります。
dependencies:
flutter:
sdk: flutter
http: ^1.x.x
1.x.x の部分は、その時点で取得されるバージョンによって変わります。
正確な最新版はpub.devのhttpページで確認してください。
手順4：pubspec.yamlを確認する
pubspec.yaml を開いて、dependencies: の中に http が追加されているか確認します。
dependencies:
flutter:
sdk: flutter
http: ^1.x.x
ここで注意したいのは、インデントです。
YAMLファイルでは、空白のズレでエラーになることがあります。
悪い例です。
dependencies:
flutter:
sdk: flutter
http: ^1.x.x
良い例です。
dependencies:
flutter:
sdk: flutter
http: ^1.x.x
flutter: と http: は、dependencies: より少し右にずれている必要があります。
手順5：Dartファイルで読み込む
httpパッケージを追加しただけでは、まだDartファイルの中では使えません。
使いたいファイルの上の方に、次の1行を追加します。
import 'package:http/http.dart' as http;
たとえば、lib/main.dart で使う場合は、次のようになります。
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(const MyApp());
}
as http と書くことで、httpパッケージの機能を http.get() のように呼び出せます。
これは後の節で、PokeAPIを呼び出すときに使います。
ここで一度、動作確認する
まだAPI通信はしません。
まずは、エラーが出ないかだけ確認します。
ターミナルで次のコマンドを実行してください。
flutter pub get
そのあと、アプリを起動します。
flutter run
エラーが出なければ、httpパッケージの追加は成功です。
よくあるエラー
1. package:http/http.dart が見つからない
次のようなエラーが出ることがあります。
Target of URI doesn't exist: 'package:http/http.dart'
この場合は、httpパッケージが正しく追加されていない可能性があります。
確認することは3つです。
| 確認すること | 対応 |
|---|---|
flutter pub add http を実行したか | まだなら実行する |
pubspec.yaml に http があるか | dependencies内を確認する |
flutter pub get を実行したか | 実行して依存関係を取得する |
2. pubspec.yamlでエラーが出る
pubspec.yaml のインデントがずれていると、エラーになります。
特に、手で http: を追加した場合に起きやすいです。
不安な場合は、手入力ではなく次のコマンドで追加してください。
flutter pub add http
この方法なら、基本的に正しい位置へ自動で追加されます。
3. VS Code上で赤線が消えない
パッケージを追加したのに、VS Codeで赤線が残ることがあります。
その場合は、次の順番で試してください。
flutter pub get
それでも直らなければ、VS Codeを再起動します。
Flutter拡張機能が読み込み直されることで、解消することがあります。
今回の完成コード
この節では、まだAPI通信の処理は書きません。
まずはhttpパッケージを読み込める状態にします。
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
/**
* アプリの起点になる関数。
*
* 入力: なし
* 出力: MyAppを起動する
*/
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
/**
* アプリ全体のUIを構築する関数。
*
* 入力: BuildContext
* 出力: MaterialApp
*/
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ポケモン図鑑',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
useMaterial3: true,
),
home: const PokemonHomePage(),
);
}
}
class PokemonHomePage extends StatelessWidget {
const PokemonHomePage({super.key});
/**
* ポケモン図鑑のトップ画面を構築する関数。
*
* 入力: BuildContext
* 出力: Scaffold
*/
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ポケモン図鑑'),
),
body: const Center(
child: Text('httpパッケージの追加が完了しました'),
),
);
}
}
この段階では、http を読み込んでいるだけです。
次の節で、実際に http.get() を使ってPokeAPIからデータを取得していきます。
確認問題
問1
Flutterで外部APIと通信するために、今回追加したパッケージは何ですか？
答え。
httpパッケージ
問2
httpパッケージを追加するコマンドはどれですか？
答え。
flutter pub add http
問3
Dartファイルでhttpパッケージを読み込むコードはどれですか？
答え。
import 'package:http/http.dart' as http;
まとめ
この節では、Flutterアプリにhttpパッケージを追加しました。
httpパッケージを使うことで、FlutterアプリからPokeAPIのような外部APIへアクセスできるようになります。
今回やったことは、次の3つです。
| 作業 | 内容 |
|---|---|
| パッケージ追加 | flutter pub add http を実行 |
| 依存関係確認 | pubspec.yaml に http が追加されたか確認 |
| Dartで読み込み | import 'package:http/http.dart' as http; を追加 |
ここまでできれば、API通信の土台は完成です。
次は、PokeAPIにアクセスして、Flutterアプリから実際にポケモンデータを取得します。