シェアする

Flutter ListView.builderを使ってサーバーから取得したデータをリストで表示する

Flutter ListView.builderを使ってサーバーから取得したデータをListTileやCardで表示する

ListViewはFlutterで最もよく使うWidgetだと思う。
FlutterのサンプルでもListView+ListTileの記事はよくあるけど、
APIなど外部のサーバーから取得したJSONなりのデータを
リスト表示する方法を書き溜めておく。

注意点として、状態管理にはsetStateを利用しています。
blocやproviderとかでもいいと思うんだけど
今回は簡単に実装できるsetStateでのListViewです。

広告

ListView.builderとListTileを使ってリストで表示する手順

サーバーと通信するデータ取得用の非同期関数を作る

まず、APIからのデータを格納するためのitemList変数を宣言します。
その後、例としてbuildItemsという、文字列リストを作る非同期関数を作成します。

fetchItems();は、実際にAPIサーバと通信し、
データを取得する関数です。
これについてはDioを使うのがいいです。
実装については、前に書いた記事をよんでね。

Flutter dio で jsonリクエスト方法と使い方

Dioは、ぱぱっと使えるのでよい。
headersへの設定も簡単でJWT(JSON Web Token)を使った認証もらくらくできます。

initStateにデータ取得用関数を記述する

先程の関数はページを初期化する際のinitState内に記述します。
buildItemList()を読んでデータ取得を開始します。

super.initStateの前に書いたほうがいいはず。

Scaffold内にListView.builderで描画する

先程、initStateでitemListにデータが非同期に追加されていくため、
最初は、0個のitemListは「Loading..」が表示される。
initStateでデータ取得後、itemListの状態がsetStateが呼ばれたことで更新されると、
ListView.builder内のitemBuilderが走りいい感じのTileListがリストで表示される。

いやー。
簡単だね。ListTile以外にもCard Widget使ったり
応用できる部分は多々あるので使ってみてね。



じゃあね〜〜〜〜。