ListView is one of the most important widgets in Flutter. We use the ListView to create a list (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.
To display dynamic and large amounts of data, ListView.builder is
the right choice for displaying data in list form without reducing application performance.
By using this ListView builder, our application only displays the data that is visible on the screen, the rest will be displayed when the screen is scrolled down or up. ListView.builder creates a linear array of widgets that can be scrolled.
List of contents:
1. Preparation for Creating Listview Builder in flutter
2. Create a new flutter project
3. Create a class for data in the listview builder
4. Create a listview builder
5. Conclusion
1. Preparation for Creating Listview Builder
Prepare a text editor to create code later, here I use Vscode, OK… for how to install Vscode, you can check here
The internet connection is quite fast if possible.
A spirit that never gives up
The courage to keep trying and trying to create code. Create a new flutter project
2. Create a new flutter project
Our first step is of course to create a new project with the name List or you can determine the project name yourself, hehehe, to create a new project in Flutter, you can check the article here
3. Create a class for the data in the listview builder
Above we have explained the function of the listview builder, namely to display dynamic data in an uncertain amount. To display the data of course we have to prepare the data first, here we will use the List function in Dart to create an array of data, an example of using List as below
class Mylist{
List data = [100, 20, 33, 49, "This is my data", "This is my listview builder"];
}
Explanation of the code above:
Mylist class is the name of the class that we created in Uppercase format
List data is a list declaration with data names containing 6 data, namely [100, 20, 33, 49, “This is my data”, “This is my listview builder”], here for the data type I use dynamic.
Well, we already have 6 data which we will display with the listview builder later.
4. Create a listview builder
Now is the time for us to create the listview builder, type the code below in the body
body: ListView.builder(
itemCount: Mylist().data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: const Icon(Icons.list),
trailing: const Text(
"GFG",
style: TextStyle(color: Colors.green, fontSize: 15),
),
title: Text(Mylist().data[index].toString()));
//title: Text("$index"));
})
Explanation of the code above:
we create the listview builder in the body
itemCount: Mylist().data.length, functions to get the amount of data in the Mylist class with the variable name “data”
title: Text(Mylist().data[index].toString())); This code functions to display the data. There it is written toString() which functions to change the dynamic data type to the Text type
If successful, it will appear as shown in the image below
5. Conclusion
That’s the tutorial for making a listview builder in Flutter using the Dart programming language. This listview builder is useful for displaying data from a database into the mobile application that we create.