Flutter- Stack takes a lot of height despite the children

Advertisements

I’m using Listview.builder to show products.
I use mediaQuery to check if screen width is big enough then it would use Grideview.builder() as show in image below but there is a problem with Grideview.builder() only which is this excees Stack Height, i checked with flutter devTools and found the the column inside stack is just taking it min size so what causes stack to be this big?

child: Stack(
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // Work Image
          AspectRatio(
            aspectRatio: 16.0 / 9.0,
            child: Image.asset(
              Constants.appLogo,
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(
              left: Sizes.PADDING_18,
              bottom: Sizes.PADDING_8,
              right: Sizes.PADDING_8,
            ),
            // Work Title, Adress
            child: Row(
              children: [
                Flexible(
                  child: Text(
                    testAdress.length > 25
                        ? '${testAdress.substring(0, 25)}...'
                        : testAdress,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    style: const TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: Sizes.TEXT_SIZE_22,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(
              left: Sizes.PADDING_18,
              bottom: Sizes.PADDING_8,
              right: Sizes.PADDING_8,
            ),
            //SubTitle
            child: Row(
              children: [
                Flexible(
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      testAdress.length > 34
                          ? '${testAdress.substring(0, 34)}...'
                          : testAdress,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                        fontSize: Sizes.TEXT_SIZE_14,
                        color: Colors.grey.withOpacity(0.8),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
          ],
        ),
      ),
    ],
  ),

>Solution :

Default childAspectRatio:1 on gridView, you can set childAspectRatio: 16.0 / 9.0

   childAspectRatio: 16.0 / 9.0,

Leave a Reply Cancel reply