Apr

Flutter List With Different Items

Flutter List With Different Items:

In this tutorial, we are going to create a List that displays a different type of content. For example,

the main heading has a list of related subheadings. Now in this tutorial, we are creating such type of list that has different types of main and sub list to display a list of related items.

Follow the below steps to create List With Different Items:

Creating a data source with different types of items
Convert the data source into a List of Widgets

Create a data source with different types of item:

Create Different Types of Items:

To create different types of items in a List, we need to define a class for each type of item.

In this example, we work on an app that shows a header followed by five messages. Therefore, we have to create three classes: ListItem, HeadingItem, and MessageItem. As shown in below code.

// The base class for the different types of items the List can contain
abstract class ListItem {}

// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
final String heading;

HeadingItem(this.heading);
}

// A ListItem that contains data to display a message
class MessageItem implements ListItem {
final String sender;
final String body;

MessageItem(this.sender, this.body);
}

Creating a List of Items:

In most of the time, we are fetching data from the internet or a local database and convert that data into a list of items.

For this example, we are creating a list of items to work with. The list will contain a header followed by five messages. Rinse, repeat.

As shown in below code:

final items = List.generate(
1200,
(i) => i % 6 == 0
? HeadingItem("Heading $i")
: MessageItem("Sender $i", "Message body $i"),
);

Converting the data source into a List of Widgets:

We are using ListView.builder constructor for converting each list view item into a widget.

In general, we want to provide a builder function that checks for what type of item it is we are dealing with and returns the appropriate Widget for that type of item.

In this example, we are using the is keyword to check the type of item we are dealing with and can be handled. It’s a fast method to do this, and will automatically cast each item to the appropriate type. However, there are different ways to approach to achieve it.

As shown in below example code:

ListView.builder(
// Let the ListView know how many items it needs to build
itemCount: items.length,
// Provide a builder function. This is where the magic happens! We'll
// convert each item into a Widget based on the type of item it is.
itemBuilder: (context, index) {
final item = items[index];

if (item is HeadingItem) {
return ListTile(
title: Text(
item.heading,
style: Theme.of(context).textTheme.headline,
),
);
} else if (item is MessageItem) {
return ListTile(
title: Text(item.sender),
subtitle: Text(item.body),
);
}
},
);

Complete example code for Creating List With Different Items In Flutter:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
runApp(MyApp(
items: List.generate(
1000,
(i) => i % 6 == 0
? HeadingItem("Heading $i")
: MessageItem("Sender $i", "Message body $i"),
),
));
}

class MyApp extends StatelessWidget {
final List items;

MyApp({Key key, @required this.items}) : super(key: key);

@override
Widget build(BuildContext context) {
final title = 'Mixed List';

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView.builder(
// Let the ListView know how many items it needs to build
itemCount: items.length,
// Provide a builder function. This is where the magic happens! We'll
// convert each item into a Widget based on the type of item it is.
itemBuilder: (context, index) {
final item = items[index];

// The base class for the different types of items the List can contain
abstract class ListItem {}

// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
final String heading;

HeadingItem(this.heading);
}

// A ListItem that contains data to display a message
class MessageItem implements ListItem {
final String sender;
final String body;

MessageItem(this.sender, this.body);
}

Congratulations You Have Learned Creating List With Different Items In Flutter….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext