Сделать FadeInImage.memoryNetwork визуализировать круговое обрезанное изображение

Question

Я пытаюсь создать что-то вроде CircleAvatar, но с виджетом Stacked, имеющим CircularProgressIndicator и FadeInImage.memoryNetwork в качестве детей, чтобы я получал приятную анимацию загрузки (бонус: изображение-заполнитель), когда я получаю изображение на медленнойИнтернет.

Все остальное работает нормально, но я не могу понять, как обрезать извлеченное изображение в круглую форму.Я прочитал здесь , что я могу использовать ClipOval, но я не смог найти никакого руководства по его использованию.

Stack(children: <Widget>[
          Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
          Center(
            child: FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image:
                  'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
            ),
          ),
        ],
      ),
    ));

Примечание: я использую transparent_image библиотека для заполнителя для получения прозрачного заполнителя при отображении анимации загрузки.

Answer 1

На всякий случай это кому-нибудь поможет, модифицированный код, который работал для меня:

Stack(
  fit: StackFit.passthrough,
    children: <Widget>[
      Center(
          child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
      Center(
        child: ClipOval(
          child: FadeInImage.memoryNetwork(
            fit: BoxFit.contain,
            placeholder: kTransparentImage,
            image: 'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
          ),
        ),
      ),
    ],
),
));

Answer 2

Это то, что я использую в одном из моих проектов, я думаю, вы можете создать что-то похожее, а затем вместо использования FadeInImage напрямую использовать пользовательский виджет.

class AvatarFadeImage extends StatelessWidget {
  final String imageUrl;

  AvatarFadeImage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: imageUrl,
        fit: BoxFit.contain,
      ),
    );
  }
}

Используйте это так:

Stack(children: <Widget>[
          Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
          Center(
            child: AvatarFadeImage("https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg"),
          ),
        ],
      ),
    ));

PS: Вы также можете посмотреть на https://pub.dartlang.org/packages/cached_network_image и https://flutter.io/cookbook/images/cached-images/

Плагин может помочь вам.