見出し画像

【Flutter】シンプルメモ帳作ろう1~ListViewでコンテンツの一覧表示

モバイルアプリ開発の定番のリスト表示に使用するListViewに関してです。
任意のオブジェクトを参照しListViewでコンテンツの一覧表示を行います。
メモ帳で言うところの記事の一覧(articles)として利用します。

画像1

■ソースコード(一部抜粋)
リスト化したいオブジェクト(今回の場合は記事一覧(articles))を、
ListViewにその配列の要素数を渡し★1、itemBuilder内で繰り返される処理の中でオブジェクトの属性を参照する★2

// オブジェクト配列でカード表示を行う
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
// ★1 配列のデータ数分カード表示を行う
itemCount: articles.length,
itemBuilder: (BuildContext context, int index) {
 return Card(
     child: InkWell(
         onTap: () {
           debugPrint("tap : " +
               '${articles[index].title}');
           _editArticle(articles[index]);
         },
         child: Column(children: <Widget>[
           ListTile(
             title:
                 // ★2 オブジェクトの属性(タイトル属性)を参照する
                 Text(
                   '${articles[index].title}',
                 ),
             subtitle: Row(
                 mainAxisAlignment:
                     MainAxisAlignment
                         .spaceBetween, // 両端に寄せる
                 children: <Widget>[
                   Text(formatStr('${articles[index].body}')),
                   Text(
                       "更新日:${articles[index].updateDate}",
                       style:
                           TextStyle(fontSize: 10))
                 ]),
             trailing: IconButton(
               icon: new Icon(Icons.delete),
               onPressed: () {
                 // 削除の確認ダイアログを表示
                 _confirmDeleteDialog(articles[index].id);
               },
             ),
           )
         ])));
}));

公式のリファレンスは下記です。

■ソースコード(全体)
↓にシンプルメモ帳アプリの全ソースコードをアップしています。


この記事が気に入ったらサポートをしてみませんか?