user-interface - 具有可见半径和图像作为子项的圆形按钮

Question

目标:在孩童时期实现具有可见半径和图像的完美大小的圆形按钮

截图演示:


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

包含:

圆形头像

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

ClipRRect

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

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在任何其他 Button s 或 Widget s 接受 ShapeBorder .