How do I clip clickable area of my container?-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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