リストを表示する

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.builder()を使う

ListView を使わない理由として、以下の 2 つが挙げられます。

1. 全ての要素を最初に作ってストックしておくので、要素数が多くなると、表示が遅くなり、バッテリー消費量も増えます。
2. 一度生成されると並ぶ要素の数は決まってしまうので、要素数が変動するケースに対応できない。

ListView.builderは、これら 2 つの問題を解決してくれます。

ListView.builder には、重要なプロパティが 2 つあります。

1. itemCount : ListView の要素数。通常はハードコーディングではなく、並べたいデータの length （要素の数）が入ります。
2. 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 番目の要素を表示する
    );
  },
)

の様になります。

参考リンク

• ListView class - widgets library - Dart API