具有可见半径的圆形按钮和子图像

Question

目标：实现具有可见半径和儿童图像的完美尺寸的圆形按钮

---

截图演示：

从上图可以看出，我尝试了社区在这里提到的许多解决方案

包括：

1. 圆形头像

    CircleAvatar(
     child: Image.asset('assets/images/gucci.jpg')
    )

---

2. 剪辑R矩形

    ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.asset(
         'assets/images/gucci.jpg',
         height: 100.0,
         width: 100.0,
      )
    )

---

3. 以Ink.image作为子小部件的Material小部件

Material(
   elevation: 1.0,
   shape: CircleBorder(),
   clipBehavior: Clip.hardEdge,
   color: Colors.transparent,
   child: Ink.image(
      image: AssetImage('assets/images/gucci.jpg'),
      fit: BoxFit.cover,
      width: 120.0,
      height: 120.0,
      child: InkWell(
         onTap: () {},
      )
   )
)

---

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

Answer 1

有很多选择供您选择。其中之一是“FloatingActionButton”。

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

我更喜欢它，Container因为所有按钮的属性（如onPressed或 点击动画）都已实现FloatingActionButton，并且您不需要使用GestureDetector或InkWell。

CircleBorder您也可以在任何其他接受 的Buttons 或s 中使用。WidgetShapeBorder