Circle Button with visible radius and Image as a child

Question

Goal: Implementing perfect sized Circle Button with visible radius and Image as a child

---

Screenshot to demonstrate:

As you can see from the above picture, I tried many solutions that are mentioned here by the community here

Including:

1. CircleAvatar

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

---

2. ClipRRect

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

---

3. Material widget with Ink.image as a child widget

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: () {},
      )
   )
)

---

Any ideas on how to implement this design?

Answer 1

There are a lot of options for you. One of them is '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'),
      ),
    ),
  ),
)

I would prefer it over Container since all the button's attributes like onPressed or tap animation are already implemented in FloatingActionButton and you don't need to use GestureDetector or InkWell.

Also you can use CircleBorder in any other Buttons or Widgets which accept a ShapeBorder.

Answer 2

I am guessing you want some padding and a border around the button.

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