Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Listview.builder in Flutter

  • Last Updated : 30 Jun, 2021

ListView is a very 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.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’s understand this concept with the help of an example :


  • 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.


import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application.
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "ListView.builder",
      theme: new ThemeData(
      debugShowCheckedModeBanner: false,
      home: new ListViewBuilder()
class ListViewBuilder extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context,int index){
          return ListTile(
            leading: Icon(Icons.list),
            trailing: Text("GFG",
                           style: TextStyle(
                             color:,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 :

listview builder in flutter

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 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 : 

listview builder in flutter


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!