Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い

ListViewは、Flutterで縦や横にスクロールする一覧を作るWidgetです。設定項目は多いですが、最初はchildren、builder、scrollDirection、Column内での高さ指定だけ押さえれば十分です。

この記事の結論

少ない固定項目ならListView(children: …)、件数が多い・APIで変わるならListView.builderを使います。Columnの中に入れる時は高さ制約にも注意します。

基本のListView

ListView(
  children: const [
    ListTile(title: Text("りんご")),
    ListTile(title: Text("みかん")),
    ListTile(title: Text("バナナ")),
  ],
)

ListView.builderとの違い

• ListView：固定の少数項目に向く
• ListView.builder：大量または可変件数に向く
• childrenは最初に全部Widgetを作る
• builderは必要な分だけ作る

横スクロールにする

SizedBox(
  height: 120,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: List.generate(
      10,
      (index) => Container(
        width: 100,
        margin: const EdgeInsets.all(8),
        color: Colors.blue.shade100,
        child: Center(child: Text("$index")),
      ),
    ),
  ),
)

Column内で使う時の注意

Columnの中にListViewを直接置くと、高さが決まらずエラーになることがあります。ExpandedやSizedBoxで高さを与えます。

Column(
  children: [
    const Text("一覧"),
    Expanded(
      child: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(title: Text("Item $index"));
        },
      ),
    ),
  ],
)

実装後に確認すること

• 固定件数か可変件数かを判断しているか
• Column内で高さ制約を与えているか
• 横スクロールでは高さを指定しているか
• 大量データにchildrenを使っていないか

よくあるつまずき

• Columnの中でListViewが高さエラーになる
• 横スクロールなのに高さを指定しない
• API取得をbuildやitemBuilder内で繰り返す
• 少数リストと大量リストの書き方を混同する

次に読む記事

• Flutter ListView.builderの使い方｜大量リストを効率よく表示する基本 — FlutterのListView.builderを初心者向けに解説します。itemCount、itemBuilder、ListTile、動的リスト表示、通常のListViewとの違いを整理します。
• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
• Flutter SizedBoxの使い方｜余白・固定サイズ・スペーサーの基本 — FlutterのSizedBoxを初心者向けに解説します。固定サイズ、余白、Widget間のスペース、Containerとの違いを実装例で整理します。

まとめ

ListViewはFlutterの一覧UIの基本です。childrenとbuilderの違い、横スクロール、Column内の高さ制約を押さえて、記事一覧や商品一覧へ応用しましょう。