ListView.builderの使い方

はじめに

Flutterでアイテムを縦に並べるときに使用する
ソーシャルメディアのタイムラインのイメージ

方法

タイトルにある通り、ListView Widgetを利用
このウィジェットの中のbuilderメソッドを使うことで動的にリストを生成することが可能

builderの使い方

builder内の書き方を解説

引数

itemBuilder
itemCount

itemBuilder

リストを作ってくれる
BuildContext contextとint indexを引数にした、無名関数を書く
contextは、画面表示内容を生成するために必要なもの（詳しいことわかりません。ごめんなさい。）
indexは、1行目、2行目、3行目、、、と増加していくインクリメンタ。下のitemCountを設定していないと、無限に増加しようとする

itemCount

リストにするアイテムの数を指定
指定しないと無限にリストを生成する、または、配列内のアイテムの個数を超過するとエラーが発生
よって、配列の長さを渡しておくのがよい

コードと画面イメージ

コード

※runAppなどは含めていない

  static const _userNames = <String>[
    'Alex',
    'Bob',
    'Cathy',
    'David',
    'Edward',
    'Frank',
    'George',
    'Henry',
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index){
          String rtnStr = _userNames[index];
          return Container(
              padding: EdgeInsets.all(8.0),
              child: Text('$rtnStr'),);
        },
        itemCount: _userNames.length,
      ),
    );
  }

画面イメージ

以下の通り、上から配列（_userNames）の内容が表示される
※ヘッター、フッターは上記のコードでは生成されない

参考にした記事

ListView, Flutter Doc Jp