Listview.builder in Flutter

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 :

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

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "ListView.builder",
      theme: new ThemeData(
          primarySwatch: Colors.green
      ),
      debugShowCheckedModeBanner: false,
      home: new ListViewBuilder()
    );
  }
}
class ListViewBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("ListView.builder")
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context,int index){
          return ListTile(
            leading: Icon(Icons.list),
            trailing: Text("GFG",
                           style: TextStyle(
                             color: Colors.green,fontSize: 15),),
            title:Text("List item $index")
            );
        }
        ),
    );
  }
}

chevron_right


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 very difficult to create these items with ListView because we have to write code again and again to create these 10000 items but ListView.builder make this task very easy by creating these items with the help of itemBuilder. 

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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.