【Flutter】APIを叩いて猫の画像を表示させてみる

ありがたいことに、ネット上には便利なAPIが多数公開されていて、開発者はそれを使って簡単にいい感じの機能を実装することができます。

今回はランダムで猫の画像が表示されるアプリを作ってみました👇

コード全文

ここにサンプルを置いておくので動かしてみてください。
https://github.com/sugawarakensuke/package_samples

version

• Flutter 3.3.9
• Dart 2.18.5

使ったAPIの紹介

こちらのrandom catAPIを使わせてもらいました。猫画像のURLをJSON形式でランダムで返してくれるAPIです。ユニークですね〜
https://aws.random.cat/meow

APIを叩いて、非同期でデータを取得する

①httpパッケージをインポート

まずhttpを使えるようにします。
ここからインストールします👉 https://pub.dev/packages/http/install
その後flutter pub get

そしたら実際に使うファイルにインポートします。

import 'package:http/http.dart' as http;
import 'package:http/http.dart';

②APIを叩く

このメソッドでAPIを叩いて、データを取得しています。まずはstatefulWidgetのinitState()内で前もって取得します。

@override
  void initState() {
    data = http.get(Uri.parse('https://aws.random.cat/meow'));
    super.initState();
  }

そしてそのdataをFutureBuilderのfutureプロパティに設定します。FutureBuilderについては後述。

FutureBuilder(
    future: data,
    builder: (context, AsyncSnapshot<Response?> snapshot) {
      //
    }
)

③取得したデータを表示できる形に整えて使う

非同期で取得した値を使って表示するにはFutureBuilderというWidgetを使うとよいです。
FutureBuilderを使えばFutureの最新の状態を特定でき、データの読み込み中と読み込み完了時の表示を選択することができます。
今回はsnapshot.connectionState != ConnectionState.doneつまり通信中の場合はぐるぐるを表示させて、
そうじゃない場合にデータをJSONからデコードして表示させています。

FutureBuilder(
  future: data,
  builder: (context, AsyncSnapshot<Response?> snapshot) {
    //通信状態がdoneじゃない場合（=まだ通信中な場合）
    if (snapshot.connectionState != ConnectionState.done) {
      return Container(
        height: 300,
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      );
    } else {
      //通信が終わってる場合
      final response = snapshot.data;
      final url = jsonDecode(response!.body)['file'];
      return Container(height: 300,child: Image.network(url));
    }
  },
),

参考

FutureBuilderの使い方: https://www.youtube.com/watch?v=zEdw_1B7JHY
面白いAPIのまとめ記事: https://qiita.com/danishi/items/42d8adf6291515e62284

さいごに

いろんなAPIがあって楽しいです!うまく使えば面白い機能を作れそうです!