A ListView is a widget in Flutter that is used to build a list of scrollable widgets, where items are dynamically added as the list is scrolled. ListView is a powerful tool for displaying large amounts of data in a Flutter app. Additionally, Flutter provides several ListView types to meet different needs and use cases, such as ListView.builder, ListView.separated, ListView.custom, and others. In short, ListView is an essential component in building user interfaces in Flutter and is used to display a list of data efficiently and dynamically; a base example of a ListView:
ListView.builder(
itemCount: 100, // número de elementos en la lista
itemBuilder: (BuildContext context, int index) {
// construir el elemento de la lista
return ListTile(
title: Text('Elemento $index'),
);
},
),In this example, we use the ListView.builder constructor to build a 100-item list. The itemCount parameter indicates the number of items to display in the list.
The itemBuilder parameter specifies how to build each item in the list. In this case, we use a ListTile for each item, with a text title showing the item's index.
This is just a simple example, but there are many possible ways to customize and use lists in Flutter, such as adding separators, headers, footers, and more.
We are going to know a fundamental widget for any type of modern application in which we want to display a set of data in an organized way through a scrollable list; this great widget is known as the ListView and is similar to Android Studio's RecylverView but more basic and without optimization for long lists but much easier to implement than on Android with Kotlin/Java.
The code to implement the same is as simple as this:
ListView( children: <Widget>[ Text("Item ListView 1"), Text("Item ListView 2"), Text("Item ListView 3"), Text("Item ListView 4") ], )As you can see, it is simply a widget called ListView that, as is the classic or normal thing in this widget class, receives a list of widgets that can be anything, in this case the simplest thing in Flutter, which would be a widget of type text.
Reverse List + Vertical/Horizontal Scroll + lock scroll in ListView
There are many configurations that we can make on the ListView through the properties, to indicate that we want to apply scroll on the horizontal or vertical axis, we can also block the scroll if you need to do this for some reason or reverse a list; all this through a single property and therefore through a line of code.
We can configure multiple aspects of our list, for example if you want to reverse the items, for that we use the reverse property, if you want the scroll vertically:
scrollDirection: Axis.vertical
Or horizontal:
scrollDirection: Axis.horizontal
If we want to block the scroll in our list and it remains fixed in the first elements:
physics: NeverScrollableScrollPhysics(),
But of course a list of fixed elements is of absolutely no use to us, the idea is to make a dynamic list of elements; this is ideal if we connect to a Rest API.
Or a similar system, but to keep things simple, we'll create a function with a for loop that creates elements dynamically:
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: ListView(
children: generateItem(),
addAutomaticKeepAlives: false,
scrollDirection: Axis.vertical,
)
// This trailing comma makes auto-formatting nicer for build methods.
);
}
List<Widget> generateItem(){
final list = List<Widget>();
for (var i = 0; i <= 100; i++) {
list.add(Text("Item ListView "+i.toString()));
}
return list;
}
We can also place a divider between the elements or items of our ListView widget:
for (var i = 0; i <= 100; i++) {
list.add(Text("Item ListView "+i.toString()));
list.add(Divider());
}
Problem with ListView widget
The problem with the ListView as we implement it, is that it is not optimized to work with very large lists, or dynamic lists; Let's remember that the ListView in basic Android were "replaced" to a certain extent by the RecyclerView which offer excellent performance for large lists of items, since they "recycle" the view items that we don't see and reuse them in the rest of the list that appears or consumes at the request of the user.
And with this we conclude the use of the ListView at least in its basic use, but remember that there are many more properties and variants of this list that we will see later.
Always remember to check the official documentation on Flutter ListView.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter