ListView.builder in Flutter

Create Free Backend With Appwrite

Introduction

ListView.builder is a highly efficient way to create lists that display a large number of items. It creates items as they’re scrolled onto the screen, which is ideal for lists with a large number of items.

Info

Note: Before learning ListView.builder, make sure you understand the basics of ListView.

Example 1: Basic ListView.builder

In this example below, you will learn how to create a simple list of items using ListView.builder.

ListView.builder(
  itemCount: 20,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)
Run Online

Example 2: To-Do List App

In this example below, you will learn how to create a simple to-do list app using ListView.builder.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List<String> tasks = [
    'Go to Gym',
    'Go to College',
    'Go to Office',
    // Add more tasks
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('To-Do List')),
        body: ListView.builder(
          itemCount: tasks.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(tasks[index]),
            );
          },
        ),
      ),
    );
  }
}
Run Online

Example 3: To-Do List App Using Using a Data Model

In this example below, you will learn how to create a to-do list app using Data Model and ListView.builder.

Step 1: Define the Data Model

First, we define a simple data model for a task.

class Task {
  final String title;
  final String subtitle;

  Task({
    required this.title,
    required this.subtitle,
  });
}
Info

Note: Data Model is a simple class that defines the structure of your data. This allows for a more structured and detailed representation of your data.

Step 2: Create Sample Data

Next, we create a list of sample tasks.

List<Task> tasks = [
  Task(
    title: 'Go to Gym',
    subtitle: 'Go to Gym at 6:00 AM',
  ),
  Task(
    title: 'Go to College',
    subtitle: 'Go to College at 8:00 AM',
  ),
  Task(
    title: 'Go to Office',
    subtitle: 'Go to Office at 11:00 AM',
  ),
  // Add more sample tasks
];
Step 3: Use ListView.builder

Now, we use ListView.builder to build the list.

ListView.builder(
  itemCount: tasks.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(tasks[index].title),
      subtitle: Text(tasks[index].subtitle),
    );
  },
)
Run Online

Example 4: Social Media Feed App

In this example below, you will learn how to create a social media feed app using ListView.builder. Click on run online button to see the output.

Step 1: Define the Data Model

First, we define a simple data model for a post.

class Post {
  final String username;
  final String userImageUrl;
  final String timestamp;
  final String contentText;
  final String contentImageUrl;

  Post({
    required this.username,
    required this.userImageUrl,
    required this.timestamp,
    required this.contentText,
    required this.contentImageUrl,
  });
}
Step 2: Create Sample Data

Next, we create a list of sample posts.

List<Post> posts = [
  Post(
    username: 'John Doe',
    userImageUrl: 'https://picsum.photos/250?image=237',
    timestamp: '2h',
    contentText: 'Enjoying the beautiful sunset at the beach!',
    contentImageUrl: 'https://picsum.photos/250?image=51',
  ),
  Post(
    username: 'Mark Doe',
    userImageUrl: 'https://picsum.photos/250?image=238',
    timestamp: '1d',
    contentText: 'Just got back from a fun vacation in the mountains.',
    contentImageUrl: 'https://picsum.photos/250?image=52',
  ),
  // Add more sample posts
];
Step 3: Build the ListView

Now, we use ListView.builder to build the list.

ListView.builder(
  itemCount: posts.length,
  itemBuilder: (BuildContext context, int index) {
    return Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ListTile(
            leading: CircleAvatar(backgroundImage: NetworkImage(posts[index].userImageUrl)),
            title: Text(posts[index].username),
            subtitle: Text(posts[index].timestamp),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(posts[index].contentText),
          ),
          Image.network(posts[index].contentImageUrl),
        ],
      ),
    );
  },
)
Run Online

Challenge

Create app using ListView.builder to display a scrollable list containing the names of your 10 friends, with each name as a separate item.