The Creating ListViews in Flutter

 

What is ListView?

ListView is used to group several items in an array and display them in a scrollable list. The list can be scrolled vertically, horizontally, or displayed in a grid:

ListViews are common in UI frameworks and are one of the most popular UI widgets in the world. In fact, any mobile app or project must use ListView in some capacity

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

This 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(

  children: <Widget>[

    ItemOne(),

    ItemTwo(),

    ItemThree(),

  ],

),

ListView.builder()

The builder() constructor constructs a repeating list of items. The constructor takes two main parameters: An itemCount for the number of items in the list and an itemBuilder for constructed each list item.

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.

Neat trick: Since the elements are loaded lazily and only the needed number of elements are loaded, we don’t really need an itemCount as a compulsory parameter and the list can be infinite.

ListView.builder(

  itemCount: itemCount,

  itemBuilder: (context, position) {

    return listItem();

  },

),

body: Padding(
  padding: const EdgeInsets.all(8.0),
  child: ListView.builder(
      itemCount: lodedProduct.length,
      itemBuilder: (context, index) => Column(
            children: <Widget>[
              InkWell(
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) => PuzzlesScreen(arr: lodedProduct.toList(),positon: index),));
                },
                child: Container(

                  width: double.infinity,
                  height: 80,
                  child: Card(
                    elevation: 1,


                      color: Color(0x000080),
                      shape: RoundedRectangleBorder(


                          borderRadius: BorderRadius.all(Radius.circular(20))),
                      child: Center(
                        child: ListTile(
                          leading: CircleAvatar(
                            child: Center(
                              child: Text(lodedProduct[index].id.toString(),style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold)),
                            ),
                            radius: 28.0,
                            backgroundColor: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
                          ),
                          title: Text(
                            lodedProduct[index].title,
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.poppins(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                          trailing: Icon(Icons.arrow_forward_ios,color: Colors.yellow,),

                        ),
                      )),
                ),
              ),
              Padding(padding: const EdgeInsets.only(bottom: 5)),
            ],
          )),
),

Conclusion:

In this blog, we have discussed how we can create a listview on our App screen.

I hope it will help you out in understanding and get a brief idea about it.