Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】ListView.builderでリストを作成する基本的な方法とプロパティ紹介
2020.11.12
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],
);
},
)
);
}
![画像1](https://assets.st-note.com/production/uploads/images/38643210/picture_pc_b915f0b7e589c3b29e75eaa9737c8d0b.gif)
これだと無限にリストが生成されてしまうので、次は生成する個数を設定します。
リストを生成する数を設定する
生成する数は、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],
);
},
)
![画像2](https://assets.st-note.com/production/uploads/images/38643830/picture_pc_a51c081b1801267323cb8b8e1fdcd4f8.png)
LINE等のメッセージを送信し合うページのメッセージ一覧はこのようにリストが下から生成されています。
横向きにスクロールするリストを作る
これまでは、上下方向にスクロールしていましたが、scrollDirectionプロパティを変更すれば、左右方向にスクロールするようにもできます。
ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 80,
color: colorList[index % colorList.length],
);
},
)
![画像3](https://assets.st-note.com/production/uploads/images/38644255/picture_pc_959362433cb79d0d86fb7fb648ffd349.gif)
![List型の活用法を集中学習!定義の仕方から基礎メソッドの活用法まで理解しよう!](https://firebasestorage.googleapis.com/v0/b/flutter-labo.appspot.com/o/course%2Fshort%2Flist_lecture.png?alt=media&token=734ea071-d213-401d-aa32-7934d844348a)
17min
プレミアム会員
見放題
List型の活用法を集中学習!定義の仕方から基礎メソッドの活用法まで理解しよう!
2021.06.18
¥500
![メソッドを引数で渡す!コールバック関数の活用方法を解説](https://firebasestorage.googleapis.com/v0/b/flutter-labo.appspot.com/o/course%2Fshort%2Fcall_back_function.png?alt=media&token=5df797f9-4ffa-431c-b9b7-bb777779ea03)
8min
プレミアム会員
見放題
メソッドを引数で渡す!コールバック関数の活用方法を解説
2021.08.06
¥500
![Firestoreで扱えるデータ型を解説](https://firebasestorage.googleapis.com/v0/b/flutter-labo.appspot.com/o/course%2Fshort%2Ffirestore_data_type.png?alt=media&token=c9429f13-a614-48a1-b06a-4bb5e9881fc9)
12min
プレミアム会員
見放題
Firestoreで扱えるデータ型を解説
2023.01.07
¥500
147min
プレミアム会員
見放題
Flutter開発で最低限知っておきたいDartの基礎知識
2024.08.31
¥6,000
ソースコード ダウンロード可
![【型変換】データ型を異なるものへ変換する方法を解説!](https://firebasestorage.googleapis.com/v0/b/flutter-labo.appspot.com/o/course%2Fshort%2Fconvert.png?alt=media&token=eba119ed-e491-4765-9886-49d8aabb516e)
19min
プレミアム会員
見放題
【型変換】データ型を異なるものへ変換する方法を解説!
2021.07.23
¥500
![Map型の使い方を学習しよう!定義の仕方からメソッドの活用まで徹底解説!](https://firebasestorage.googleapis.com/v0/b/flutter-labo.appspot.com/o/course%2Fshort%2Fmap.png?alt=media&token=ebd63573-201f-468c-bbc5-4c2d6dc3a846)
18min
プレミアム会員
見放題
Map型の使い方を学習しよう!定義の仕方からメソッドの活用まで徹底解説!
2021.07.16
¥500
![【Dart】Stringからint, double, DateTimeに変換する](https://assets.st-note.com/production/uploads/images/34579094/rectangle_large_type_2_57f8b9d22b8edd5dd7bcca6d883ef3fb.jpeg)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
![【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34640890/rectangle_large_type_2_9cd3518ec86a8d45eb0db093426082d1.jpeg)
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
![【Dart】【Flutter】DateTime型についてのまとめ](https://assets.st-note.com/production/uploads/images/35816882/rectangle_large_type_2_5d153bec6a1387e9a7cd068fa193bae4.jpeg)
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
![【Dart】Map型の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34593663/rectangle_large_type_2_444b0971465392f471f0be9b1ce9b91b.jpeg)
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13