How to display vertical items in the card view in Flutter

Question

I'm trying to display items in the card vertically, but in the card content I'm facing an issue that is, "Bottom overflowed by 52 pixels".

Here, I'm attaching code, my design's screenshot, and the screenshot of what actually I need. Please help!

Below is my code.

 Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
    FlutterMoneyFormatter(amount: items[index].price);

return Container(
  child: Card(
    elevation: 5.0,
    margin: EdgeInsets.all(8.0),
    child: Column(
      children: [
        Container(
          child: Image.network(
              "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
              width: 100,
              height: 100,
              fit: BoxFit.fill),
        ),
        Column(
          children: [
            Container(
              child: Text(items[index].title,
                  style: titleTextStyle,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis),
              margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                  margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                  child: Text(items[index].subtitle,
                      style: subtitleTextStyle)),
            ),
            Container(
              margin: EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(formatter.output.symbolOnLeft,
                      style: priceTextStyle),
                  Text("ADD TO CART", style: addToCardTextStyle)
                ],
              ),
            )
          ],
        ),
      ],
    ),
  ),
);

Code of Grid View

Widget buildGridView() {
return Expanded(
  child: GridView.count(
      crossAxisCount: 2,
      scrollDirection: Axis.vertical,
      physics: PageScrollPhysics(),
      shrinkWrap: true,
      children: List.generate(items.length, (index) {
        return buildRowItemsGrid(context, index);
      })),
);

Solution

You need to set an appropriate childAspectRatio in the GridView like this.

GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 2/3,     //<-- width/height ratio depending on the child's content. Set accordingly.
        //...
)

Edit:

The above part will solve the overflow problem. In addition to that, you can make the size of the Image widget adaptive like this so it can take up more space when available.

Image.network(
                "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
                width: MediaQuery.of(context).size.width / 2.8,
                height: MediaQuery.of(context).size.width / 2.8,
                fit: BoxFit.fill,
              )

You can also set the Column's mainAxisAlignment to spaceEvenly so its children can take up the space evenly when more space is available vertically.

Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      //...
)

Comments

[Darshit Anjaria]

it is working, but it consumes extra space at the bottom after "ADD TO CART" text.

[Jigar Patel]

Yes, that is why I mentioned that you need to set an "appropriate" value to childAspectRatio. 2/3 is only an example value. You don't necessarily need to set it to 2/3 exactly. You can play around with the value to set a suitable value to it. Like you can try 2/2.8, 2/2.7 etc.

[Darshit Anjaria]

okay, I got it. How it looks like if I put media query here? because in future anything changes in the size of text or the height of the image.

[Jigar Patel]

@DarshitAnjaria Using MediaQuery to set the childAspectRatio for the GridView doesn't make sense. Because it gives the device's size and the child aspect ratio need to be set depending on the content of the child. Instead, you can use MediaQuery to set the width and height of the Image widget inside the child so it becomes adaptive to the screen size. I'll edit the answer to include that.