Question 406178 in Flutter Question posted in
The official Flutter documentation can be found here.

I tried using nested Inkwell function in flutter but only one inkwell working

I need for certain use nested inkwell and need to add separate function onTap. How should I make it work.

Please find a sample code here-

   InkWell(
        onTap: () => print("1st inkwell"),
        child: InkWell(
          onTap: () => print("2nd inkwell"),
          child: Icon(Icons.close),
        ),
      ),
Tags:

3

Answers


  1. 0

    When you nest InkWell widgets, the inner InkWell typically captures the tap gesture. This means that the outer InkWell might not receive the tap event if the inner one is absorbing it.
    So use GestureDetector with InkWell. Replace your first Inkwell with GestureDetector

    GestureDetector(
   onTap:()=>print("1st click"),
   child:Container(
         child:Inkwell(
         onTap:()=>print("2nd click");
         child:Icon(Icons.close) 
        )
    )
)

    I have tried with IgnorePointer, check if it helps you

         InkWell(
          onTap: () {
            print('Outer InkWell tapped');
          },
          child: Container(
            color: Colors.blue,
            child: Stack(
              children: [
                InkWell(
                  onTap: () {
                    print('Inner InkWell tapped');
                  },
                  child: Container(
                    color: Colors.red,
                    padding: EdgeInsets.all(20),
                    child: Text('Tap Me'),
                  ),
                ),
                IgnorePointer(
                  ignoring: true,
                  child: Container(
                    color: Colors.transparent,
                    child: Center(
                      child: Text('Another layer'),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
    Login or Signup to reply.
  2. 0

    Use GestureDetector and set behavior to HitTestBehavior.translucent to allow the tap to be passed to the child.

    GestureDetector(
  onTap: () => print("1st inkwell"),
  behavior: HitTestBehavior.translucent,
  child: InkWell(
    onTap: () => print("2nd inkwell"),
    child: Icon(Icons.close),
  ),
)
    Login or Signup to reply.
  3. 0

    Try below code hope its help:

    InkWell(
        onTap: () {
          print("You have tapped InkWell");
          GestureDetector(
            onTap: () {
              print("You have tapped GestureDetector");
            },
            behavior: HitTestBehavior.translucent,
          ).onTap?.call();
        },
        child: Icon(Icons.close),
      ),

    I have try using HitTestBehavior, Read more about GestureTapCallback

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search