InkWell vs GestureDetector
- Flutter course
- Beginner
- Lesson 57/99
- 4 min
Learn the difference between InkWell and GestureDetector.
Difference between InkWell and GestureDetector
Both InkWell and GestureDetector accept callbacks like onTap and onLongPress. The main difference is visual feedback: InkWell draws a ripple on tap, while GestureDetector is invisible and only reports the gesture. For cases like drag tracking where no visual effect is wanted, GestureDetector is preferred.
// When you want ripple
Material(child: InkWell(onTap: () {}, child: Text('A')))
// When you only want to capture gestures
GestureDetector(onTap: () {}, child: Text('B'))Which widget should you use?
Use InkWell for a button, card or list item where you want visual feedback. For cases like drag tracking where you only need to capture the gesture and no ripple is needed, GestureDetector is more appropriate. Both support the onTap callback, but only InkWell draws a visual effect.
Practice Make a button with InkWell
Write a function buttonTapped that prints Button. In main call buttonTapped. Add an InkWell inside the Material and wire onTap to buttonTapped. Do not use GestureDetector.
Starter code
import 'package:flutter/material.dart';
// butonTiklandi fonksiyonu yaz: "Buton" yazdirsin
void main() {
// butonTiklandi'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Material(
// InkWell ekle ve onTap bagla
child: Container(
width: 80,
height: 40,
color: Colors.green,
),
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void butonTiklandi() {
print('Buton');
}
void main() {
butonTiklandi();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Material(
child: InkWell(
onTap: butonTiklandi,
child: Container(
width: 80,
height: 40,
color: Colors.green,
),
),
),
),
),
);
}
}Expected output
Buton
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the main difference between InkWell and GestureDetector?
- GestureDetector does not accept a child
- InkWell does not need Material
- InkWell shows a ripple effect, GestureDetector does not Correct answer
- InkWell captures only double taps
Explanation: Both accept similar callbacks; the difference is that InkWell draws a ripple while GestureDetector makes no visual effect.
2 Add the child parameter
InkWell(
onTap: () => print('Tik'),
____: Text('Dokun'),
)InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
)Explanation: InkWell takes a widget via the child parameter to define the tap area.
3 InkWell and GestureDetector
| Term | Meaning |
|---|---|
InkWell |
Shows ripple effect |
GestureDetector |
Makes no visual effect |
onTap |
Single tap callback in both |
ripple |
Found only in InkWell |