Flutter Column bottom overflowed by pixels

Question

I'm trying to show an item in a Gridview with the format: Price text -> item image -> title text

Im using a column to achieve it and it seems like the tile in GridView has a fixed height, so when the image gets too big it will lead to bottom overflow.

So my question is, is there a way to keep the Price and title text and only squeeze the middle image? Something similar to android/iOS layout constraints? Thanks guys.

[Update] I have pasted the code snippet as well.

There is one more thing I have tried is to set the image with fixed height and width and it works, but that requires me to carefully find a suitable extent which is not really flexible to me. And GridTile also does not really give me the layout that I want. Is there really no way that I can just squeeze the middle view(image in this case here) with Column?

@override
Widget build(BuildContext context) {
  final imageUrl = doc['main_image']['downloadURL'];
  Widget image;
  if (imageUrl != null) {
    image =  Image.network(
          imageUrl,
          fit: BoxFit.scaleDown,
        );
  } else {
    image = Container(
      color: Colors.grey,
    );
  }

  String price = '\$' + doc[FIREBASE_COL_PRICE].toString();
  return Card(
      child: Column(
    children: <Widget>[
      Align(
        alignment: Alignment.centerRight,
        child: Text(
          price,
          maxLines: 1,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: image,
      ),
      Align(
        alignment: Alignment.centerLeft,
        child: Text(
          doc[FIREBASE_COL_NAME],
          maxLines: 1,
        ))
    ],
  ));
}

Answer 1

Have you considered using Expanded widgets? It should distribute the size of widgets inside the Card .

GridView builder I used to test

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: List.generate(
    20, (index) {
      return gridCard(index);
    },
  ),
),

Cards for the GridView. I've modified the snippet you've provided.

gridCard(int index) {
  final imageUrl = "URL";
  Widget image;
  if (imageUrl != null) {
    image = Image.network(
      imageUrl,
      fit: BoxFit.scaleDown,
    );
  } 
  else {
    image = Container(
      color: Colors.grey,
    );
  }
  
  String price = '\$1234';
  return Card(
    child: Container(
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Align(
              alignment: Alignment.centerRight,
              child: Text(
                price,
                maxLines: 1,
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: image,
            ),
          ),
          Expanded(
            flex: 1,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'Some Text $index',
                maxLines: 1,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

Demo