flutterdartflutter-layoutflutter-imageflutter-layoutbuilder

Fade In Network Image resizes after loading in


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.


Solution

  • 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).