用边框绘制圆形图像

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显示用户图像的方式.此代码 - 来自文档 - 工作正常,但我的图像应该从网址加载,而不是在资产中.

Answer 1

NetworkImage 是你要找的班级.

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

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。代码和截图示例：

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

Answer 4

对于那些想要创建带有模糊圆角的圆形或方形的人

        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 5

使用flutter社区推荐的fadeInImage展示来自网络的图片，并封装在带有边框装饰的容器中

  小部件 getCircularImage（双倍大小）{
    返回容器（
      宽度：尺寸，
      高度：尺寸，
      装饰：BoxDecoration(
        颜色：常量颜色（0xff7c94b6），
        borderRadius: new BorderRadius.all(new Radius.circular(size / 2)),
        边框：新的 Border.all(
          颜色：Colors.white，
          宽度：4.0，
        ),
      ),
      孩子：ClipOval（孩子：FadeInImage.assetNetwork（
          适合：BoxFit.cover，
          占位符：widget.placeholderUrl，
          图像：widget.imageUrl)),
    );
  }

Answer 6

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