淡入网络图像加载后调整大小

Question

这是我的问题的视频 https://www.youtube.com/watch?v=wskX_bZNExw

如果您注意到，加载网络图像后，它会调整大小（通常会删除空 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();
  }

如何让图片在屏幕上弹出时只占用最小 space，而不是在有时间调整大小之后？

谢谢。

Answer 1

您可以将周围 Container 的 height 设置为固定值，并在您的 FadeInImage.

中使用 fit: BoxFit.fitheight

Answer 2

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();
  }

我想通了，您想将高度除以宽度，然后再乘以容器的宽度（在这种情况下，我希望照片的边缘与 phone ).

淡入网络图像加载后调整大小

Fade In Network Image resizes after loading in

dart

flutter

flutter-layout

flutter-image

flutter-layoutbuilder