Flutter Mobile Development · レッスン

ListView でスクロール可能なリストを作る

ListView、ListView.builder、項目間の区切りを使い、Flutter でスクロール可能なコレクションを効率的に表示します。

「ListView でスクロール可能なリストを作る」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFlutter Mobile Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why ListView?

Most apps show lists: messages, products, feeds. A ListView arranges its children in a scrollable column, handling overflow automatically when content exceeds the screen.

A Simple ListView

Pass a fixed set of children. Good for short, known lists.

ListView(
  children: [
    Text("Apple"),
    Text("Banana"),
    Text("Cherry"),
  ],
)

ListTile for Rows

ListTile is a ready-made row with leading icon, title, subtitle, and trailing widget, perfect for menus and settings.

ListTile(
  leading: Icon(Icons.person),
  title: Text("Ada Lovelace"),
  subtitle: Text("Mathematician"),
  trailing: Icon(Icons.chevron_right),
)

The Problem with Long Lists

A plain ListView builds every child up front. For hundreds of items this wastes memory and slows startup. We need lazy building.

ListView.builder

ListView.builder creates items on demand as they scroll into view, so only visible rows exist in memory.

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

itemCount and itemBuilder

itemCount tells Flutter how many rows exist; itemBuilder is called with each index to build that row. Omitting itemCount makes an infinite list.

Adding Separators

ListView.separated inserts a divider widget between items, keeping spacing consistent.

ListView.separated(
  itemCount: items.length,
  itemBuilder: (c, i) => ListTile(title: Text(items[i])),
  separatorBuilder: (c, i) => Divider(),
)

Horizontal Lists

Set scrollDirection: Axis.horizontal to scroll sideways, useful for carousels and chip rows.

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: tags.length,
  itemBuilder: (c, i) => Chip(label: Text(tags[i])),
)

Lists Inside Columns

A ListView wants unbounded height, which conflicts with a Column. Wrap it in Expanded to give it the remaining space.

Column(
  children: [
    Text("Header"),
    Expanded(
      child: ListView.builder(...),
    ),
  ],
)

Handling Taps

Make rows interactive with onTap on a ListTile or by wrapping items in GestureDetector/InkWell.

ListTile(
  title: Text(items[index]),
  onTap: () => print("Tapped " + items[index]),
)

Putting It Together

Use ListView.builder for performance, ListTile for clean rows, separated for dividers, and wrap in Expanded inside columns.

Quick Check

Test your understanding of Flutter lists.

Recap

You built scrollable lists:

ListView for short fixed lists
ListView.builder for efficient long lists
ListTile rows and separated dividers
Wrap in Expanded inside a Column

よくある質問

「ListView でスクロール可能なリストを作る」レッスンは無料ですか？

はい。「ListView でスクロール可能なリストを作る」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「ListView でスクロール可能なリストを作る」で何を学びますか？

ListView、ListView.builder、項目間の区切りを使い、Flutter でスクロール可能なコレクションを効率的に表示します。ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「ListView でスクロール可能なリストを作る」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Flutter Mobile Developmentに戻る