How can I make a Card height extend based on content?

Question

I am creating a Card which has a header and a grid view of photos. Below is the code:

_getImageWidget(Post post, AppConfig config) {
    if (post.photoPaths != null && post.photoPaths.length > 0) {
      var url = config.imagePathDomain + post.photoPaths[0];
      try {
        return Expanded(
            child: GridView.count(
                crossAxisCount: 3,
                shrinkWrap: false,
                children: post.photoPaths.map<Widget>((String path) {
                  return CachedNetworkImage(
                    imageUrl: url,
                  );
                }).toList()));
      } catch (err) {
        return Container();
      }
    }
    return Container();
  }

  @override
  Widget build(BuildContext context) {
    var config = AppConfig.of(context);
    return BlocBuilder<UserInfoBloc, UserInfo>(builder: (_, userInfo) {
      return Container(
          width: MediaQuery.of(context).size.width,
          child: Card(
              child: Column(children: <Widget>[
            Row(
              children: <Widget>[
                IconButton(
                  iconSize: 30,
                  icon: roundImage(post.userPicture, Icon(Icons.person)),
                  onPressed: () {},
                ),
                Text('@${userInfo.username}')
              ],
            ),
            this._getImageWidget(post, config),
          ])));
    });
  }

The header in the Card is a Row includes a IconButton and Text . The body of the Card is a gridview which includes a few photo.

Below is the screenshot when I run the code. You can see that the photo is shown only a half. And I can scroll vertically on the grid view. The number of photos is dynamic which means there could be many rows of photos in the GridView . How can I make the Card extend based on its children?

Answer 1

Try using a fixed size container and using the BoxFit property on the container.

Something like this:

new Container(
    width: 80.0,
    height: 80.0,
    decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: CachedNetworkImageProvider(url),
            ),
          ),
        ),

Edit : Try to remove itemExtent from ListView.builder

Answer 2

By simply setting your CachedNetwork image to use a fit: BoxFit.cover that will resize to fill the content while preserving ratio (this means you may lose some of its details) or fit: BoxFit.contain that will try to be as big as possible while containing the entire source (image) within the bounds.

If that doesn't help as well (as I'm not seeing the entire tree so I'm not sure about the ancestors of your Card ) you can also replace the return of your BlocBuilder 's child to be a FittedBox instead of a Container and apply the same logic for the fit property, but for the whole card instead.