I have a list like this:
List<ProductModel> productList = [
ProductModel(name: "Oranges", date: "2023-05-01"),
ProductModel(name: "Apples", date: "2023-05-01"),
ProductModel(name: "Kiwis", date: "2023-03-01"),
];
I would like to group the items by date using groupBy and display it in Widget build as so:
2023-05-01:
Oranges
Apples
2023-03-01:
Kiwis
I have already done the grouping in a list and when printed my groupByDate
list looks like so:
{2023-05-01: [Instance of 'ProductModel', Instance of 'ProductModel'], 2023-03-01: [Instance of 'ProductModel']}
Now, the question is how do I use ListView.builder
to display the list items in build method:
class ProductListPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _ProductListPageState();
}
class _ProductListPageState extends State<ProductListPage> {
late StreamController<int> _postsController;
var groupByDate;
@override
void initState() {
_postsController = new StreamController();
getProducts();
super.initState();
}
void getProducts() {
Fetch.getProdcuts().then((value) => {
_postsController.add(1);
List<ProductModel> productList = [];
for (var item in value!) {
final encode = json.encode(item.toJson());
final product = ProductModel.fromJson(jsonDecode(encode));
productList.add(product);
}
groupByDate = groupBy(productList, (obj) => (obj! as ProductModel).date);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: groupByDate.length,
itemBuilder: (context, index) {
final key = groupByDate.keys.elementAt(index);
final values = groupByDate.values.elementAt(index);
return Column(
children: [
Text("$key"),
Column(
children: [
//How do I show the list with values here???
entry.value.map((e) => Text(e.name)).toList(),
])
])
}
)
);
}
class ProductModel extends Object {
String? name;
String? date;
ProductModel({this.name, this.date});
ProductModel.fromJson(Map<String, dynamic> json) {
name = json["name"];
date = json["date"];
}
Map<String, dynamic> toJson() => {
'name': name,
'date': date,
};
}
2
Answers
All you have to do is define your
groupByDate
variable asMap
. Instead of justchange that to
so the compiler would know it’s a map.
Edit. Upon question clarification, here’s how you show the list of grouped values
You need to use
groupByDate.entries
to get a list of entries in aMap
, that way you will have access to bothkey
&value
: