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),
),
),
3
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
3
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'),
),
),
),
],
),
),
),
3
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),
),
)
1