I need to use a GestureDetector
because it can detect many more types of user interactions than InkWell
, but unlike InkWell
it doesn't provide any visual response when a user taps or long presses on it.
Is it possible to add a ripple effect for tap/long press while still handling user interactions in the GestureDetector
?
CodePudding user response:
Just use this plugin
touch_ripple_effect: ^2.2.4
Touch ripple effect
TouchRippleEffect(
borderRadius: _helloRadius,
rippleColor: Colors.white60,
onTap: (){
print("Anand !");
},
child: Container(
width: 110,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.pink, borderRadius: _helloRadius),
child: IconButton(
iconSize: 24.0,
icon: Icon(Icons.search,color: Colors.white, size: 36,),
onPressed: null
),)
),
Touch Feedback effect
TouchFeedback(
onTap: (){
print(" I am Aditya");
},
rippleColor: Colors.blue[200],
child: Container(
width: 120,
height: 40,
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.yellow, borderRadius: BorderRadius.circular(5),),
child: Text(
"Hit me !",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)
)
),
)
CodePudding user response:
if you want a quick hack, check this:
class Test extends StatelessWidget {
const Test({
Key? key,
this.onTap,
}) : super(key: key);
final void Function()? onTap;
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: GestureDetector(
onTap: onTap,
child: SizedBox(
width: width * 0.2,
height: 70,
child: Card(
color: Colors.red,
child: InkWell(
onTap: () {},
),
),
),
),
);
}
}
CodePudding user response:
Try the following code:
InkWell(
onLongPress: () {
// Do what you want to do
},
child: child,
),