Flutter Listview Builder featured image

Flutter Listview Builder Example : Know in 3 Steps

Suppose you have 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 a small items. But in case you have large items then you have to use Flutter Listview Builder. There is one benefit of using Listview Builder. It is that the ListView.builder()  constructor create items present in the list when  you scrolled onto the screen thus increase 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 know what is the problem I am going to solve here.

Problem

In this tutorial I will  display 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: Impor the Material Design package

The first basic step is to import require material design package. Lets import it.

import 'package:flutter/material.dart';

Step 2:  Creat Custom Data Class

In this step I will create a CompanyStocks class that has name and price 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, 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 the override the build() method. Inside the state class I have created dummy data as the list items . It will be of type CompanyStocks that I have created in the step 2.

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

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

List view builder in flutter for stocks
List view builder in flutter for stocks

Conclusion

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

 

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.