How do I clip clickable area of my container?

Question

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

Md. Yeasin Sheikh · Accepted Answer · 2022-01-18T17:31:58.287

3

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.

edited Jan 18 '22 at 17:31

answered Jan 18 '22 at 14:46

Md. Yeasin Sheikh

54,221
7
29
56

1

Thanks. It's working. But by wraping my inkwell with Material of shape CircleBorder is enough to work done, Why Ink & custom border is required ?? – Abhishek Patil Jan 18 '22 at 17:21
1

Thanks, I was following old fashion. Also fixed an issue with splash color. – Md. Yeasin Sheikh Jan 18 '22 at 17:30

score 0 · Answer 2 · answered Jan 18 '22 at 14:41

You can wrap the child of your container with a stack and then give 2 children: one square container and one circular container both with the same colour and then wrap the circular container with a gesture detector or inkwell. If tough to understand by only text let me know i will write the code snippet for you. Do upvote if helpful.

score 0 · Answer 3 · answered Jan 18 '22 at 14:42

Use this

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

score 0 · Answer 4 · answered Jan 18 '22 at 14:44

You can populate the borderRadius property of the InkWell like this:

InkWell(
  borderRadius: BorderRadius.circular('Your customized double value'),
  onTap: () {},
  hoverColor: Colors.yellow,
  child: Container(
    width: 300,
    height: 300,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red,
    ),
  ),
)

score 0 · Answer 5 · answered Jan 18 '22 at 14:53

This will solve your problem;

InkWell(
  customBorder: const CircleBorder(),

But if you want also material ripple effect on your red container you can use this code;

 ClipOval(
   child: Container(
     width: 300,
     height: 300,
     color: Colors.red,
     child: TextButton(
       onPressed: () {},
       child: Center(),
     ),
   ),
 ),

How do I clip clickable area of my container?

5 Answers5