Material parent
- Flutter course
- Beginner
- Lesson 58/99
- 4 min
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.
Practice 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.
Starter code
import 'package:flutter/material.dart';
// tikla fonksiyonu yaz: "Material" yazdirsin
void main() {
// tikla'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// InkWell'i Material ile sar
child: InkWell(
// onTap parametresini ekle
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
),
);
}
}Sample 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,
),
),
),
),
),
);
}
}Expected output
Material
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
Explanation: Without a Material ancestor, InkWell's callbacks such as onTap still run, but the ripple effect cannot be drawn.
2 Add the Material widget
return ____(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
);return Material(
child: InkWell(
onTap: () => print('Tik'),
child: Text('Dokun'),
),
);Explanation: For InkWell's ripple, wrap it with the Material widget.
3 Material and InkWell
| Term | Meaning |
|---|---|
Material |
Provides a surface for ink |
InkWell |
Needs a Material ancestor |
ancestor |
A parent widget in the tree |
ripple |
Not visible without Material |