CONTENT
ここから
この章では、FlutterアプリからAPIを呼び出し、取得したデータを画面に表示する流れを学びました。
最初はただの画面だったアプリが、PokéAPIとつながり、ポケモン番号で検索できる小さな図鑑アプリになりました。
この章で作ったもの
この章では、次のようなアプリを作りました。
ポケモン番号を入力
↓
検索ボタンを押す
↓
PokéAPIからデータを取得
↓
名前・画像・番号をカードUIで表示
↓
失敗時はエラーを表示
ただ表示するだけではなく、通信中のローディングやエラー対応も入れました。
ここまでできると、かなり実用アプリに近づきます。
学んだこと
| 学んだ内容 | 使ったもの |
|---|---|
| API通信の準備 | http パッケージ |
| APIを呼び出す | http.get() |
| JSONを変換する | jsonDecode() |
| 入力値を取得する | TextField / TextEditingController |
| 画像を表示する | Image.network() |
| 通信中を表示する | CircularProgressIndicator |
| エラーを受け止める | try-catch |
| 見た目を整える | Card / Padding / Color |
忙しい方はここだけ見て
FlutterでAPI連携を作る基本の流れは、次の通りです。
final Uri url = Uri.https(
'pokeapi.co',
'/api/v2/pokemon/$pokemonId',
);
final http.Response response = await http.get(url);
final Map<String, dynamic> data =
jsonDecode(response.body) as Map<String, dynamic>;
final String name = data['name'] as String;
APIから返ってきたJSONは、そのままでは扱いにくいです。
jsonDecode() でMapに変換し、data['name'] のように必要な値を取り出します。
この章の重要ポイント
1. API通信は時間がかかる
API通信は、ボタンを押した瞬間に必ず結果が返るとは限りません。
そのため、async と await を使いました。
final Map<String, dynamic> data = await fetchPokemonData(pokemonId);
この書き方によって、APIの結果を待ってから次の処理に進めます。
2. 入力値は必ずチェックする
TextField に入力された値は文字列です。
数字として使うには、変換が必要です。
final int? pokemonId = int.tryParse(_pokemonIdController.text);
int.tryParse() を使うと、空欄や文字入力でもアプリが止まりにくくなります。
3. API失敗を想定する
存在しない番号や通信エラーは、普通に起こります。
そのため、API通信は try-catch で囲みました。
try {
final Map<String, dynamic> data = await fetchPokemonData(pokemonId);
} catch (error) {
setState(() {
_errorMessage = 'ポケモンを取得できませんでした';
});
}
失敗しても、画面にメッセージを出せば、ユーザーは次の行動を取りやすくなります。
4. ローディング表示で親切にする
通信中に何も表示されないと、ユーザーは不安になります。
そこで、_isLoading を使って状態を管理しました。
bool _isLoading = false;
通信中は、次のWidgetを表示しました。
const CircularProgressIndicator()
小さな工夫ですが、アプリの使いやすさは大きく変わります。
完成したアプリの機能
この章の最後に完成したアプリには、次の機能があります。
| 機能 | 内容 |
|---|---|
| 番号検索 | ポケモン番号を入力して検索できる |
| API通信 | PokéAPIからデータを取得できる |
| 名前表示 | ポケモン名を表示できる |
| 画像表示 | API画像を表示できる |
| カードUI | 検索結果を見やすく表示できる |
| ローディング | 通信中の状態を表示できる |
| エラー表示 | 取得失敗時にメッセージを出せる |
よく使ったコード
この章で何度も出てきた大事なコードです。
import 'dart:convert';
import 'package:http/http.dart' as http;
final http.Response response = await http.get(url);
final Map<String, dynamic> data =
jsonDecode(response.body) as Map<String, dynamic>;
setState(() {
_pokemonName = name;
});
Image.network(_pokemonImageUrl!)
これらは、他のAPI連携アプリでもよく使います。
天気アプリ、ニュースアプリ、商品検索アプリ、AIチャットアプリなどにも応用できます。
確認問題
問1
FlutterでAPI通信を行うために使ったパッケージは何ですか？
答え。
http
問2
APIから返ってきたJSON文字列をMapに変換する関数は何ですか？
答え。
jsonDecode()
問3
インターネット上の画像を表示するWidgetは何ですか？
答え。
Image.network()
問4
API通信中の表示に使ったWidgetは何ですか？
答え。
CircularProgressIndicator
問5
API取得に失敗したときの処理を書く構文は何ですか？
答え。
try-catch
まとめ
この章では、FlutterでAPI連携アプリを作る基本を学びました。
大事なのは、次の流れです。
入力する
↓
APIを呼び出す
↓
JSONをMapに変換する
↓
必要な値を取り出す
↓
画面に表示する
↓
失敗時はエラーを出す
この流れを理解できれば、PokéAPI以外のAPIにも応用できます。
API連携は、アプリを一気に「外の世界とつながる道具」に変えてくれます。
世界が広がったところで、自分でどんなアプリが作れそうか考えてみましょう。