User interface 圆形按钮，半径可见，图像为子级

目标：实现具有可视半径和儿童图像的完美大小的圆形按钮

---

演示以下内容的屏幕截图：

正如你从上图中看到的，我尝试了许多社区在这里提到的解决方案

包括:

CircleAvatar

---

ClipRRect

---

材质小部件，将墨水.图像作为子小部件

---

---

关于如何实现此设计有什么想法吗？

有很多选择供您选择。其中之一是“浮动操作按钮”

SizedBox(
  width: 60,
  height: 60,
  child: FittedBox(
    fit: BoxFit.contain,
    child: FloatingActionButton(
      onPressed: () {},
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1,
        ),
      ),
      backgroundColor: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(5),
        child: Image.asset('assets/images/gucci.jpg'),
      ),
    ),
  ),
)

与容器相比，我更喜欢它，因为所有按钮的属性，如按下按钮或点击动画，都已在浮动操作按钮中实现，并且您不需要使用

手势检测器

或

墨水池

此外，您还可以在接受

形状顺序的任何其他
按钮或
小部件中使用
圆形顺序
，
，您可以尝试使用和点击功能，我想这就可以了

代码

GestureDetector(
   onTap: (){},
   child: Container(
     height: 120.0,
     width: 120.0,
     decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 1.5),
        borderRadius: BorderRadius.circular(80),
        image: DecorationImage(
            image: AssetImage('assets/images/gucci.jpg'),
            fit: BoxFit.cover
        )
     )
   )
)

您可以通过在
边框：border.all（颜色：Colors.black，宽度：1.5）
中使用
width
来更改边框的厚度，对于
圆形容器
，请在此行
borderRadius:borderRadius.circular（80），
中进行更改。这会有帮助。
用
墨水池
或
手势检测器
包裹您的
容器

以下是示例代码：

    InkWell(
           onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          )

我猜你需要一些填充物和按钮周围的边框

SizedBox(
      width: 100,
      height: 100,
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
          shape: BoxShape.circle,
        ),
        child: Material(
          elevation: 1.0,
          shape: CircleBorder(),
          clipBehavior: Clip.hardEdge,
          color: Colors.transparent,
          child: InkWell(
            child: Ink.image(
              image: AssetImage('assets/images/gucci.jpg'),
            ),
          ),
        ),
      ),
    ),

这确实有效，谢谢，但有一个陷阱。材料设计指南（）不鼓励在同一屏幕上使用多个晶圆厂，“不要在一个屏幕上显示多个晶圆厂”。更不用说在同一屏幕上使用5或10个晶圆厂了，另一件事是晶圆厂本身的大小无法控制，因此，在大屏幕上，尤其是在网络上，它会非常小。@Waleedsyr您使用的
FloatingActionButton
仅用于其形状，而不是作为一个fab按钮。所以它不会违反材料设计规则。。。此外，我编辑了我的答案，使按钮的大小更大…它起作用了，我只是在图像周围添加了一个填充小部件，使其居中，结果如下（）。谢谢你的支持time@Waleedsyr很乐意帮助mate。祝你玩得愉快谢谢，这是我一直在寻找的，但是出现了两个问题，照片似乎在角落被剪掉了（）我试图用中心部件包装墨水池，但没有成功。调用onPress（）时，splash布局有问题，splash的形状是SizedBox（长方形），而不是圆形（），有什么建议吗？两个示例都将容器显示为椭圆形，而不是圆形（），我尝试更改容器的宽度和高度，但没有效果这就是结果（）容器显示为椭圆而不是圆，更改容器的宽度和高度并不能解决问题，更改borderRadius属性也不能解决问题。
GestureDetector(
   onTap: (){},
   child: Container(
     height: 120.0,
     width: 120.0,
     decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 1.5),
        borderRadius: BorderRadius.circular(80),
        image: DecorationImage(
            image: AssetImage('assets/images/gucci.jpg'),
            fit: BoxFit.cover
        )
     )
   )
)

    InkWell(
           onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          )

GestureDetector(
            onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          ),

SizedBox(
      width: 100,
      height: 100,
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
          shape: BoxShape.circle,
        ),
        child: Material(
          elevation: 1.0,
          shape: CircleBorder(),
          clipBehavior: Clip.hardEdge,
          color: Colors.transparent,
          child: InkWell(
            child: Ink.image(
              image: AssetImage('assets/images/gucci.jpg'),
            ),
          ),
        ),
      ),
    ),