Listview.builder in Flutter

ListView is a very important widget in a 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.

The constructor of ListView.builder:

ListView.builder({Key key, 
Axis scrollDirection, 
bool reverse, 
ScrollController controller, 
bool primary, 
ScrollPhysics physics, 
bool shrinkWrap, 
EdgeInsetsGeometry padding, 
double itemExtent, 
Widget Function(BuildContext, int) itemBuilder, 
int itemCount, 
bool addAutomaticKeepAlives, 
bool addRepaintBoundaries, 
bool addSemanticIndexes, 
double cacheExtent, 
int semanticChildCount, 
DragStartBehavior dragStartBehavior})

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

Steps:

• Create a new flutter application.
• For now, delete the code from the main.dart.
• Copy the below code and paste it into your main.dart.

Dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
// This widget is the root
// of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "ListView.builder",
        theme: ThemeData(primarySwatch: Colors.green),
        debugShowCheckedModeBanner: false,
        // home : new ListViewBuilder(),  NO Need To Use Unnecessary New Keyword
        home: const ListViewBuilder());
  }
}

class ListViewBuilder extends StatelessWidget {
  const ListViewBuilder({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ListView.builder")),
      body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
                leading: const Icon(Icons.list),
                trailing: const Text(
                  "GFG",
                  style: TextStyle(color: Colors.green, fontSize: 15),
                ),
                title: Text("List item $index"));
          }),
    );
  }
}

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

In the body, we have ListView.builder with itemcount 5 and itemBuilder which will create a new widget again and again up to 5 times because we have 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 build again and again up to 5 times.

Output :

This task can also be done with the help of ListView then why we used 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 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: