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

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

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

概要

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

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

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

  List<String> itemList = [];
  void buildItemList()async{
    var response = await fetchItems();
    for (int j = 0; j < response.data["items"].length; j++) {
      setState(() {
        itemList.add(response.data["items"][j]);
      });
     }
  }

List<String> itemList = [];

void buildItemList()async{

var response = await fetchItems();

for (int j = 0; j < response.data["items"].length; j++) {

setState(() {

itemList.add(response.data["items"][j]);

});

}

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

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

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

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

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

  @override
  void initState() {
    buildItemList();
    super.initState();
  }

@override

void initState() {

buildItemList();

super.initState();

}

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

Scaffold内にListView.builderで描画する

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter ListView.builderのサンプル"),
      ),
      body: Center(
        child: (itemList == null || itemList.length == 0)?
          Text("Loading....") :
          ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                 title: Text("${itemList[index]}"),
              )
            },
            itemCount: itemList.length
          )
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: (){
            print("pressed");
          },
          child: new Icon(
            Icons.cloud_upload,
            color: Colors.white,
          ),
        )
    );
  }

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Flutter ListView.builderのサンプル"),

body: Center(

child: (itemList == null || itemList.length == 0)?

Text("Loading....") :

ListView.builder(

itemBuilder: (BuildContext context, int index) {

return ListTile(

title: Text("${itemList[index]}"),

)

itemCount: itemList.length

)

floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,

floatingActionButton: FloatingActionButton(

backgroundColor: Colors.red,

onPressed: (){

print("pressed");

child: new Icon(

Icons.cloud_upload,

color: Colors.white,

)

);

}

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

じゃあね〜〜〜〜。