I am trying to build a GridView that adjusts its height automatically according to the data provided. However, I am encountering a problem where an additional line (Top Discount of the Sale) appears after the rating bar for some products, but the space for that line is not reserved for other products that do not have it. As a result, I get a RenderFlex error when I try to implement this. How can I properly handle this situation?
GridView.builder(
padding: const EdgeInsets.all(12.0),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 6.0,
childAspectRatio: .60,
mainAxisSpacing: 6.0,
),
itemCount: state
.productListModel!.productModel!.length,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, index) {
return InkWell(
splashFactory: NoSplash.splashFactory,
onTap: () {
Helper.push(
context,
ProductView(
productId: state.productListModel!
.productModel![index].sId,
));
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
alignment:
Alignment.bottomRight,
children: [
SizedBox(
width: WidgetStyles()
.theWidth(context),
height: WidgetStyles()
.theHeight(
context) /
4,
child: ImageView(
imageUrl: state
.productListModel!
.productModel![index]
.photos![0],
fit: BoxFit.contain,
),
),
Positioned(
right: 5,
bottom: 5,
child: Container(
padding:
const EdgeInsets
.all(8.0),
decoration:
const BoxDecoration(
color: Colors
.white,
shape: BoxShape
.circle),
child: InkWell(
onTap: () async {
String deepLink = await FirebaseDynamiclinkService
.createDynamicLink(
true,
state
.productListModel!
.productModel![
index]
.sId!);
log(deepLink);
Helper.shareProduct(
context,
'MyEComApp\n♥️ Proudly made for kerala\n\n${state.productListModel!.productModel![index].productname!}\n${state.productListModel!.productModel![index].seller!.organization!}\n*INR ${state.productListModel!.productModel![index].price!}*\n$deepLink',
state
.productListModel!
.productModel![
index]
.photos![0]);
},
child: const Icon(
Icons.share,
size: 18,
),
),
))
],
),
Helper.allowHeight(context, 5.0),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Flexible(
child: Text(
state
.productListModel!
.productModel![
index]
.productname!
.toString(),
overflow:
TextOverflow.clip,
maxLines: 1,
style:
const TextStyle(
fontSize: 13,
fontWeight:
FontWeight.w500,
),
),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Flexible(
child: Text(
state
.productListModel!
.productModel![
index]
.seller!
.organization!
.toString(),
overflow:
TextOverflow.clip,
style: TextStyle(
fontSize: 10,
color: AppColors
.greyAA,
fontWeight:
FontWeight.w500,
),
),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"\u{20B9} ${state.productListModel!.productModel![index].price!}",
style: TextStyle(
fontSize: 14,
color:
AppColors.black,
fontWeight:
FontWeight.bold,
),
),
Helper.allowWidth(
context, 15),
state
.productListModel!
.productModel![
index]
.price !=
state
.productListModel!
.productModel![
index]
.orginalprice
? Text(
"\u{20B9} ${state.productListModel!.productModel![index].orginalprice}",
maxLines: 1,
style:
const TextStyle(
overflow:
TextOverflow
.ellipsis,
decoration:
TextDecoration
.lineThrough,
fontSize: 14,
color:
Colors.red,
fontWeight:
FontWeight
.bold,
),
)
: const SizedBox
.shrink(),
],
),
const SizedBox(height: 8),
],
),
]),
);
},
// separatorBuilder: (context, index) {
// return const SizedBox(
// width: 10.0,
// );
// },
);
i would like to use StaggeredGridView
plugins, this is my code that i've tried to use and it work properly that you might needed to create a responsive gridview that contain sort list of data
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: SizedBox(
width: double.infinity,
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
mainAxisSpacing: 10,
crossAxisCount: 2,
crossAxisSpacing: 10,
itemCount: ...,
itemBuilder: (ctx, i) {
....
},
),
),
)