如何制作 FadeInImage 圆形？

Question

我正在使用FadeInImageWidget 在我的应用程序中显示网络图像。由于我想使用 FadeInImage 的占位符属性，所以我不能使用NetworkImage或Image.NetworkWidget。

现在我想FadeInImage循环，所以我尝试使用以下选项。

1. 我尝试将其包裹FadeInImage在内部Container使其成为圆形，但该DecorationImage属性不允许FadeInImage
2. 我尝试使用CircleAvatar但 backgroundImage 属性CircleAvatar 不允许FadeInImage
3. 我尝试使用cached_network_image颤振库但面临同样的问题
4. 我试过的最后一个选项是ClipRRect用来使它循环但仍然不起作用

以下是我的代码

Container(
      width: 50.0,
      height: 50.0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: FadeInImage(
            placeholder: AssetImage("images/alex.jpg"),
            image: NetworkImage(
                "https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg")),
      ),
    );

Answer 1

设置 FadeInImage 的宽度和高度属性，它应该可以工作。

ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: CachedNetworkImage(
            fit: BoxFit.cover,
            width: 50,
            height: 50,
            placeholder: AssetImage("images/alex.jpg"),
            imageUrl:
                "https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg"),
      )

Answer 2

用剪辑椭圆包裹 FadeInImage 小部件，然后用纵横比包裹剪辑小部件

纵横比(
      纵横比：1/1，
      孩子：ClipOval（
        子项：FadeInImage.assetNetwork(
            适合：BoxFit.cover，
            占位符：“你的占位符路径”，
            图片：“您的图片网址”），
      ),
    );`