Flutter
What is InkWell?
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'),
),
)
Exercise Capture tap with InkWell
Write a function tapped that prints Tapped. In main call tapped and wire it as onTap of the InkWell.
Show example 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,
),
),
),
),
),
);
}
}
Test yourself
-
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
Show answer
Shows a Material ripple effect on tap — InkWell captures gestures like GestureDetector but additionally draws a Material ripple effect.
-
Add the InkWell widget
Material(
child: ____(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)
Show answer
Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
)
-
InkWell components
- InkWell
- Tap widget that shows ripple
- ripple
- Material design ripple effect
- Material
- Surface on which ripple is painted
- onTap
- Single tap callback
Next lesson: InkWell vs GestureDetector
