This is GridView (prodcuts list)
GridView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 2.5,
mainAxisSpacing: 2.5,
mainAxisExtent: 310,
),
children: _productsList.map(
(item) =>
Padding(
padding: EdgeInsets.all(MediaQuery.of(context)
.getProportionateScreenWidth(5)),
child: GestureDetector(
onTap: () {
// Navigator.of(context).push(MaterialPageRoute(
// builder: (context) => ProductDetails(
// products: _productsList[index],
// )));
// const ProductRoute(productsData: product.id)));
},
child: Container(
padding: EdgeInsets.all(
MediaQuery.of(context)
.getProportionateScreenWidth(10),
),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.1),
borderRadius: BorderRadius.circular(15)),
child: Column(
children: [
AspectRatio(
aspectRatio: 1,
child: Container(
padding: EdgeInsets.all(
MediaQuery.of(context)
.getProportionateScreenWidth(10),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(15)),
child: item.sale != "0"
? badges.Badge(
position:
badges.BadgePosition.topEnd(
top: -10, end: -10),
showBadge: true,
badgeContent: Center(
child: Text(
'-${item.sale}%',
style: const TextStyle(
color: Colors.white),
)),
ignorePointer: false,
badgeStyle: badges.BadgeStyle(
badgeColor: Colors.red,
shape: badges.BadgeShape.square,
borderRadius:
BorderRadius.circular(15),
padding: const EdgeInsets.all(5),
),
child: FadeInImage(
image: NetworkImage(
"http://216.250.11.251/market_api/v1/static/product_images/${item.image}"),
placeholder: const AssetImage(
"assets/images/no.png"),
imageErrorBuilder:
(context, error, stackTrace) {
return Image.asset(
'assets/images/no.png',
fit: BoxFit.fitWidth);
},
fit: BoxFit.fitWidth,
),
)
: FadeInImage(
image: NetworkImage(
"http://216.250.11.251/market_api/v1/static/product_images/${item.image}"),
placeholder: const AssetImage(
"assets/images/no.png"),
imageErrorBuilder:
(context, error, stackTrace) {
return Image.asset(
'assets/images/no.png',
fit: BoxFit.fitWidth);
},
fit: BoxFit.fitWidth,
),
),
),
const SizedBox(height: 7.5),
Text(
"${item.name}",
style: const TextStyle(
fontWeight: FontWeight.bold),
maxLines: 1,
),
const SizedBox(height: 7.5),
Text(
(item.desc == '' ? item.desc : item.code) as String,
style: const TextStyle(
color: Colors.grey, fontSize: 11),
maxLines: 2,
),
const SizedBox(height: 7.5),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"TMT ${item.price}",
style: TextStyle(
color: Colors.red,
fontSize: MediaQuery.of(context)
.getProportionateScreenWidth(12.5),
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 7.5),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(
MediaQuery.of(context)
.getProportionateScreenWidth(6)),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: Colors.red.withOpacity(0.3)),
),
child: Padding(
padding: EdgeInsets.only(
right: MediaQuery.of(context)
.getProportionateScreenWidth(
12.5),
left: MediaQuery.of(context)
.getProportionateScreenWidth(
12.5)),
child: const Icon(
Icons.favorite_border_rounded,
color: Colors.red,
size: 20,
),
),
),
SizedBox(
width: MediaQuery.of(context)
.getProportionateScreenWidth(5),
),
Container(
padding: EdgeInsets.all(
MediaQuery.of(context)
.getProportionateScreenWidth(6)),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(15),
border: Border.all(color: Colors.red),
),
child: Padding(
padding: EdgeInsets.only(
right: MediaQuery.of(context)
.getProportionateScreenWidth(
12.5),
left: MediaQuery.of(context)
.getProportionateScreenWidth(
12.5)),
child: const Icon(
Icons.shopping_cart,
color: Colors.white,
size: 20,
),
),
),
],
),
],
),
),
),
),
).toList(),
),
How make Flutter GridView onTap send selected item data to next screen? At least you can come up with something like this
>Solution :
You can do it with GridView Builder, here’s a sample code
Flexible(
child: GridView.builder(
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
physics: const ScrollPhysics(),
itemCount: _productsList.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ProductDetails(
products: _productsList[index],
)));
},
child: Container(child: Text("${_productsList[index]}"),));
},
),
)
or same as your code, just pass the "item", not _productsList[index]
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ProductDetails(
products: item,
)));