ListView In Flutter
As we have gone through some basics about flutter which I have mentioned in an article I wrote -> Flutter Basics. So now it’s time to move forward and know some special widgets of flutter ListView is one of them which makes coding in flutter very easy. So I’ll be answering the basic questions that come to our mind while looking at ListView WHY? And HOW? well then let’s begin….
Why ListView?
The word itself indicates that a ListView means displaying a list of data. In modern apps, we have a lot of data to be shown and it’s a must to display the whole data on a single screen instead of giving a pagination option in our apps, this can be a sign of user-friendly apps as in few taps user can check the data or any content. A ListView in Flutter is a linear list of scrollable items. We can use it to make a list of items scrollable or make a list of repeating items. Well, ListView is not the only option to display a scrollable screen #flutter also has SingleChildScrollView Widget which helps to display a list of data, so here the question arrives why we should use ListView.
Using SingleChildScrollView we have a child as its property where we insert a column of a Row as per the requirement horizontal or vertical (default is vertical) inside our Row / Column we add widgets which we want to display we can insert more than one widgets, in this case, we know the number of widgets we want to insert but when we are working on a real-time project, we don’t know the length or strength of data coming from the server so in this case, the SingleChildScrollView is not useful we use ListView it comes with some interesting properties which allow us to display the data as per the length of data coming from the server or the data we are having in our local storage.
HOW TO IMPLEMENT A LISTVIEW?
ListView comes with many properties and a ListView can be used for Static data if you know the length of data and also for the dynamic data where you don’t know the length of the data, displaying dynamic data where we don’t know the length is possible with ListView property called itemcount to which we assign an integer value which is the length of a List. Know we’ll start by going through some types of ListView and then we can check some modifications in it.
1. ListView
2. ListView.builder
3. ListView.seperated
4. ListView.custom
1) ListView
Usually, it should be used to display a small number of children. This is the default constructor of ListView class which takes a list of children and makes it scrollable.
ListView(
children: <Widget>[
ItemOne(),
ItemTwo(),
ItemThree(),
],
),ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.
2) ListView.builder()
Here the builder() plays an important role as it is used to build a repeating list of items. We can build a dynamic length list of data, to assign the length to the ListView.builder() we have a special property itemcount to which we assign an integer which will be the length of the List but know to display the dynamic list of data we use itemBuilder property which helps us construct the list of items. The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are visible. In ListView.builder() itemcount and itemBuilder are required parameters
The general format of the code is:
ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(position.toString(), style: TextStyle(fontSize: 22.0),),
),
);
},
),The itemBuilder helps to return the widgets which we wanna display in the list as per the length of the data (List) available, the itemBuilder should create the widget instances when called. The itemBuilder callback will be called only with indices greater than or equal to zero and less than itemCount. The position parameter has the current index of the List by which we can access the data.
3) ListView.seperated()
In this type of ListView we can specify a separator between the list of data this separator can be a Divider() or any other widget as per the requirement, using separated() constructor we make our list look neat and also becomes much more readable to the user. Displaying advertise or any content after some list of data can be done with the help of ListView.seperated() as we have the length of items to be displayed the separatorBuilder property returns the widget to be displayed and also accepts position (index of List) as parameter which we can use to add conditional statement before returning the widget to be displayed.
The general format of the code is:
ListView.separated(
itemCount: 25,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('item $index'),
);
},
);4) ListView.custom()
The ListView.custom constructor takes a SliverChildDelegate, which provides the ability to customize additional aspects of the child model. For example, a SliverChildDelegate can control the algorithm used to estimate the size of children that are not visible.
The custom() constructor as its name suggests, lets you build ListViews with custom functionality for how the children of the list are built. The main parameter required for this is a SliverChildDelegate which builds the items. By this, we can add some more functionality to our list displayed. For example, a custom child model can control the algorithm used to estimate the size of children that are not visible.
· SliverChildListDelegate
· SliverChildBuilderDelegate
SliverChildListDelegate accepts a direct list of children whereas SliverChildBuiderDelegate accepts an IndexedWidgetBuilder (The builder function we use).
The general format of the code is:
ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return KeepAlive(
data: items[index],
key: ValueKey<String>(items[index]),
);
},
childCount: items.length,
findChildIndexCallback: (Key key) {
final ValueKey valueKey = key;
final String data = valueKey.value;
return items.indexOf(data);
}
),
),
),I hope you enjoyed it and leave a few claps if you did. Follow me for more Flutter articles and comment for any feedback you might have about this article.
Check out my recent article on Flutter Basics
You can also connect me on LinkedIn for more content on Flutter Development.
