I created Cart page on my Marketplace application, but I'm getting struggle to make a list of products on cart that grouped - based on the market that sells it. I can make a list of the shops with ListView.Builder. What should I do to add the product on every market list?
I tried to use ListTile and it is working, but I don't think that's a good idea since I should show pictures e. g. counting button etc. I give an UI here.
This is my current code:
ListView.builder(
itemCount: _cKeranjangProduk.list.length,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
KeranjangProduk keranjangProduk = _cKeranjangProduk.list[index];
Toko toko = Toko(
nama_toko: keranjangProduk.nama_toko,
id_toko: keranjangProduk.id_toko);
return SizedBox(
width: MediaQuery.of(context).size.width,
child: Container(
margin: EdgeInsets.fromLTRB(
10,
index == 0 ? 16 : 8,
10,
index == _cKeranjangProduk.list.length - 1 ? 16 : 8,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: 6,
color: Colors.black26,
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(left: 16, top: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
keranjangProduk.nama_toko,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
// textAlign: TextAlign.start,
),
],
)),
Padding(
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: keranjangProduk.produk
.map((e) =>
ListTile(
title: Text(e.nama_obat),
subtitle: Text(
e.harga_obat.toString(),
)),
)
.toList(),
)),
],
),
),
);
},
);