Question

我想做点什么

/Users/novalagung/Documents/go/src/test-import/lib/

我正在寻找的视觉效果就像gmail显示用户图像的方式。此代码 - 来自文档 - 工作正常，但我的图像应该从网址加载，而不在资产中。

Answer 1

NetworkImage是您正在寻找的课程。

valueString = string.Join(",", valueString.Split(',')
    .Select(x => x.Trim())
    .Where(x => !string.IsNullOrWhiteSpace(x))
    .ToArray())

Answer 2

Flutter已经提供了CircleAvatar小部件。

Container(
  width: 100,
  child: CircleAvatar(
    radius: 50,
    backgroundImage: ExactAssetImage('assets/images/restaurant.jpg'),
  ),
  decoration: new BoxDecoration(
    shape: BoxShape.circle,
    border: new Border.all(
      color: Colors.red,
      width: 4.0,
    ),
  ),
),

Answer 3

CircleAvatar(
          radius: 30,
          backgroundColor: Colors.white,
          child: CircleAvatar(
            radius: 28,
            backgroundImage: AssetImage('images/avatar.jpg'),
          ),
        )

Answer 4

非常简单的技巧：p

 CircleAvatar(
                radius: 55,
                backgroundColor: Color(0xffFDCF09),
                child: CircleAvatar(
                  radius: 50,
                  backgroundImage: AssetImage('assets/images/boy.png'),
                ),
              ),

Answer 5

 Container(
        height: 150.0,
        width: 150.0,
        child: Padding(
            padding: EdgeInsets.all(15),
            child: CircleAvatar(
              backgroundColor: Colors.transparent,
              radius: 10,
              child: new Image.asset('images/logo.png'),
            )),
        decoration: new BoxDecoration(
          shape: BoxShape.circle,
          border: new Border.all(
            color: Colors.indigo,
            width: 2.0,
          ),
        ));

Answer 6

按照flutter社区的建议使用fadeInImage来显示来自网络的图像，并封装在带有边框装饰的容器中

  Widget getCircularImage(double size) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        borderRadius: new BorderRadius.all(new Radius.circular(size / 2)),
        border: new Border.all(
          color: Colors.white,
          width: 4.0,
        ),
      ),
      child: ClipOval(child: FadeInImage.assetNetwork(
          fit: BoxFit.cover,
          placeholder: widget.placeholderUrl,
          image: widget.imageUrl)),
    );
  }

Answer 7

简单而新鲜的响应..！

使用两个CircleAvatar。 代码和屏幕截图示例：

CircleAvatar(               
 backgroundColor: Colors.white,
 radius: 60.0,
  child: CircleAvatar(
   backgroundImage: AssetImage('images/darth_vader.jpg'),
   radius: 50.0,
  ),
),

有关其他问题： @canerkaseler

Answer 8

如果你使用 CircleAvatar 没有给出半径，你可以这样使用。

CircleAvatar(
                backgroundColor: Colors.white, //border color
                child: Padding(
                  padding: const EdgeInsets.all(2.0), //border size
                  child: CircleAvatar(
                    backgroundImage: Image.asset("image.png"),
                  ),
                ),
              ),

Answer 9

使用 avatar_view 库，它提供了以圆形/矩形形式显示网络/资产图像的功能。

使用添加下面的依赖

示例：

    AvatarView(
              radius: 60,
              borderWidth: 8,
              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,),
              ),
            ),

输出：

用边框绘制圆形图像

9 个答案: