Flutter ListView.builderの使い方｜大量リストを効率よく表示する基本

ListView.builderは、項目数が多いリストを効率よく表示するためのWidgetです。画面に必要な分だけ項目を作るため、API結果や商品一覧、記事一覧の表示に向いています。

この記事の結論

固定の少数リストならListViewのchildren、大量または可変データならListView.builderを使います。まずはitemCountとitemBuilderの役割を覚えましょう。

最小コード

final items = List.generate(20, (index) => "Item $index");

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

itemCountとitemBuilderの役割

• itemCount：何件表示するか
• itemBuilder：indexごとにどのWidgetを作るか
• index：0から始まる番号
• ListTile：リスト1行の基本Widget

カード風に表示する

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        leading: CircleAvatar(child: Text("${index + 1}")),
        title: Text(items[index]),
        subtitle: const Text("説明文"),
      ),
    );
  },
)

APIデータに置き換える考え方

最初はList<String>で確認し、次にList<Map>やModelクラスへ置き換えます。API取得、ローディング、エラー表示は別の記事で扱うと分かりやすくなります。

実装後に確認すること

• itemCountがデータ件数と一致しているか
• indexで範囲外アクセスしていないか
• 大量リストなのにchildrenへ全部書いていないか
• 読み込み中や空状態を別途用意しているか

よくあるつまずき

• itemCountを書かずに意図しない件数になる
• index + 1とindexを混同する
• ListViewをColumnの中に直接置いて高さエラーにする
• API取得処理をitemBuilder内で実行する

次に読む記事

• Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い — FlutterのListViewを初心者向けに解説します。childrenで作る基本、ListView.builderとの違い、横スクロール、Column内での注意点を整理します。
• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
• Dartのデータ型｜int・double・String・bool・null安全を初心者向けに解説 — Dartの基本データ型を初心者向けに解説します。int、double、String、bool、List、Map、null安全、型推論の使い分けを確認します。

まとめ

ListView.builderは、可変件数や大量リストを扱うFlutterアプリの基本です。itemCount、itemBuilder、ListTileを理解し、APIや検索機能へ発展させましょう。