Flutter
Material parent
Learn that InkWell needs a Material ancestor.
Material ancestor
The ripple drawn by InkWell appears only on a Material widget. Material provides the surface on which the ink is painted, so InkWell is usually wrapped in a Material. Without a Material ancestor, InkWell's callbacks still run but the ripple is not visible.
Material(
child: InkWell(
onTap: () => print('Tap'),
child: Text('Tap me'),
),
)
Scaffold and MaterialApp
Widgets such as Scaffold and MaterialApp already provide a Material, so on most screens you do not need to add Material separately. However, in a plain widget tree, for example when using InkWell directly inside a Center, you need to wrap it with Material. The Material ancestor can be at any depth in the widget tree.
Exercise Wrap InkWell with Material
Write a function tapIt that prints Material. In main call tapIt. Wrap the InkWell with a Material and wire onTap to tapIt.
Show example solution
import 'package:flutter/material.dart';
void tikla() {
print('Material');
}
void main() {
tikla();
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: tikla,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
),
),
);
}
}
Test yourself
-
What happens if InkWell is used without a Material ancestor?
- InkWell adds Material automatically
- The app gives a compile error
- The app crashes
- Callbacks work but the ripple is not visible
Show answer
Callbacks work but the ripple is not visible — Without a Material ancestor, InkWell's callbacks such as onTap still run, but the ripple effect cannot be drawn.
-
Add the Material widget
return ____(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
);
Show answer
return Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
);
-
Material and InkWell
- Material
- Provides a surface for ink
- InkWell
- Needs a Material ancestor
- ancestor
- A parent widget in the tree
- ripple
- Not visible without Material
Next lesson: onTap callback
