🗂

【Flutter】Widgetの初期表示時にAPIでデータを取得する

2021/05/02に公開

概要

FlutterでJSONデータのHTTP通信にある通り、Flutterではけっこう簡単にRESTのAPIでデータを取得できます。ただ、RESTの通信は非同期で行われますので、APIでデータを取得した後にWidgetを表示する、というのをどういうふうにやれば良いのかというのを今回記事にまとめます。

前提

Flutterのバージョンは2.0で動作確認しています。（1系のバージョンでも変わらないとは思うけど）
FltterWebで動作確認しています。（ネイティブアプリでも変わらないとは思うけど）

対応

Create your first API Call in Flutterの記事のコードサンプルにある通り、FutureBuilderを使うのが方法の一つとしてあげられます。 FutureBuilderについては[Flutter] FutureBuilderを使って非同期でWidgetを生成するの記事にある通り、非同期でWidgetを生成することができます。これを使えば、APIでデータを取得した後にWidgetを表示が実現できそうです。

実装サンプル

上記の記事の内容のほぼそのままですが、実装サンプルをのせておきます。

sample.dart

・
・
・
class _SampleAppHome extends State<SampleAppHome> {

  // 初期表示時に呼ぶAPIからの取得のコールメソッド
  Future<List> getApiData() async {
    var url = Uri.parse(env['API_DOMMIN'] + "/getData");
    var resp = await http.get(url);
    return json.decode(resp.body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: new Container(
	    // ここで非同期でWidgetを生成
            child: new FutureBuilder<List>(
                future: getApiData(),
                builder: (context, snapshot) {
		  // APIの結果の取得
                  if (snapshot.hasData) {
                    var data = snapshot.data;
                  }
		  // ここはお好みのWidgetで
                  return new ListView.builder(
		  ・
		  ・
		  ・
		  );
                })));
  }

}

概要

前提

対応

実装サンプル

Discussion