Flutter Mobile Development · Урок

Создание прокручиваемых списков с ListView

Эффективно отображайте прокручиваемые коллекции во Flutter с помощью ListView, ListView.builder и разделителей элементов.

«Создание прокручиваемых списков с ListView» — бесплатный урок Flutter Mobile Development на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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/7) и разблокировать остальной курс Flutter Mobile Development, подпишись на CoddyKit PRO. Курс Flutter Mobile Development содержит 4 уроков всего.

Чему я научусь в уроке «Создание прокручиваемых списков с ListView»?

Эффективно отображайте прокручиваемые коллекции во Flutter с помощью ListView, ListView.builder и разделителей элементов. Ты практикуешь Flutter Mobile Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Flutter Mobile Development?

Предыдущий опыт не требуется. Flutter Mobile Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Создание прокручиваемых списков с ListView»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Flutter Mobile Development?

Да. Каждый урок Flutter Mobile Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Виджеты Stateless и Stateful
Базовые виджеты компоновки
Интерактивные элементы интерфейса
Создание прокручиваемых списков с ListView

← Назад к Flutter Mobile Development