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

Question

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

134

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

这是我正在使用的代码：

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

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

- BraveEvidence

你尝试过使用 fit: BoxFit.cover 吗？ - chemamolins

1

只需使用CircleAvatar的backgroundImage属性即可。6个Flutter CircleAvatar示例教程 - Athira Reddy

25个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amina Bekir · Answer 1

在这个解决方案中，您可以通过容器调整图像大小，并通过圆形剪辑图像，然后通过卡片添加阴影到图像。

Container(
  width: 100,
  height: 100,
  child: InkWell(
    onTap: () {},
    child: Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        side: BorderSide(color: Colors.grey),
        borderRadius: const BorderRadius.all(
          Radius.circular(45.0),
        ),
      ),
      child: Container(
        child: ClipOval(
            child: CachedNetworkImage(
          imageUrl: '{image-url}',
          imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.fill,
              ),
            ),
          ),
          placeholder: (context, url) => Container(
            height: 5,
            width: 5,
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            ),
          ),
          errorWidget: (context, url, error) => Icon(Icons.error),
        )),
      ),
    ),
  ));

- Schbabako · Answer 2

我尝试了几次才弄清楚这个问题...所有这些答案都没有帮助到我。最后，我将插入圆形头像的图片拉伸到了它上面的容器的边界。也许还有人在阅读这里的答案后仍然遇到了我曾经遇到的问题。我使用FittedBox解决了约束问题。

             GestureDetector(
                    onTap: () => getImage(),
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(
                        color: Colors.orange,
                      ),
                      //padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                      child: Container(
                          width: 140,
                          height: 160,
                          child: FittedBox(
                            child: picture(),
                          )),
                    ),
                  ),

这是我使用的picture()代码。我认为picture()内部的container不再必要，你可以自己尝试一下 :)

Widget picture() {
if (_image == null) {
  return CircleAvatar(
      radius: 70,
      child: Icon(
        Icons.person,
        size: 150,
        color: Colors.grey[900],
      ));
} else {
  return Container(
    width: 140,
    height: 140,
    child: CircleAvatar(
      radius: 70,
      backgroundImage: FileImage(_image),
    ),
  );
}

- Jitesh Mohite · Answer 3

使用 AvatarView 库 https://pub.dev/packages/avatar_view，它提供了在圆形/矩形形式中显示网络/资源图像的功能。

要使用，请添加以下依赖项。

dependencies:
  avatar_view: ^1.0.0+3

示例：

        AvatarView(
                  radius: 60,
                  borderColor: Colors.yellow,
                  avatarType: AvatarType.CIRCLE,
                  backgroundColor: Colors.red,
                  imagePath:
                  "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
                  placeHolder: Container(
                    child: Icon(Icons.person, size: 50,),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error, size: 50,),
                  ),
                ),

它还提供了围绕小部件添加边框的功能，更多示例请访问上面的链接。

输出：

- Rasmus Christensen · Answer 4

来到这里是因为我也遇到了CirclAvatar和AppBar的问题，其中图像会在高度上拉伸。由于我无法在使用的组件中提供半径，所以我只是在应用栏中使用图像时将其包装在列中。这样可以使图像不在高度上拉伸。这样我就可以从外部始终控制大小。

Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 40, width: 40, child: ProfileBadge(),),
                ],
              )

- oliverbytes · Answer 5

这个对我起作用了

Transform.scale(
        scale: 0.6,
        child: ClipOval(
          child: Image.network(
            <IMAGE URL HERE>,
          ),
        ),
      )