logo标签列表

Flutter网络图片不适合圆形头像

imagedartflutterflutter-layout
134

我正在尝试从一个API中检索大量图像。我希望这些图像以圆形的形式显示，因此我使用了CircleAvatar小部件，但我始终得到方形格式的图像。 以下是图像的屏幕截图：

enter image description here

这是我正在使用的代码：

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

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

你尝试过使用 fit: BoxFit.cover 吗？ - chemamolins
1
只需使用CircleAvatar的backgroundImage属性即可。6个Flutter CircleAvatar示例教程 - Athira Reddy
25个回答
4

我有同样的问题

CircleAvatar(
             radius: 30.0,
             backgroundImage: NetworkImage(imageURL),
             backgroundColor: Colors.transparent,
             ));

问题已解决。

3

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

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)
            )
        )
    )
)
2

使用 width/height、fit 的组合，并将图像包裹在 ClipOval 中，如下所示：

CircleAvatar(
    child: ClipOval(
        child: Image.network(
            _photo,
            width: 120,
            fit: BoxFit.fill
        ),
    ),
    radius: 50,
),
2
  ClipOval(
     child: Image.asset(
      'assets/dummy.jpg',
       fit: BoxFit.contain,
       matchTextDirection: true,
       height: 50,
   ))
1
虽然这段代码可能/可能不会解决问题，但包括解释如何以及为什么解决问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释。 - Drew
1
以下内容在我的情况下有效：

child: new CircleAvatar(
        backgroundColor: Colors.white,
        child: ClipRect(
          child: Image.network(
            'url-to-image',
            fit: BoxFit.cover,
          ),
        ),
      )
1

我遇到了同样的问题。在使用圆形头像时，使用clipoval会使其变成椭圆形。 但这个方法解决了这个问题。

CircleAvatar(

             radius:25.0,

             backgroundImage: NetworkImage(
                        '${image_url}',


                        ),
                        backgroundColor: Colors.blue,
                            ),
1
                    CachedNetworkImage(
                        placeholder: (context, url) => Center(
                              child: CircularProgressIndicator(),
                            ),
                        errorWidget: (context, url, error) =>
                            new Icon(Icons.error),
                        imageBuilder: (context, imageProvider) => Container(
                            width: 60.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                    image: imageProvider,
                                    fit: BoxFit.contain))),
                        fit: BoxFit.contain,
                        imageUrl:
                            "${Constants.MEDIA_LINK}${state.review.company.logo}"),
1
如果您想要显示覆盖整个圆形头像的图像，可以按照以下方式使用。如果您的图像未加载，则会显示默认的人物图标。
 CircleAvatar(
              child: ClipOval(
                                  child: Center(
                                child: _image == null
                                    ? Icon(
                                        Icons.person,
                                        color: Colors.grey.shade700,
                                        size: 100,
                                      )
                                    : Image.file(
                                        _image,
                                        fit: BoxFit.cover,
                                        width: MediaQuery.of(context).size.width,
                                      ),
                              ),
                            ),

                          radius: 50,
                          backgroundColor: Colors.grey.shade300,
                        ),
1
Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => MyApp7()),
                      );
                    },
                    child: CircleAvatar(
                      radius: 50,
                      // backgroundColor: Colors.amber,
                      child: CircleAvatar(
                          backgroundColor: Colors.grey[50],
                          radius: 50,
                          // child: Image.asset("assets/images/nophotoMale.png")
                          backgroundImage:
                              AssetImage("assets/images/nophotoMale.png")),
                    ),
                  ),
                ],
              ),
1
虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - Tomer Shetah
好的，我会添加。 - Vinojan Isoft
0

这对我来说是工作。我认为这是最好的方式

           CircleAvatar(
                          radius: 30,
                          backgroundColor: Colors.blueGrey.shade100,
                          child: Container(
                            clipBehavior: Clip.antiAlias,
                            decoration: const BoxDecoration(shape: 
                            BoxShape.circle),
                            child: const CachedNetworkImage(
                              url: "https://www.yourimage.com",
                            ),
                          ),
                        )
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接