Размер изображения Fade In Network Image изменяется после загрузки в

Question

Вот видео с моей проблемой https://www.youtube.com/watch?v=wskX_bZNExw

Если вы заметили, после загрузки сетевого образа он изменяет размер (обычно удаляя пустое пространство).

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

Как я могу заставить изображение занимать МИНИМАЛЬНОЕ пространство с момента его появления на экране, а не после того, как оно успеет изменить размер?

Благодарю.

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

Я понял, вы хотите разделить высоту на ширину, а затем умножить ее на ширину вашего контейнера (в этом случае я хочу, чтобы края фотографии совпадали с телефоном).

Answer 2

Вы можете установить height окружающих Container к фиксированному значению и работать с fit: BoxFit.fitheight в вашем FadeInImage.