ListView
を使って、一覧 (リスト) を表示します。
一覧の表示
一覧の表示は、ほぼ全てのアプリ開発で必要とされる内容です。
Flutter には ListView
という、非常に強力な Widget があります。
今回、これを使ってシンプルな一覧を表現してみようと思います。
ListViewの書き方
基本的な、書き方は、
ListView(
children: <Widget>[
Text("listItem1"),
Text("listItem2"),
Text("listItem3"),
Text("listItem4"),
Text("listItem5"),
],
),
の様になります。

また、 scrollDirection
を Axis.horizontal
に指定すれば、横方向の ListView
が作られます。
ListView(
scrollDirection: Axis.horizontal, // ListViewのスクロールを横方向にする
children: <Widget>[
Text("listItem1"),
Text("listItem2"),
Text("listItem3"),
Text("listItem4"),
Text("listItem5"),
],
),

以上の画像で示されたように、ListView
はColumn
と Row
のように、縦または横に Widget を並べることができます。
そして、ListView
は要素が親 Widget からはみ出した場合にスクロールすることができます。
しかし、 ListView
をそのまま使用するケースはほとんどありません。
ListView.builder()を使う
ListView
を使わない理由として、以下の 2 つが挙げられます。
- 全ての要素を最初に作ってストックしておくので、要素数が多くなると、表示が遅くなり、バッテリー消費量も増えます。
- 一度生成されると並ぶ要素の数は決まってしまうので、要素数が変動するケースに対応できない。
ListView.builder
は、これら 2 つの問題を解決してくれます。
ListView.builder
には、重要なプロパティが 2 つあります。
itemCount
: ListView の要素数。通常はハードコーディングではなく、並べたいデータのlength
(要素の数)が入ります。itemBuilder
: 子要素の外見を決める。文字列を入れたい場合はText()
、コンテナを入れたい場合はContainer()
をリターンします。
// 0 ~ 99 までの 100 個の文字列を持つ List を生成する
const listItem = List.generate(100, (i) => '$i');
ListView.builder(
itemCount: listItem.length, //並べたい要素の数を指定する
itemBuilder: (context, int index) { // index はこの ListView における要素の番号
return Text(
'listItem' + listItem[index], // listItem の index 番目の要素を表示する
);
},
)
の様になります。

itemCount
に listItem.length
を代入することで、作られるリストの要素数は常に listItem
の長さと一致するので、
表示したいデータの量と関係なく、リストを簡単に記述できます。例えば、1 万個の要素を並べたい場合でも、上記の 8 行のコードだけで十分です。