Search code examples
flutteruser-interface

Can't set height and width of the child in the GridView.count in Flutter


I set height and width in the GridView.Count, but they are not working. I also wrote with SizedBox and Card, but it is not still working. So, I change to Container for the card. It still doesn't work I also see that the error is showing in the Column, but I can't handle. Please look at my code and screen shot.How can I handle those errors and overflow of column?

Performing hot reload...
Syncing files to device iPhone 15 Pro...
Reloaded 1 of 703 libraries in 493ms (compile: 26 ms, reload: 167 ms, reassemble: 280 ms).

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 89 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///Users/kaungmyattun/Desktop/Flutter%20Practice/coffee_shop/lib/pages/home.dart:229:16
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#2fb88 OVERFLOWING
...  parentData: offset=Offset(8.0, 8.0) (can use size)
...  constraints: BoxConstraints(w=151.5, h=147.5)
...  size: Size(151.5, 147.5)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: start
...  textDirection: ltr
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================
Widget build(BuildContext context) {
    return GridView.count(
      // childAspectRatio: ,
      shrinkWrap: true,
      primary: false,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 2,
      children: <Widget>[
        ItemCard(),
      ],
    );
  }
}

class ItemCard extends StatelessWidget {
  const ItemCard({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 156,
      height: 500,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(12)),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 3,
            blurRadius: 10,
            offset: Offset(0, 3),
          )
        ],
      ),
      child: Padding(
        padding: EdgeInsets.fromLTRB(8, 8, 8, 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          // runSpacing: 8,
          children: <Widget>[
            Stack(
              children: <Widget>[
                Container(
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  ),
                  child: Image(
                    fit: BoxFit.cover,
                    image: AssetImage('assets/images/2coffee2.png'),
                    width: 140,
                    height: 128,
                  ),
                ),
                Positioned(
                  left: 89,
                  bottom: 100,
                  child: Container(
                    width: 51,
                    height: 28,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(topRight: Radius.circular(12), bottomLeft: Radius.circular(12)),
                      color: Color.fromARGB(100, 0, 0, 0),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.star_outlined,
                          color: Color(0xffFBBE21),
                          size: 12,
                        ),
                        SizedBox(
                          width: 4,
                        ),
                        Text(
                          '4.8',
                          style: TextStyle(
                            fontSize: 8,
                            fontWeight: FontWeight.w700,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
            SizedBox(
              height: 8,
            ),
            Text(
              'Caffe Mocha',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'Deep Foam',
              style: TextStyle(
                color: Colors.grey,
                fontSize: 12,
              ),
            ),
            SizedBox(
              height: 8,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  '\$4.53',
                  style: TextStyle(color: Colors.black, fontSize: 18, fontWeight: FontWeight.w700),
                ),
                IconButton(
                  constraints: BoxConstraints(maxHeight: 32, maxWidth: 32, minHeight: 32, minWidth: 32),
                  style: ButtonStyle(
                    backgroundColor: MaterialStatePropertyAll(Color.fromARGB(255, 198, 124, 78)),
                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12)))),
                  ),
                  onPressed: () {},
                  icon: Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 16,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

My error image


Solution

  • The size of children in GridView depends on childAspectRatio:width/height. You can provide

    GridView.count(
       childAspectRatio: 156/500,