Listview.builder in Flutter

ListView is an important widget in Flutter. It is used to create the list of children. But when we want to create a list recursively without writing code again and again, then ListView.builder is used instead of ListView.  ListView.builder creates a scrollable, linear array of widgets.

ListView.builder by default does not support child reordering.

Constructor of ListView.builder:

ListView ListView.builder({
     Key? key,
     Axis scrollDirection = Axis.vertical,
     bool reverse = false,
     ScrollController? controller,
     bool? primary,
     ScrollPhysics? physics,
     bool shrinkWrap = false,
     EdgeInsetsGeometry? padding,
     double? itemExtent,
     double? Function(int, SliverLayoutDimensions)? itemExtentBuilder,
     Widget? prototypeItem,
     required Widget? Function(BuildContext, int) itemBuilder,
     int? Function(Key)? findChildIndexCallback,
     int? itemCount,
     bool addAutomaticKeepAlives = true,
     bool addRepaintBoundaries = true,
     bool addSemanticIndexes = true,
     double? cacheExtent,
     int? semanticChildCount,
     DragStartBehavior dragStartBehavior = DragStartBehavior.start,
     ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
     String? restorationId,
     Clip clipBehavior = Clip.hardEdge,
     HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
})

Let us understand this concept with the help of an example :

Steps-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Start Coding

Write the below code in main.dart.

// Importing the Flutter Material package which contains all the UI components needed.
import 'package:flutter/material.dart';

// The main() function is the entry point of the Flutter application.
void main() => runApp(const MyApp()); // Launches the app by running MyApp widget.

// Creating a stateless widget which is the root of the application.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key); // Constructor with optional key.

  // The build method describes the widget tree.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView.builder", // Title of the application.
      theme: ThemeData(primarySwatch: Colors.green), // App theme with green as primary color.
      debugShowCheckedModeBanner: false, // Hides the debug banner in the top-right corner.
      
      // Sets the home screen to ListViewBuilder widget.
      // Note: No need to use the `new` keyword in modern Dart.
      home: const ListViewBuilder(),
    );
  }
}

// Defining a stateless widget named ListViewBuilder.
class ListViewBuilder extends StatelessWidget {
  const ListViewBuilder({Key? key}) : super(key: key); // Constructor with optional key.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar displays the title bar at the top of the screen.
      appBar: AppBar(title: const Text("ListView.builder")),

      // Body contains the scrollable list using ListView.builder.
      body: ListView.builder(
        itemCount: 5, // Number of items to display in the list.
        
        // Builds each item in the list dynamically based on the index.
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: const Icon(Icons.list), // Icon on the left side of the ListTile.
            trailing: const Text(
              "GFG", // Text shown on the right side.
              style: TextStyle(color: Colors.green, fontSize: 15), // Styling the trailing text.
            ),
            title: Text("List item $index"), // Main title text that shows item index.
          );
        },
      ),
    );
  }
}

In the above code, we have a ListView.builder class, which is a stateless class. It returns a new Scaffold which consists of an appBar and a body.

In the body, we have ListView.builder with an itemcount of 5 and an itemBuilder that will create a new widget again and again up to 5 times because we have an itemCount=5. If we don't use itemCount in ListView.builder, then we will get infinite list items, so it is recommended to use itemCount to avoid such mistakes. The itemBuilder returns ListTile, which has leading, trailing and title. This ListTile will be built again and again up to 5 times.

Output:

This task can also be done with the help of ListView so why we use ListView.builder?

The answer to this question is that we can do the same task with the help of ListView but when we have numerous items(for ex: 10000) then it is inefficient to create these items with ListView because it loads all the list items at once but ListView.builder make this task quicker by creating layouts for items visible on the screen with the help of itemBuilder & lazily build other layouts/containers as the user scrolls.

Now, from the above code of the ListView.builder, if we want to create a total of 8 items, then simply change itemCount to 8, and we will get 8 items on our screen.

Output: