Flutter Widget ListView

ListView

• スクロール可能なウィジェットのリスト
• ListView.builderを使用して作成することで、動的なリストが作成できる
• ListView.separatedを使用して作成することで、リストの要素の間に区切りを設定することができる api.flutter.dev

普通のListView

• ListViewに表示される可能性のあるすべての子要素に対して処理を行うため、子要素の数が少ないリストに適している

• 子要素の数が変更される場合があるなら、ListView.builderを使ったほうがいい

• 公式サンプルコード

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

ListView.builder

• 表示する子要素を事前に用意しておく必要がないので、多くの子要素を持つリストや、動的なリストの表示に使用する
• itemBuilderには、非Nullのウィジェットを設定し、ウィジェットのインスタンスを返すようにする。
• 子要素の並び替えはサポートしていないので、後から子要素の順番を変更する場合は、ListViewやListView.customを使用したほうがいいらしい

• itemBuilderの指定は必須

• 公式サンプルコード

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);