How Create a ListView in Flutter with ListView.builder

Creating a simple ListView in Flutter using the powerful ListView.builder widget. The ListView.builder is ideal when you need to display a large or dynamic list of items efficiently. It does so by only building the visible items on demand.

Why Use ListView.builder?

ListView.builder is particularly useful when working with long lists. Unlike ListView, which renders all items at once, ListView.builder only renders the visible items, ensuring better performance. Let’s dive into how you can implement it.

Steps to Create a Basic ListView:

To create a basic ListView in Flutter, follow these simple steps:

1. Add a ListView.builder widget inside the body of the Scaffold.
2. Customize the list by providing two essential parameters:
   • itemCount: This determines the number of items in the list.
   • itemBuilder: This function defines how each item in the list should appear.

In this example, we’ll use the ListTile widget to display a list of fruits.

Full Code:

import 'package:flutter/material.dart';

class SimpleListview extends StatefulWidget {
  const SimpleListview({super.key});

  @override
  State<SimpleListview> createState() => _SimpleListviewState();
}

class _SimpleListviewState extends State<SimpleListview> {
  final fruitList = [
    'Apple',
    'Banana',
    'Orange',
    'Mango',
    'Pineapple',
    'Strawberry',
    'Blueberry',
    'Watermelon',
    'Papaya',
    'Kiwi',
    'Grapes',
    'Peach',
    'Pear',
    'Plum',
    'Cherry',
    'Pomegranate',
    'Guava',
    'Lychee',
    'Dragon Fruit',
    'Fig'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text(
          'Fruits List',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: ListView.builder(
        itemCount: fruitList.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(8), // Rounded corners for better look
              ),
              child: ListTile(
                title: Text(
                  fruitList[index],
                  style: const TextStyle(fontSize: 18, color: Colors.white,fontWeight: FontWeight.bold),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Code Explaination:

• ListView.builder: This widget efficiently builds items on demand, making it perfect for long or dynamic lists.
• itemCount: Defines the number of items to display (in this case, the length of the fruitList).
• itemBuilder: This function defines how each list item appears. In our example, each fruit is displayed inside a ListTile, wrapped in a grey Container for improved visual appeal.

Benefits of Using ListView.builder:

Using ListView.builder ensures that your Flutter app remains performant, even when displaying a long list of items. The widget only loads the necessary items into memory, which reduces the app’s memory footprint and speeds up rendering.

Output:

Conclusion:

After implementing this code, you’ll have a simple ListView that displays a list of fruits in a clean and modern format. For more complex layouts or greater customization, you can explore ListView.separated and ListView.custom. We’ll explore these in future articles.