Listview.builder in Flutter

17 Jun, 2022
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.
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: 
SahilSingh
sweetyty
ankit_kumar_
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
ListView Class in Flutter
Flutter - Stack Widget
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Dialogs
Operators in Dart
Flutter - Flexible Widget
Flutter - BoxShadow Widget