时间戳

首页 > 解决方案 > 使 FadeInImage.memoryNetwork 渲染圆形裁剪图像

flutter - 使 FadeInImage.memoryNetwork 渲染圆形裁剪图像

问题描述

我正在尝试创建类似 CircleAvatar 的东西，但是使用具有 aCircularProgressIndicator和 aFadeInImage.memoryNetwork作为子级的 Stacked 小部件，这样当我在慢速 Internet 上获取图像时，我可以获得一个不错的加载动画（奖励：占位符图像）。

其他一切工作正常，但我无法弄清楚如何将获取的图像裁剪成圆形。我在这里读到我可以使用 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占位符库以在显示加载动画时获取透明占位符。

标签： flutter

解决方案

这是我在我的一个项目中使用的，我想你可以创建类似的东西，然后直接使用自定义小部件而不是使用 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/

插件可能只是为您解决问题。

推荐阅读