ListView.builder in Flutter

Introduction

ListView.builder helps you show a long list of items on the screen efficiently. It creates only the items you see, saving memory and making your app faster.

When you want to show a long list of messages in a chat app.

When displaying a list of contacts or friends.

When showing a list of products in a shopping app.

When you want to load items as the user scrolls down.

When the list size is unknown or very large.

Syntax

Flutter

ListView.builder(
  itemCount: numberOfItems,
  itemBuilder: (BuildContext context, int index) {
    return WidgetForItem(index);
  },
)

itemCount tells how many items to build.

itemBuilder is a function that creates each item widget using the current index.

Examples

Shows 5 text items labeled Item 0 to Item 4.

Flutter

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

Shows nothing because itemCount is zero.

Flutter

ListView.builder(
  itemCount: 0,
  itemBuilder: (context, index) {
    return Text('No items');
  },
)

Builds a list of tiles from a list of strings called items.

Flutter

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

Sample App

This app shows a scrollable list of fruits. Each fruit has a circle with its first letter and its name next to it.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final List<String> fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Fruit List')),
        body: ListView.builder(
          itemCount: fruits.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(child: Text(fruits[index][0])),
              title: Text(fruits[index]),
            );
          },
        ),
      ),
    );
  }
}

Important Notes

ListView.builder only builds visible items, so it uses less memory than ListView with all children.

Time complexity is O(n) for n visible items, not all items.

Common mistake: forgetting to set itemCount, which can cause infinite list or errors.

Use ListView.builder when you have many items or dynamic lists. Use ListView(children: [...]) for small fixed lists.

Summary

ListView.builder creates list items on demand for better performance.

Use itemCount to tell how many items to build.

itemBuilder builds each item widget using the index.

Practice

1. What does ListView.builder do in Flutter?

easy

A. Creates list items only when they are visible on screen for better performance.

B. Creates all list items at once when the list is built.

C. Creates a fixed number of buttons instead of list items.

D. Creates a grid layout instead of a list.

Solution

1. Step 1: Understand ListView.builder purpose

   ListView.builder creates list items lazily, meaning it builds only those items visible on screen.

2. Step 2: Compare with other list types

   Other list types like ListView create all items at once, which can be slow for large lists.

3. Final Answer:

   Creates list items only when they are visible on screen for better performance. -> Option A

4. Quick Check:

   ListView.builder = lazy item creation [OK]

Hint: ListView.builder builds items on demand, not all at once [OK]

Common Mistakes:

• Thinking ListView.builder creates all items immediately
• Confusing ListView.builder with GridView
• Assuming ListView.builder creates buttons instead of list items

2. Which of the following is the correct syntax to create a ListView.builder with 10 items?

easy

A. ListView.builder(items: 10, buildItem: (context, index) => Text('Item $index'))

B. ListView.builder(count: 10, builder: (context, index) => Text('Item $index'))

C. ListView.builder(length: 10, itemBuilder: (context, i) => Text('Item $i'))

D. ListView.builder(itemCount: 10, itemBuilder: (context, index) => Text('Item $index'))

Solution

1. Step 1: Identify correct parameter names

   The correct parameters are itemCount for number of items and itemBuilder for building each item.

2. Step 2: Check syntax correctness

   ListView.builder(itemCount: 10, itemBuilder: (context, index) => Text('Item $index')) uses correct parameter names and syntax with itemCount: 10 and itemBuilder function.

3. Final Answer:

   ListView.builder(itemCount: 10, itemBuilder: (context, index) => Text('Item $index')) -> Option D

4. Quick Check:

   Correct parameters = ListView.builder(itemCount: 10, itemBuilder: (context, index) => Text('Item $index')) [OK]

Hint: Use itemCount and itemBuilder parameters exactly [OK]

Common Mistakes:

• Using wrong parameter names like count or length
• Using buildItem instead of itemBuilder
• Missing itemCount parameter

3. What will be displayed by this Flutter code snippet?

ListView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Text('Number: $index');
  },
)

medium

A. An empty list with no items

B. A list showing: Number: 0, Number: 1, Number: 2

C. A list showing: Number: 1, Number: 2, Number: 3

D. A runtime error because index is not defined

Solution

1. Step 1: Understand itemCount and index values

   itemCount is 3, so index goes from 0 to 2.

2. Step 2: Check itemBuilder output

   Each item shows text 'Number: ' followed by the index value, so items are 'Number: 0', 'Number: 1', 'Number: 2'.

3. Final Answer:

   A list showing: Number: 0, Number: 1, Number: 2 -> Option B

4. Quick Check:

   Index starts at 0, so output matches A list showing: Number: 0, Number: 1, Number: 2 [OK]

Hint: Index starts at 0 up to itemCount - 1 [OK]

Common Mistakes:

• Assuming index starts at 1
• Expecting 3 items with index 1 to 3
• Thinking it causes an error due to index

4. Identify the error in this ListView.builder code:

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Text('Item');
  },
  itemCount: 10,
)

medium

A. Duplicate itemCount parameter causes a syntax error.

B. Missing return statement inside itemBuilder.

C. itemBuilder function has wrong parameters.

D. No error; code runs fine.

Solution

1. Step 1: Check parameters in ListView.builder

   There are two itemCount parameters, which is not allowed and causes a syntax error.

2. Step 2: Verify other parts

   The itemBuilder returns a Text widget correctly, and parameters are correct.

3. Final Answer:

   Duplicate itemCount parameter causes a syntax error. -> Option A

4. Quick Check:

   Duplicate keys in widget constructor cause errors [OK]

Hint: Check for duplicate parameters in widget constructors [OK]

Common Mistakes:

• Ignoring duplicate parameters
• Thinking missing return causes error here
• Assuming itemBuilder parameters are wrong

5. You want to display a list of user names from a list users = ['Anna', 'Bob', 'Cara'] using ListView.builder. Which code correctly shows each name with its position number starting from 1?

hard

A. ListView.builder(itemCount: users.length, itemBuilder: (context, index) => Text('${index}. ${users[index + 1]}'))

B. ListView.builder(itemCount: users.length, itemBuilder: (context, index) => Text('$index. $users[index]'))

C. ListView.builder(itemCount: users.length, itemBuilder: (context, index) => Text('${index + 1}. ${users[index]}'))

D. ListView.builder(itemCount: users.length, itemBuilder: (context, i) => Text('${i}. ${users[i]}'))

Solution

1. Step 1: Adjust index to start numbering from 1

   Since index starts at 0, add 1 to show position starting from 1.

2. Step 2: Access user names correctly

   Use users[index] to get the correct user name for each index.

3. Final Answer:

   ListView.builder(itemCount: users.length, itemBuilder: (context, index) => Text('${index + 1}. ${users[index]}')) -> Option C

4. Quick Check:

   Index + 1 for numbering, users[index] for names [OK]

Hint: Add 1 to index for numbering, use users[index] for names [OK]

Common Mistakes:

• Using index without +1 for numbering
• Accessing users[index + 1] causing out-of-range error
• Using wrong variable name like i without declaration