Fade In Network Image resizes after loading in

Question

Here is a video of my issue https://www.youtube.com/watch?v=wskX_bZNExw

If you notice, after the network image loads in, it resizes (typically removing empty space).

  Widget _buildPostThumbnail(List<SubmissionPreview> thumbnails) {
    if (thumbnails != null && thumbnails.isNotEmpty) {
      var image = thumbnails.first.resolutions.last;
      return Container(
        width: double.maxFinite,
        child: FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: image.url.toString(),
        ),
      );
    }
    return Container();
  }

How can I get the image to only take up the MINIMUM space from the instant it pops up on screen, not after it has time to resize?

Thanks.

Answer 1

Widget _buildPostThumbnail(List<SubmissionPreview> thumbnails) {
    if (thumbnails != null && thumbnails.isNotEmpty) {
      var image = thumbnails.first.resolutions.last;
      return FadeInImage.memoryNetwork(
        fadeInDuration: Duration(milliseconds: 200),
        placeholder: kTransparentImage,
        image: image.url.toString(),
        width: double.maxFinite,
        fit: BoxFit.fitWidth,
        height: (image.height.toDouble() / image.width.toDouble()) * MediaQuery.of(context).size.width,
      );
    }
    return Container();
  }

I figured it out, you want to divide the height by the width and then multiply it by the width of your container (in this case I want the edges of the photo to line up with the phone).

Answer 2

You could set the height of the surrounding Container to a fix value and work with fit: BoxFit.fitheight in your FadeInImage.