Summary - InkWell
- Flutter course
- Beginner
- Lesson 60/99
- 4 min
Combine InkWell, Material and callback to make a rippling button.
Combine three parts
To make a ripple button, you combine three parts: Material providing the surface, InkWell drawing the ripple, and the onTap callback handling the tap. InkWell is wrapped in Material, and the onTap callback defines what happens on tap. A SnackBar can also be added for visual feedback.
Material(
child: InkWell(
onTap: () => print('Tap'),
child: Container(width: 100, height: 50),
),
)Practice Make a ripple button
Write a function tapped that prints InkWell. In main call tapped. Wrap an InkWell with Material and wire onTap to tapped.
Starter code
import 'package:flutter/material.dart';
// tiklandi fonksiyonu yaz: "InkWell" 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(
// Material ve InkWell ekle, onTap bagla
child: Container(
width: 120,
height: 60,
color: Colors.orange,
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void tiklandi() {
print('InkWell');
}
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: 120,
height: 60,
color: Colors.orange,
),
),
),
),
),
);
}
}Expected output
InkWell
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widgets are used together for a ripple button?
- Text + Padding + Center
- InkWell + Material + onTap Correct answer
- Column + Row + SizedBox
- ListView + ListTile + Separator
Explanation: A ripple button uses the Material surface, InkWell ripple and onTap callback together.
2 Add the showSnackBar method
ScaffoldMessenger.of(context).
____(
SnackBar(content: Text('Merhaba')),
);ScaffoldMessenger.of(context).
showSnackBar(
SnackBar(content: Text('Merhaba')),
);Explanation: To show the SnackBar on screen, the showSnackBar method is called on the ScaffoldMessenger.
3 InkWell summary
| Term | Meaning |
|---|---|
InkWell |
Tap widget that gives ripple |
Material |
Provides a surface for ink |
onTap |
Single tap callback |
ScaffoldMessenger |
Provides SnackBar access |