Flutter Network Image不适合圆形头像

Question

我试图从api中检索一堆图像。我希望图像以圆形形式显示，所以我使用的是CircleAvatar Widget，但我一直在以方形格式获取图像。这是图像的屏幕截图

这是我正在使用的代码

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

我尝试使用BoxFit的所有属性，如cover，contain，fitWidth，fitHeight等，但它们都不起作用。

Answer 1

这将工作：您需要使用backgroundImage:property以使其适合Circle。

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

要使用虚拟占位符进行检查：

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )

Answer 2

在AppBar动作小部件列表中有类似的问题。

这对我有用：

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),

Answer 3

如果您不想使用CircleAvatar，请按以下步骤操作。

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

Answer 4

在这种情况下，您可以使用：

CircleAvatar(radius: 50.0,backgroundImage: NetworkImage("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),),

要么

CircleAvatar(radius: 50.0,backgroundImage: AssetImage("assets/images/profile.jpg"),),

工作正常......

Answer 5

这是一张带阴影的圆形图片：

child: AspectRatio(
    aspectRatio: 1/1,
    child: Container(
        margin: EdgeInsets.all(
            10.0
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100.0),
            boxShadow:[
              BoxShadow(
                  color: Color.fromARGB(60, 0, 0, 0),
                  blurRadius: 5.0,
                  offset: Offset(5.0, 5.0)
              )
            ],
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(user.image)
            )
        )
    )
)