绘制带边框的圆形图像答案

【问题标题】：Paint a circular image with border绘制带边框的圆形图像
【发布时间】：2017-10-31 16:56:08
【问题描述】：

我想做类似的事情

new BoxDecoration(
        color: const Color(0xff7c94b6),
        image: new DecorationImage(
          image: new ExactAssetImage('assets/images/restaurant.jpg'),
          fit: BoxFit.cover,
        ),
        borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
        border: new Border.all(
          color: Colors.red,
          width: 4.0,

        ),

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

【问题讨论】：

标签： dart flutter

【解决方案1】：

NetworkImage 是您要查找的课程。

           Container(
             width: 100.0,
             height: 100.0,
             decoration: BoxDecoration(
               color: const Color(0xff7c94b6),
               image: DecorationImage(
                 image: NetworkImage('http://i.imgur.com/QSev0hg.jpg'),
                 fit: BoxFit.cover,
               ),
               borderRadius: BorderRadius.all( Radius.circular(50.0)),
               border: Border.all(
                 color: Colors.red,
                 width: 4.0,
               ),
             ),
           ),

【讨论】：

这个解决方案的问题是它把边框放在图像的顶部。就我而言，我需要保留圆形图像的边缘。

【解决方案2】：

父级约束时的相对方法：

CircleAvatar(
  constraints: const BoxConstraints.expand(),
  child: Padding(
    padding: const EdgeInsets.all(3.0),
    child: CircleAvatar(
      backgroundImage: avatar,
    ),
  ),
)

【讨论】：

【解决方案3】：

对于那些希望边框在图像之外，换句话说，在图像周围：

class FramedImage extends StatelessWidget {
  final ImageProvider image;
  final double borderWidth;
  final Color borderColor;
  final double borderRadius;

  const FramedImage({
    required this.image,
    this.borderWidth = 2,
    this.borderColor = Colors.black,
    this.borderRadius = 2,
    Key? key
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(borderRadius + borderWidth),
        border: Border.all(width: borderWidth, color: borderColor),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(borderRadius),
        child: Image(
          image: image,
          fit: BoxFit.cover,
        )
      )
    );
  }
}

示例用法：

FramedImage(
  image: NetworkImage('https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png'),
  borderColor: Colors.blueAccent,
  // adjust this if you want a complete circle
  borderRadius: 10,
  borderWidth: 5,
);

【讨论】：

【解决方案4】：

简单回答

同时使用两个 CircleAvatar。 代码示例和截图：

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

【讨论】：

最佳解决方案
谢谢@EduardoTolentino

【解决方案5】：

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

要使用添加下面的依赖项

示例：

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

输出：

【讨论】：

【解决方案6】：

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

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

【讨论】：

解释通常很有帮助
虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并最终将这些知识应用到他们自己的代码中。解释代码时，您也可能会得到用户的积极反馈/赞成。

【解决方案7】：

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

【讨论】：

同样的东西不用写了，CircleAvatar已经回复here

【解决方案8】：

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

【讨论】：

【解决方案9】：

使用flutter社区推荐的fadeInImage来显示来自网络的图像，并包含在一个带有边框装饰的容器中

 小部件 getCircularImage(双倍尺寸) {
    返回容器（
      宽度：尺寸，
      高度：尺寸，
      装饰：盒子装饰（
        颜色：常量颜色（0xff7c94b6），
        边界半径：新边界半径.all（新半径.圆形（大小/2）），
        边框：新边框.all（
          颜色：颜色。白色，
          宽度：4.0，
        ),
      ),
      孩子：ClipOval（孩子：FadeInImage.assetNetwork（
          适合：BoxFit.cover，
          占位符：widget.placeholderUrl，
          图片：widget.imageUrl)),
    );
  }

【讨论】：

【解决方案10】：

 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,
          ),
        ));

【讨论】：

同样的东西不用写了，CircleAvatar已经回复here