Flutter ListView And ListView.Builder
Displaying a list of your data in the UI is a common feature in almost every app. You could use the Row widget to arrange the list of items horizontally or columns to arrange items vertically. But when these items grow larger than the widget they are contained in, you get the dreaded overflow warning sign on your UI.
This happens because the widget can’t scroll its children when they grow larger than the bounding box.
The ListView widget is a Scroll View provided by Flutter. That enables scrolling for the list of items. You simply wrap the items you want to be scrolled in the ListView widget and that’s it.
ListView
ListView is the default constructor of the ListView class. A ListView simply takes a list of children and makes it scrollable.
Usually, this should be used with a small number of children, as the List will also construct the invisible elements in the list and a large number of elements may render this inefficient.
ListView.builder
To work with lists that contain a large number of items, it’s best to use ListView. builder constructor. In contrast to the default ListView constructor, which requires creating all items at once, the ListView. builder() constructor creates items as they’re scrolled onto the screen or only when items need to be displayed on the screen. It works as an Android RecyclerView but is a lot easier to set up.
ListView. builder is a way of constructing the list where children’s (Widgets) are built on demand. However, instead of returning a static widget, it calls a function that can be called multiple times (based on itemCount ) and it’s possible to return a different widget at each call.
The general format of the code is:
ListView.builder takes multiple parameters, however, two of them are of special importance. They are
- itemCount
- item builder
The “ itemCount “ parameter decides how many times the callback function in the item builder will be called or it asks how many repeating items you want to display in the list. 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 “ item builder ” is where you return the item itself that you want to display. Here we made a ListTile widget with a simple text widget inside. Item builder expects a lambda function that has the parameters of context and position. The position gives you which index of the list it is.
In summary, when you make a list, you have to supply two things to it:
(1) How many items are on the list?
(2) What does each item look like and what data does it contain?
The list items are constructed lazily, meaning only a specific number of list items are constructed and when a user scrolls ahead, the earlier ones are destroyed.
Summery
This article explains why and how to use the ListView class and ListView.Builder with examples.
Get full code over here
