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