Home > Software design >  How to make parent only CLICKABLE?
How to make parent only CLICKABLE?

Time:10-14

what I want to achieve is to make the parent only clickable not the child of the parent. Suppose, there is a clickable container with the size of 400x400, and the child of that container is another container with the size of 200x200.

Now if we touch the second container(smaller one), it is also clickable. How can I prevent the small container from getting clicked?

I have tried almost everything but I may don't have that good skills at flutter, please help.

Code:

InkWell(onTap: (){print('Container Clicked');},child: 
Container(height: 400, width: 400, color: Colors.blue,
child: Center(child: Container(height: 200,width: 200, color: Colors.green,)),),)

CodePudding user response:

try this

       InkWell(
          onTap: (){
            print('Container Clicked');
          },
            child: Container(
              height: 400, 
              width: 400, 
              color: Colors.blue,
              child: Center(
                child: GestureDetector(
                  onTap: () {}, /// <-- locked inkwell tap
                  child: Container(
                    height: 200,  
                    width: 200,
                    color: Colors.green,)
                ),
              ),
            ),
          )

CodePudding user response:

I hope I got your question right. This is the code if you want to make only the bigger container clickable,

Stack(
  children:[
    InkWell(
      onTap: (){
        print('Container Clicked');
      },
      child: Container(
        height: 400, width: 400,
        color: Colors.blue,
      ),
    ),
    Center(
      child: Container(
        height: 200,width: 200,
        color: Colors.green,
      ),
    ),
  ],
),
  • Related