I have a collection with subcollections and documents in firebase and I would like to present this data in a ListView with an Header for each subcollection. See the picture as an example
In this example I have 3 subcollections (group A, B and C) with some documents inside, let say a document which contain a url for an image and a description.
How can I build mi list in Flutter?
So far I managed to download all the 5 documents into a list of firebase objects and I am able to build the list as follow
List<DocumentSnapshot> itemDB = [];
class _ItemListNewState extends State<ItemListNew> {
@override
Widget build(BuildContext context) {
return ListView(
primary: false,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: itemDB.map((DocumentSnapshot document) {
return //a row with an Image and a Text
This is fine but I do not have the headers. What is the best way to include also the headers?
Thanks developers in advance!!
You can copy paste run full code below
You can use package https://pub.dev/packages/grouped_list
code snippet
GroupedListView<dynamic, String>(
groupBy: (element) => element['group'],
elements: _elements,
sort: true,
groupSeparatorBuilder: (String value) => Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
value,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)),
),
itemBuilder: (c, element) {
return Card(
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Icon(Icons.account_circle),
title: Text(element['name']),
trailing: Icon(Icons.arrow_forward),
),
),
);
},
)
working demo
full code
import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';
void main() => runApp(MyApp());
List _elements = [
{'name': 'John', 'group': 'Team A'},
{'name': 'Will', 'group': 'Team B'},
{'name': 'Beth', 'group': 'Team A'},
{'name': 'Miranda', 'group': 'Team B'},
{'name': 'Mike', 'group': 'Team C'},
{'name': 'Danny', 'group': 'Team C'},
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Grouped List View Example'),
),
body: GroupedListView<dynamic, String>(
groupBy: (element) => element['group'],
elements: _elements,
sort: true,
groupSeparatorBuilder: (String value) => Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
value,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)),
),
itemBuilder: (c, element) {
return Card(
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Icon(Icons.account_circle),
title: Text(element['name']),
trailing: Icon(Icons.arrow_forward),
),
),
);
},
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.