为 Flutter 的 Card 小部件设置特定高度

Question

I'm trying to expand the height of a given grid of cards, so they are able to fit some more information than they currently do. These cards are wrapped by a GridView.count() that is shrinked, since I'm going to put more things below this widget.

As for now, the cards look like these, in which you can see that one of them overflows the text at the bottom, which is an undesired behavior (especially when I want the cards to have some bottom padding):

Being this the case, I would like to know if it's possible to manually change the card's height. I'm maybe letting this concrete configuration stay and remove some info, since I like the fact that the cards currently maintain their 1x1 proportion, but for curiosity sake, I would like to discover how to do this.

I tried many things, such as wrapping the Card widget with a Container or a SizedBox and manually setting the height, but none of these approaches change anything.

I guess that the problem may be in the GridView itself. This is how it looks:

return FutureBuilder<List<Event>>(
        future: new EventsService().getEventsForCoords(),
        builder: (context, AsyncSnapshot<List<Event>> snapshot) {
          if (snapshot.hasData) {
            return GridView.count(
                crossAxisCount: 2,
                shrinkWrap: true,
                children: generateProximityEventCards(snapshot.data));

          } else {
            return CircularProgressIndicator();
          }
        });

As you can guess, the generateProximityEventCards method is the one that prints the Card widgets at the end. This is how the method looks as for now:

List<Widget> generateProximityEventCards(List<Event> eventList) {
    // Render each card
    return eventList.map((Event ev) {
      return Card(
          semanticContainer: true,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(7),
          child: SizedBox(
            height: 600,
            child: Column(
              children: <Widget>[
                Image(
                  alignment: Alignment.topCenter,
                  fit: BoxFit.fitWidth,
                  image: ev.imageUrl,
                  height: 110,
                  width: 200,
                ),
                Container(
                  child: Text(ev.name),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
                Container(
                  child: Text(ev.startDate.toString()),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
                Container(
                  child: Text(ev.address),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
              ],
            ),
          ));
    }).toList();
  }

So, in conclussion: how can I change the height of the cards so they can hold more information?

Thanks!

Answer 1

GridView isn't really designed to have tiles of different size. A good option is to use the package flutter_staggered_grid_view .

Now your tile sizes can even be dynamic, check out the code for the gif above!

To automatically fit some variable length text somewhere you can use the package auto_size_text .