onTap callback
- Flutter course
- Beginner
- Lesson 59/99
- 4 min
Handle taps with InkWell onTap and give feedback.
onTap and ScaffoldMessenger
The onTap callback of InkWell runs your code when a tap happens. Usually, to give the user feedback, you call ScaffoldMessenger.of(context).showSnackBar(...). The SnackBar shows a brief message at the bottom of the screen and requires context, so it is used inside the callback.
InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Hello')),
);
},
child: Text('Tap'),
)ScaffoldMessenger and context
ScaffoldMessenger manages messages such as SnackBars across the app. The expression ScaffoldMessenger.of(context) accesses the nearest ScaffoldMessenger in the widget tree, so context must be used inside the callback. The SnackBar widget carries the message to be shown.
Practice Show a SnackBar with InkWell
Write a function showMessage that prints Message shown. In main call showMessage. In the onTap of the InkWell, both call showMessage and show a SnackBar via ScaffoldMessenger.of(context).showSnackBar.
Starter code
import 'package:flutter/material.dart';
// mesajGoster fonksiyonu yaz: "Mesaj gosterildi" yazdirsin
void main() {
// mesajGoster'i 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 ekle: mesajGoster cagir + SnackBar goster
child: Container(
width: 100,
height: 100,
color: Colors.purple,
),
),
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void mesajGoster() {
print('Mesaj gosterildi');
}
void main() {
mesajGoster();
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: () {
mesajGoster();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Container(
width: 100,
height: 100,
color: Colors.purple,
),
),
),
),
),
);
}
}Expected output
Mesaj gosterildi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which expression is used to show a SnackBar on screen?
- print(...)
- runApp(...)
- ScaffoldMessenger.of(context).showSnackBar(...) Correct answer
- Material(...)
Explanation: The showSnackBar method of the object accessed via ScaffoldMessenger.of(context) shows the SnackBar on screen.
2 Access ScaffoldMessenger
InkWell(
onTap: () {
____.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Text('Dokun'),
)InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Merhaba')),
);
},
child: Text('Dokun'),
)Explanation: To show the SnackBar, the messenger is accessed via ScaffoldMessenger.of(context).
3 Feedback parts
| Term | Meaning |
|---|---|
onTap |
InkWell's tap callback |
ScaffoldMessenger |
Provides access to SnackBar |
showSnackBar |
Shows the SnackBar on screen |
SnackBar |
Message appearing at the bottom |