Flutter List View with Different Types of Items

In this article, we are going to learn how to implement flutter list view with different types of items in flutter applications. We already integrated recyclerview with multiple view types in android applications.

Sometimes we need to display flutter list view with header and content UI. So we can organize data in perfect order. In this example, we are showing football players with their club names. We display club name as header and player name as content.

We need to use ListView.builder function to convert each item into widget. This function checks type of our data club or player. We must add size of our data to itemCount property of ListView.builder function. You can also check out flutter list view related articles at HERE.

First we need to create data class to add data in list with custom type. Then we will create data in list. We need to add data with view type in list. So we can identify data as club or player info. Whenever app is launched, first compiler checks its header or content type. Then data will be displayed according to this type.

 

Create Data Class for listview builder flutter example

class SoccerPlayerInfo{

int viewType;
String playerOrClubName;

SoccerPlayerInfo(this.viewType, this.playerOrClubName);

}

 
 

Create Data to display in list view flutter

List<SoccerPlayerInfo> listSoccerPlayers = listSoccerPlayers = [];
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_CLUB,”Real Madrid”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Sergio Ramos”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Karim Benzema”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_CLUB,”Barcelona”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Lionel Messi”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_CLUB,”Bayern Munich”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Robert Lewandowski”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Manuel Neuer”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_CLUB,”Manchester City”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Kevin De Bruyne”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Sergio Aguero”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_CLUB,”Paris Saint-Germain”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Neymar Jr.”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Kylian MbappĂ©”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_CLUB,”Liverpool”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Virgil van Dijk”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Mohamed Salah”));
listSoccerPlayers.add(SoccerPlayerInfo(VIEW_TYPE_PLAYER,”Sadio ManĂ©”));
 
 

Flutter List View Multiple Items

int VIEW_TYPE_CLUB = 1;
int VIEW_TYPE_PLAYER = 2;

ListView.builder(
itemCount: listSoccerPlayers.length,
itemBuilder: (context, index) {
SoccerPlayerInfo soccerPlayerInfo = listSoccerPlayers[index];

if (soccerPlayerInfo.viewType == VIEW_TYPE_CLUB) {
return ListTile(
    title: Text(
        soccerPlayerInfo.playerOrClubName,
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
    ),
);
} else if (soccerPlayerInfo.viewType == VIEW_TYPE_PLAYER) {
return ListTile(
    title: Text(soccerPlayerInfo.playerOrClubName,
        style: TextStyle(fontSize: 25)
    ),
);
}
},
),

 
 
flutter list view
 
 

Leave a Reply