0

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.

2 Answers2

0

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

x23b5
  • 649
  • 5
  • 14
  • Hi, yeah setting the height would definitely fix this issue. However, some images would be completely blown out in terms of aspect ratio. Any ideas about maintaining the normal image height? –  Oct 05 '20 at 13:53
  • Well, Boxfit will make sure you have the full image visible. I don't think BOTH the original image size AND no resizing will be possible at the same time. – x23b5 Oct 06 '20 at 14:18
0
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).