What is InkWell?
- Flutter course
- Beginner
- Lesson 56/99
- 4 min
Learn Material ripple taps with InkWell.
What is InkWell?
InkWell is a widget that captures tap events while also rendering a Material design ripple effect. Like GestureDetector, it accepts callbacks such as onTap and onLongPress; in addition, it draws an animation spreading from the touch point. This makes it suitable for buttons, cards and list items.
Material(
child: InkWell(
onTap: () {
print('Tapped');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
)Material design and ripple
The ripple drawn by InkWell appears only on a Material widget. Material provides the surface on which the ripple is painted, so InkWell is usually wrapped in a Material. Widgets such as Scaffold and MaterialApp already provide Material, so on most screens you do not need to add Material separately.
Material(
child: InkWell(
onTap: () => print('Tap'),
child: Text('Tap me'),
),
)Practice Capture tap with InkWell
Write a function tapped that prints Tapped. In main call tapped and wire it as onTap of the InkWell.
Starter code
import 'package:flutter/material.dart';
// tiklandi fonksiyonu yaz: "Tiklandi" yazdirsin
void main() {
// tiklandi'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(
child: InkWell(
// onTap parametresini ekle
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void tiklandi() {
print('Tiklandi');
}
void main() {
tiklandi();
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: tiklandi,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
),
);
}
}Expected output
Tiklandi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Compared to GestureDetector, what distinguishes InkWell?
- Captures only double taps
- Makes no visual effect
- Listens only to horizontal drags
- Shows a Material ripple effect on tap Correct answer
Explanation: InkWell captures gestures like GestureDetector but additionally draws a Material ripple effect.
2 Add the InkWell widget
Material(
child: ____(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)Explanation: For a ripple effect, use the InkWell widget inside a Material.
3 InkWell components
| Term | Meaning |
|---|---|
InkWell |
Tap widget that shows ripple |
ripple |
Material design ripple effect |
Material |
Surface on which ripple is painted |
onTap |
Single tap callback |