Your comment on this question:
Your comment on this answer:
Related Questions In Others
Contents
You might need to create lists that display different types of content. For example, you might be working on a list that shows a heading followed by a few items related to the heading, followed by another heading, and so on.
Here’s how you can create such a structure with Flutter:
- Create a data source with different types of items.
- Convert the data source into a list of widgets.
1. Create a data source with different types of items
Types of items
To represent different types of items in a list, define a class for each type of item.
In this example, create an app that shows a header followed by five messages. Therefore, create three classes: ListItem, HeadingItem, and MessageItem.
Create a list of items
Most of the time, you would fetch data from the internet or a local database and convert that data into a list of items.
For this example, generate a list of items to work with. The list contains a header followed by five messages. Each message has one of 3 types: ListItem, HeadingItem, or MessageItem.
To convert each item into a widget, use the ListView.builder[] constructor.
In general, provide a builder function that checks for what type of item you’re dealing with, and returns the appropriate widget for that type of item.
Interactive example
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; const MyApp[{Key? key, required this.items}] : super[key: key]; @override Widget build[BuildContext context] { const title = 'Mixed List'; return MaterialApp[ title: title, home: Scaffold[ appBar: AppBar[ title: const 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. // Convert each item into a widget based on the type of item it is. itemBuilder: [context, index] { final item = items[index]; return ListTile[ title: item.buildTitle[context], subtitle: item.buildSubtitle[context], ]; }, ], ], ]; } } /// The base class for the different types of items the list can contain. abstract class ListItem { /// The title line to show in a list item. Widget buildTitle[BuildContext context]; /// The subtitle line, if any, to show in a list item. Widget buildSubtitle[BuildContext context]; } /// A ListItem that contains data to display a heading. class HeadingItem implements ListItem { final String heading; HeadingItem[this.heading]; @override Widget buildTitle[BuildContext context] { return Text[ heading, style: Theme.of[context].textTheme.headline5, ]; } @override Widget buildSubtitle[BuildContext context] => const SizedBox.shrink[]; } /// A ListItem that contains data to display a message. class MessageItem implements ListItem { final String sender; final String body; MessageItem[this.sender, this.body]; @override Widget buildTitle[BuildContext context] => Text[sender]; @override Widget buildSubtitle[BuildContext context] => Text[body]; }ListView Widget has been introduced to reduce the overload of having various layouts performing the same task. So in this article, we will learn about How to Add a Header Row to a ListView in Flutter?
Return the header as the first row by itemBuilder. Consider a Code snippet as below:
ListView.builder[ itemCount: data == null ? 1 : data.length + 1, itemBuilder: [BuildContext context, int index] { if [index == 0] { // return the header return new Column[...]; } index -= 1; // return row var row = data[index]; return new InkWell[... with row ...]; }, ];Users can add Container Widget and ListView Widget in Column Widget.
So the code snippet will look like this below:
You can add a column to the first item in the item list like this.
new ListView.builder[ itemCount: litems.length, itemBuilder: [BuildContext ctxt, int index] { if [index == 0] { return Column[ children: [ Header[], rowContent[index], ], ]; } else { return rowContent[index]; } }, ]You could use the listview_utils package to append header and footer to ListView easily, like that:
Import package like below:
import 'package:listview_utils/listview_utils.dart';CustomListView[ header: Container[ child: Text['Header'], ], itemCount: items.length, itemBuilder: [BuildContext context, int index, _] { return ListTile[ title: Text[item['title']], ]; }, ];Conclusion:
In this article, we have been through How to Add Header Row to a ListView in Flutter?
Keep Learning!! Keep Fluttering !!!
And also, check out this article on the listview to column in the flutter…
Still, confused about something on flutter development?? Do let us know…
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.