Flutter Listview Builder Example : Know in 3 Steps

Suppose you have a list of data and want to display all the data or items in your UI then listview and listview builder is used. Listview is used when you have small items. But in case you have large items then you have to use Listview Builder flutter. There is one benefit of using Listview Builder. It is that the ListView.builder()  constructor creates items present in the list when you scrolled onto the screen thus increasing the performance of the app.

In this entire tutorial, you will learn how to implement Flutter Listview Builder With Easy Steps.

Before going to the steps part lets me know what the problem I am going to solve here is.

Problem

In this tutorial, I will display the list of stocks with its name and price with an Icon that will be the first alphabet of the stock name.

Steps to Implement Flutter ListView Builder

Step 1: Import the Material Design package

The first basic step is to import the required material design package. Let’s import it.

import 'package:flutter/material.dart';

Step 2:  Create Custom Data Class

In this step, I will create a CompanyStocks class that has names and prices of the stocks. It is created only to map the items of the object with the ListView Builder.

class CompanyStocks {
  String name;
  double price;

  CompanyStocks({this.name,this.price});
}

Step 3:  Create a Stateful Widget

The next step is to create a Stateful Widget that will contain all the dummy data items mapped with the above class. All the logic or the implementation part is done inside the build() method. Copy, and paste the below lines of code.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State {
  List stocksList = [
    CompanyStocks(name: "Facebook", price: 339.1),
    CompanyStocks(name: "A10 NETWORKS INC.", price: 10.34),
    CompanyStocks(name: "Intel Corp", price: 56.96),
    CompanyStocks(name: "HP Inc", price: 32.43),
    CompanyStocks(name: "Advanced Micro Devices Inc.", price: 77.44),
    CompanyStocks(name: "Apple Inc", price: 133.98),
    CompanyStocks(name: "Amazon.com, Inc.", price: 3505.44),
    CompanyStocks(name: "Microsoft Corporation", price: 265.51),
    CompanyStocks(name: "Facebook", price: 339.1),
    CompanyStocks(name: "A10 NETWORKS INC.", price: 10.34),
    CompanyStocks(name: "Intel Corp", price: 56.96),
    CompanyStocks(name: "HP Inc", price: 32.43),
    CompanyStocks(name: "Advanced Micro Devices Inc.", price: 77.44),
    CompanyStocks(name: "Apple Inc", price: 133.98),
    CompanyStocks(name: "Amazon.com, Inc.", price: 3505.44),
    CompanyStocks(name: "Microsoft Corporation", price: 265.51)
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("List View Builder"),
        ),
        body: ListView.builder(
          itemCount: stocksList.length,
          itemBuilder: (context, index) {
            return Card(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: ListTile(
                  title: Text(
                    stocksList[index].name,
                    style: TextStyle(
                      fontSize: 20,
                    ),
                  ),
                  leading: CircleAvatar(
                    child: Text(
                      stocksList[index].name[0],
                      style:
                          TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                    ),
                  ),
                  trailing: Text("\$ ${stocksList[index].price}"),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Explanation of the Code

In the above code, I have created a Stateful Widget MyApp and overridden the build() method. Inside the state class, I have created dummy data as the list items. It will be of the type CompanyStocks that I have created in step 2.

After that, I called the ListView.builder() inside the build method. Inside the builder method, there will be a card and inside the card, there is ListTile that will have three things. It is the Name of the stock, the price of each stock, and the CircularAvtar with the first alphabet of the stock’s name.

When you will run the code you will get the following output.

Conclusion

Flutter Listview builder is a very useful widget if you want to show large items on the screen. A new item from the list is automatically inserted when your scroll onto the screen . These are easy steps to implement ListView Builder in Flutter. I hope you have liked this tutorial. If you have any queries then you can contact us for more help.