ListView Builder In Flutter Apps

Let’s talk about list view builder widget, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into list view builder widget, what it really is, its role, and usage in flutter apps. So the first thing that would come to your mind will be, what exactly is a listview builder in flutter app?

Introduction

List view as the name represents, is a list. It is used when you don’t want to write the code again and again for some specific widget, but still want it to show let’s say 100 times. That’s where list view kicks in. Let’s see how to use it.

List View Builder

Scaffold(

          body: ListView.builder(

                                )

As we can see here, we have used a scaffold and in its body, we have called the list view class’s builder function. Now we have implemented our list view. Let’s now understand how to give values to its constructor, to see the implementation in our app as well.

Item Builder

The item builder constructor in list view builds the returning widget for infinite times or for some specific range, it its defined. Let’s return a text widget. If you want to learn about text widget then click here. Let’s implement it in code now:

ListView.builder(

          itemBuilder: (context, index) {

        return Padding(

          padding: EdgeInsets.all(20),

          child: Center(

            child: Text(index.toString())),

        );

      })

As you can see we have returned a text widget, giving it the value of index to see what value it has. Also we have given it some padding so the items will be a bit separated from each other. We also have used the center widget so it will be shown in the center or else by default it will be show in the left side of the screen. Let’s see how it looks now:

listviewbuilder67

Scroll Direction

It defines whether the item will be shown horizontally(left to right) or vertically(top to bottom). Let’s see how we can change it:

    scrollDirection: Axis.horizontal

We use the scroll direction constructor which is present within the list view, but passing it the axis class property horizontal, you will be able to see the list in horizontal, and of course, you can scroll it as well. Let’s see it now:

listviewbuilder6

Item Count

The item count constructor is used when we want to specify the number of items returned from the list or the number of overall list items. Let’s see how to do it:

itemCount:5

Let’s see how our list is looking right now:

As we can see we have 5 items in our list, the index starts from 0 so its from 0 to 4, means 5 items as specified.

Let’s Pass Container In List View Builder

ListView.builder(

              itemCount: 20,

              itemBuilder: (context, index) {

                return Padding(

                    padding: EdgeInsets.all(10),

                    child: Container(

                      height: 100,

                      width: 100,

                      alignment: Alignment.center,

                      decoration: BoxDecoration(

                        boxShadow: [

                          BoxShadow(

                              blurRadius: 6,

                              color: Colors.grey,

                              spreadRadius: 2)

                        ],

                        shape: BoxShape.circle,

                        color: Colors.blue,

                      ),

                      child: Container(

                        margin: EdgeInsets.all(20),

                        alignment: Alignment.center,

                        decoration: BoxDecoration(

                          boxShadow: [

                            BoxShadow(

                                blurRadius: 6,

                                color: Colors.black45,

                                spreadRadius: 2,

                                offset: Offset(2, 2))

                          ],

                          shape: BoxShape.circle,

                          color: Colors.blue,

                        ),

                        child: Text(

                          index.toString(),

                          style: TextStyle(

                              fontSize: 20,

                              color: Colors.white,

                              fontWeight: FontWeight.w600),

                        ),

                      ),

                    ));

              })

If you want to learn how to customize containers then click here. Let’s see how it looks:

listviewbuilder2

Padding

padding: EdgeInsets.only(top: 50),

We can also give padding to our list view.

listviewbuilderdsign

Note:

That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into list views and other amazing widgets. Thanks.