How can I build a gridview with a dynamic height in Dart?

Question

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,
                              //   );
                              // },
                            );
                      

Answer 1

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) {
                ....
              },
            ),
          ),
        )