Flutter: ListView.builder

While working with Flutter I needed to create a list in my user interface and I found some wonderful list widget which I will be demonstrating here in this blog. So let’s get started.

Exploring the types of ListView

We’ll start with looking at the types of ListViews and later look at the other features and neat modifications for it.

Let’s look at the types of ListViews there are:

1. ListView
2. ListView.builder
3. ListView.separated
4. ListView.custom

ListView Builder Example..

First create Class to declare variable

class Match {
  String? matchName;
  String? teamName1;
  String? teamName2;

  Match({
    this.matchName,
    this.teamName1,
    this.teamName2,
  });
}

Then Create List To Add. Value :

List<Match> matchList = [
  Match(
    matchName: "ECS T10 - Bulgarian",
    teamName1: "Indo-Bulgarian CC",
    teamName2: "Indian - Tuskers",
  ),
  Match(
    matchName: 'Shpageeza T20 League',
    teamName1: "Amo Sharks",
    teamName2: "Mis Ainak Knights",
  ),
  Match(
    matchName: "ECS T10 - Romania",
    teamName1: "Indian Cricket Club",
    teamName2: "United Cricket Club",
  ),
  Match(
      matchName: 'Shpageeza T20 League',
      teamName1: "Amo Sharks",
      teamName2: "Mis Ainak Knights",
      ),
  Match(
    matchName: "ECS T10 - Bulgarian",
    teamName1: "Indo-Bulgarian CC",
    teamName2: "Indian - Tuskers",
  ),
  Match(
    matchName: "ECS T10 - Romania",
    teamName1: "Indian Cricket Club",
    teamName2: "United Cricket Club",
  ),
];

And Define ListView.builder

ListView.builder(
    shrinkWrap: true,
    itemCount: matchList.length,
    itemBuilder: (BuildContext context, index) {
      return FirstBox(
        match: matchlist[index],
      );
    });

Create the UI Part…

class FirstBox extends StatelessWidget {
  final Match? match;

  FirstBox({
    Key? key,
    this.match,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Card(
        // color: Colors.white,
        elevation: 10,
        clipBehavior: Clip.hardEdge,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.bottomRight,
                colors: [Colors.white, Colors.black12]),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                // color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.all(7),
                  child: Text(
                    match?.matchName,
                  ),
                ),
              ),
              Divider(
                color: Colors.grey[300],
                height: 2,
              ),
              Padding(
                padding: const EdgeInsets.all(4.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(match?.teamName1),
                    Text(match?.teamName2),
                  ],
                ),
              ),
              Container(
                color: Colors.grey[200],
                padding: const EdgeInsets.all(7.0),
                child: Row(
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Container(
                        height: 15,
                        width: 27,
                        decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.green,
                            ),
                            borderRadius: BorderRadius.circular(5),
                            color: Colors.green[100]),
                        child: Padding(
                          padding: EdgeInsets.all(3),
                          child: Text(
                            "MEGA",
                            style: TextStyle(
                                color: Colors.green[700],
                                fontSize: 8,
                                fontWeight: FontWeight.bold),
                          ),
                        )),
                    Padding(padding: EdgeInsets.only(left: 10)),
                    Text("₹10 Lakhs"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

HERE Full Code::::

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Match> matchList = [
    Match(
      matchName: "ECS T10 - Bulgarian",
      teamName1: "Indo-Bulgarian CC",
      teamName2: "Indian - Tuskers",
    ),
    Match(
      matchName: 'Shpageeza T20 League',
      teamName1: "Amo Sharks",
      teamName2: "Mis Ainak Knights",
    ),
    Match(
      matchName: "ECS T10 - Romania",
      teamName1: "Indian Cricket Club",
      teamName2: "United Cricket Club",
    ),
    Match(
      matchName: 'Shpageeza T20 League',
      teamName1: "Amo Sharks",
      teamName2: "Mis Ainak Knights",
    ),
    Match(
      matchName: "ECS T10 - Bulgarian",
      teamName1: "Indo-Bulgarian CC",
      teamName2: "Indian - Tuskers",
    ),
    Match(
      matchName: "ECS T10 - Romania",
      teamName1: "Indian Cricket Club",
      teamName2: "United Cricket Club",
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(20),
      child: Column(
        children: <Widget>[
          // Padding(padding: EdgeInsets.fromLTRB(10, 10, 10, 10)),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                Container(
                  height: 25,
                  width: 125,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.red,
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: Text(
                      "Upcoming Matches",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 15,
                          color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 10,
          ),
          // FirstBox(),
          ListView.builder(
            // scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: matchList.length,
              itemBuilder: (BuildContext context, index) {
                return FirstBox(
                  match: matchList[index],
                );
              })
        ],
      ),
    );
  }
}


class FirstBox extends StatelessWidget {
  final Match? match;

  FirstBox({
    Key? key,
    this.match,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Card(
        // color: Colors.white,
        elevation: 10,
        clipBehavior: Clip.hardEdge,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.bottomRight,
                colors: [Colors.white, Colors.black12]),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                // color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.all(7),
                  child: Text(
                    match?.matchName,
                  ),
                ),
              ),
              Divider(
                color: Colors.grey[300],
                height: 2,
              ),
              Padding(
                padding: const EdgeInsets.all(4.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(match?.teamName1),
                    Text(match?.teamName2),
                  ],
                ),
              ),
              Container(
                color: Colors.grey[200],
                padding: const EdgeInsets.all(7.0),
                child: Row(
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Container(
                        height: 15,
                        width: 27,
                        decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.green,
                            ),
                            borderRadius: BorderRadius.circular(5),
                            color: Colors.green[100]),
                        child: Padding(
                          padding: EdgeInsets.all(3),
                          child: Text(
                            "MEGA",
                            style: TextStyle(
                                color: Colors.green[700],
                                fontSize: 8,
                                fontWeight: FontWeight.bold),
                          ),
                        )),
                    Padding(padding: EdgeInsets.only(left: 10)),
                    Text("₹10 Lakhs"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
class Match {
  String? matchName;
  String? teamName1;
  String? teamName2;

  Match({
    this.matchName,
    this.teamName1,
    this.teamName2,
  });
}