How do I clip clickable area of my container?

Whole container is getting clicked, other than circle shouldn't be clicked.

I'm shaping my container to circle.

What I want to do

Here's my code

 InkWell(
  onTap: () {},
  hoverColor: Colors.yellow,
  child: Container(
    width: 300,
    height: 300,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red,
    ),
  ),
)

Solution 1:

You need to use customBorder by providing CircleBorder().

InkWell(
  customBorder: const CircleBorder(),

But for this case, you need to wrap with Material widget with CircleBorder().

Run on dartPad

The complete widget will be like

 Material(
  shape: const CircleBorder(),
  color: Colors.red, // container color,to have splash color effect
  child: InkWell(
    customBorder: const CircleBorder(),
    splashColor: Colors.white,
    onTap: () {
      debugPrint("tapped");
    },
    hoverColor: Colors.yellow,
    child: Container(
      width: 300,
      height: 300,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.transparent, // material color will cover this
      ),
    ),
  ),
),

Reference answer.