Introduction to ListView in Flutter

Flutter is one of the most powerful frameworks for building cross-platform mobile applications. One of the most common UI patterns in almost every mobile app is displaying data in a scrollable list. Whether you are building a chat application, a news feed, a to-do list, or a product catalog, you will almost always use some form of a list.

In Flutter, the ListView widget is the primary tool for creating scrollable lists. It provides a rich set of functionalities, supports both vertical and horizontal scrolling, and allows developers to easily create both simple and complex lists.

In this post, we will take a deep dive into the ListView widget, focusing on:

Basics of scrolling lists.
Using the children property.
Simple examples to demonstrate how ListView works.

By the end, you will understand the foundation of ListView in Flutter, enabling you to create practical and user-friendly scrolling lists.

Basics of Scrolling Lists

The primary purpose of ListView is to display widgets in a scrollable column. Without ListView, widgets in a column may overflow if the screen is small. Let’s start with the basics.

1. Why Use ListView?

Consider this scenario: you are displaying multiple Text widgets in a Column. If the number of items is greater than what the screen can display, you will see a “RenderFlex overflowed” error.

Example without ListView:

Column(
  children: [
Text("Item 1"),
Text("Item 2"),
Text("Item 3"),
// ... add more items  ],
);

If the list is too long, it will cause an overflow error.

With ListView, you can solve this problem because it allows scrolling.

2. Default Scrolling Direction

By default, ListView scrolls vertically. This is the most common type of list in mobile apps (e.g., chat messages, feeds, contact lists).

However, you can also set the scrollDirection property to Axis.horizontal to create horizontal scrolling lists.

3. ListView Structure

The simplest form of ListView looks like this:

ListView(
  children: [
Text("Item 1"),
Text("Item 2"),
Text("Item 3"),  ],
);

Here:

ListView is the parent widget.
children is a list of widgets to display.
Each child can be any widget (Text, Container, Card, etc.).

4. Single-Child Scroll vs Multi-Child List

Flutter also provides SingleChildScrollView, which allows one child (that can contain multiple widgets like a Column) to scroll. But unlike ListView, it doesn’t optimize performance for large lists.

Use SingleChildScrollView for short, static content.
Use ListView for lists that can grow large.

Using the Children Property

The children property is one of the simplest ways to create a ListView. It accepts a list of widgets and displays them in a scrollable fashion.

1. Syntax of Children Property

ListView(
  children: <Widget>[
ListTile(
  leading: Icon(Icons.person),
  title: Text("John Doe"),
  subtitle: Text("Online"),
),
ListTile(
  leading: Icon(Icons.person),
  title: Text("Jane Doe"),
  subtitle: Text("Offline"),
),  ],
);

In this example:

We used ListTile to create structured list items.
The children property directly contains widgets.

2. When to Use Children Property

The children property is best suited when:

The number of list items is small and fixed.
You don’t expect the list to grow dynamically.
You want a straightforward and easy-to-read layout.

For example, a settings page with 5–10 options.

3. Performance Considerations

Using children creates all widgets at once. If you add 1,000 widgets, all 1,000 will be created immediately, which is not efficient. For large lists, Flutter provides ListView.builder (we’ll cover this in another post).

For now, remember:

Use children for small lists.
Use builder for large or dynamic lists.

Simple Examples of ListView

Let’s walk through practical examples of how ListView works with the children property.

Example 1: A Simple Text List

ListView(
  children: [
Text("Item 1"),
Text("Item 2"),
Text("Item 3"),
Text("Item 4"),
Text("Item 5"),  ],
);

This will display 5 items in a scrollable vertical list. If the screen cannot show all items, you can scroll.

Example 2: List with Containers

ListView(
  children: [
Container(
  height: 100,
  color: Colors.red,
  child: Center(child: Text("Red Box")),
),
Container(
  height: 100,
  color: Colors.green,
  child: Center(child: Text("Green Box")),
),
Container(
  height: 100,
  color: Colors.blue,
  child: Center(child: Text("Blue Box")),
),  ],
);

Here, each container takes a height of 100. When more containers are added, the list becomes scrollable.

Example 3: List of ListTiles

The ListTile widget is commonly used in ListView because it provides a ready-made layout with a leading widget (icon or image), a title, a subtitle, and a trailing widget (like an arrow or button).

ListView(
  children: [
ListTile(
  leading: Icon(Icons.home),
  title: Text("Home"),
  subtitle: Text("This is the home screen"),
  trailing: Icon(Icons.arrow_forward),
),
ListTile(
  leading: Icon(Icons.settings),
  title: Text("Settings"),
  subtitle: Text("Manage your preferences"),
  trailing: Icon(Icons.arrow_forward),
),
ListTile(
  leading: Icon(Icons.contact_mail),
  title: Text("Contact"),
  subtitle: Text("Get in touch"),
  trailing: Icon(Icons.arrow_forward),
),  ],
);

This example is perfect for creating settings menus or navigation lists.

Example 4: Horizontal ListView

To create a horizontal scrollable list, use the scrollDirection property.

ListView(
  scrollDirection: Axis.horizontal,
  children: [
Container(
  width: 150,
  color: Colors.red,
  child: Center(child: Text("Item 1")),
),
Container(
  width: 150,
  color: Colors.green,
  child: Center(child: Text("Item 2")),
),
Container(
  width: 150,
  color: Colors.blue,
  child: Center(child: Text("Item 3")),
),  ],
);

Now, the list scrolls horizontally instead of vertically.

Example 5: Mixed Widgets in a ListView

You don’t have to stick to one widget type. You can mix and match:

ListView(
  children: [
Text("Header: Recent Activities"),
ListTile(
  leading: Icon(Icons.check),
  title: Text("Task Completed"),
),
Container(
  height: 50,
  color: Colors.yellow,
  child: Center(child: Text("Custom Box")),
),
ListTile(
  leading: Icon(Icons.warning),
  title: Text("Warning Message"),
),  ],
);

This demonstrates that a ListView can contain any widget, not just text or tiles.

When Not to Use ListView with Children

While the children property is useful, it is not always the best choice. You should avoid it when:

The list size is unknown or can grow very large.
Items need to be loaded dynamically (like API data).
You need more advanced features like separators or infinite scrolling.