【Flutter】ListView.builderでリストを作成する基本的な方法とプロパティ紹介

2020年11月13日 07:00

ListView.builderについては、LINEのようなメッセージアプリのUI作成を例に詳しく説明した動画をFlutterラボで公開しています。
以下のURLから確認できますのでそちらもご覧ください。

この記事では、3色のContainerを表示していくリストを例に解説していきます。

基本的な使い方

ListView.builderはitemBuilderプロパティで返すWidgetを複数生成するウィジェットです。

List<Color> colorList = [Colors.cyan, Colors.deepOrange, Colors.indigo];

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text('ListView.builder'),
     centerTitle: true,
   ),
   body: ListView.builder(
     itemBuilder: (BuildContext context, int index) {
       return Container(
         height: 80,
         color: colorList[index % colorList.length],
       );
     },
   )
 );
}

これだと無限にリストが生成されてしまうので、次は生成する個数を設定します。

リストを生成する数を設定する

生成する数は、itemCountプロパティで設定します。

ListView.builder(
 itemCount: 12, // この行を追加
 itemBuilder: (BuildContext context, int index) {
   return Container(
     height: 80,
     color: colorList[index % colorList.length],
   );
 },
)

これで12個だけ生成されるようになります。
itemCountに設定する値は、List型のlengthメソッドが用いられることも多いです。

itemCount: colorList.length,

リストを下から生成する

リストを上ではなく、逆から生成するときは、reverseプロパティをtrueに設定します。

ListView.builder(
 reverse: true, // この行を追加
 itemCount: colorList.length,
 itemBuilder: (BuildContext context, int index) {
   return Container(
     height: 80,
     color: colorList[index % colorList.length],
   );
 },
)

LINE等のメッセージを送信し合うページのメッセージ一覧はこのようにリストが下から生成されています。

横向きにスクロールするリストを作る

これまでは、上下方向にスクロールしていましたが、scrollDirectionプロパティを変更すれば、左右方向にスクロールするようにもできます。

ListView.builder(
 scrollDirection: Axis.horizontal,
 itemBuilder: (BuildContext context, int index) {
   return Container(
     width: 80,
     color: colorList[index % colorList.length],
   );
 },
)