绘制带边框的圆形图像

Question

我想做类似

的事情

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 加载，而不是在资产中。

Answer 1

NetworkImage 是您正在寻找的 class。

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

Answer 2

 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 3

使用 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 4

Flutter 已经为它提供了 CircleAvatar widget。

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

Answer 5

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

Answer 6

简单回答

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

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

Answer 7

使用 avatar_view 库，它提供以 circular/rectangular 形式显示 network/asset 图像的功能。

要使用添加下面的依赖

示例：

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

输出：

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

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

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

Answer 10

父项约束边界时的相对方法：

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

Answer 11

对于那些想要使用模糊

创建带圆角的圆形或正方形的人
ClipRRect( borderRadius: BorderRadius.circular(12), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0), child: Container( width: 50.0, height: 50.0, child: Icon(Icons.search_rounded, color: Colors.white,), decoration: BoxDecoration( color: Colors.grey.withOpacity(0.1), borderRadius: BorderRadius.all( Radius.circular(12.0)), border: Border.all( color: Colors.white, width: 1.0, ), ), ), ), ),

Answer 12

Container(
  decoration: BoxDecoration(
    border: Border.all(
     color: Colors.white,
    ),
    shape: BoxShape.circle,
  ),
  child: CircleAvatar(
    radius: 30,
    backgroundImage: NetworkImage(ytUserImage3),
  ),
),

Answer 13

这将在图像内创建边框

圆形头像( 半径：42，背景颜色：Theme.of(上下文).primaryColor, child: 圆形头像( 半径：40，背景颜色：Colors.white， child: 圆形头像( 半径：28，背景颜色：Colors.white， child: Image.asset( _brand.imagePath, 过滤器质量：FilterQuality.high， ), ), ), ),

绘制带边框的圆形图像

Paint a circular image with border

dart

flutter