List View in Flutter

Create Free Backend With Appwrite

ListView In Flutter

ListView is a type of widget in Flutter used to display a list of items in a scrollable column or row. It’s similar to how you scroll through your contacts on a phone or through posts on a social media app. ListView is flexible and can be used for simple lists as well as more complex ones with different types of items.

Example 1: To Do List App

In this example below, you will learn how to create a simple to-do list app using ListView. Here’s how you can make a list with titles and subtitles for each task.

ListView(
  children: [
    ListTile(
      title: Text('Go to Gym'),
      subtitle: Text('Go to Gym at 6:00 AM'),
    ),
    ListTile(
      title: Text('Go to College'),
      subtitle: Text('Go to College at 8:00 AM'),
    ),
    ListTile(
      title: Text('Go to Office'),
      subtitle: Text('Go to Office at 11:00 AM'),
    ),
    // Add more ListTiles as needed
  ],
)
Run Online
Info

Note: ListTiles are a convenient way to create lists of items. They provide a leading icon, a title, and a subtitle. You can also add trailing icons if needed.

Example 2: Contact List App

In this example below, you will learn how to create a simple contact list using ListView with icons, names, numbers, and a call icon.

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('John Doe'),
      subtitle: Text('555-555-5555'),
      trailing: Icon(Icons.call),
    ),
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Jane Doe'),
      subtitle: Text('555-555-5555'),
      trailing: Icon(Icons.call),
    ),
    ListTile(
      leading: Icon(Icons.person),
      title: Text('John Smith'),
      subtitle: Text('555-555-5555'),
      trailing: Icon(Icons.call),
    ),
  ],
)
Run Online

In this example below, you will learn how to create a photo gallery app using ListView. You can change the scroll direction to horizontal to create a horizontal photo gallery.

ListView(
  // try changing to `scrollDirection: Axis.horizontal` to see horizontal list
    scrollDirection: Axis.horizontal,
    children: [
      Image.network('https://picsum.photos/250?image=9'),
      Image.network('https://picsum.photos/250?image=10'),
      Image.network('https://picsum.photos/250?image=11'),
      Image.network('https://picsum.photos/250?image=12'),
      Image.network('https://picsum.photos/250?image=13'),
      Image.network('https://picsum.photos/250?image=14'),
      Image.network('https://picsum.photos/250?image=15'),
    ],
)
Run Online

Example 4: Reverse List

In this example below, you will learn how to reverse a list using ListView. You can use the reverse property to reverse the order of the list.

ListView(
  reverse: true,
  children: [
    ListTile(
      title: Text('Go to Gym'),
      subtitle: Text('Go to Gym at 6:00 AM'),
    ),
    ListTile(
      title: Text('Go to College'),
      subtitle: Text('Go to College at 8:00 AM'),
    ),
    ListTile(
      title: Text('Go to Office'),
      subtitle: Text('Go to Office at 11:00 AM'),
    ),
    // Add more ListTiles as needed
  ],
)
Run Online

Challenge

Create a restaurant app that displays a list of dishes. Each dish should have a name, description, and price.