Flutter ListView grouped - flutter

Question

How can I achieve something like this
https://i.stack.imgur.com/XShsq.png
So far I handle to get this
https://i.stack.imgur.com/GIs0d.png
But I dont know how to separate each container
this is my actual code
Widget build(BuildContext context) {
TextStyle boldStyle = const TextStyle(fontWeight: FontWeight.bold);
return BlocConsumer<AppCubit, AppState>(
listener: (context, state) {},
builder: (context, state) {
List<PurchaseCategory> purchases =
AppCubit.get(context).purchasesCategories;
return Container(
decoration: buildBoxDecoration(context),
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
child: GroupedListView(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
elements: purchases,
groupBy: (PurchaseCategory purchase) => purchase.date,
groupHeaderBuilder: (PurchaseCategory purchase) => Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'${purchase.date}',
style: boldStyle,
),
Text(
'Total: 400 \$',
style: boldStyle,
),
],
),
const Divider(
color: Colors.red,
),
],
),
),
itemBuilder: (BuildContext context, PurchaseCategory purchase) {
return ListTile(
contentPadding: const EdgeInsets.all(0),
leading: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: purchase.categoryColor,
),
child: Icon(purchase.categoryIcon),
),
title: Text(
purchase.description,
style: boldStyle,
),
subtitle: Text(purchase.categoryName),
trailing: Text(
'\$ ${purchase.price}',
style: boldStyle,
),
);
},
),
);
},
);
}
I handle to grouped by dates but I would like to grouped in different containers as the first picture