Summary - Dialogs
- Flutter course
- Intermediate
- Lesson 95/99
- 4 min
Combine showDialog and SnackBar to give feedback.
Feedback flow
By combining showDialog and SnackBar you build a consistent feedback flow. When the user confirms an action, you ask a question with showDialog, close the dialog with Navigator.pop(context) in the 'OK' button, and immediately show a brief confirmation message with ScaffoldMessenger.of(context).showSnackBar.
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text('Silinsin mi?'),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Silindi')),
);
},
child: const Text('Tamam'),
),
],
),
);Practice Write the confirm flow
Define a StatelessWidget named SilButon. Its build should return an ElevatedButton whose onPressed calls showDialog. The builder should return an AlertDialog with title set to Text('Silinsin mi?') and an actions list containing a TextButton. The button's onPressed should first call Navigator.pop(context) and then ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Silindi'))). Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
// SilButon StatelessWidget tanımla
// build ElevatedButton döndürsün
// onPressed showDialog çağırsın
// AlertDialog title ve actions içersin
// TextButton önce pencereyi kapatsın, sonra mesaj göstersin
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/material.dart';
class SilButon extends StatelessWidget {
const SilButon({super.key});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text('Silinsin mi?'),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Silindi')),
);
},
child: const Text('Tamam'),
),
],
),
);
},
child: const Text('Sil'),
);
}
}
void main() {
print('hazir');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What sequence is followed when the 'Tamam' button is pressed in the feedback flow?
- showDialog → Navigator.pop → showSnackBar
- Navigator.pop → showSnackBar Correct answer
- showSnackBar → showDialog → Navigator.pop
- Navigator.pop → showDialog → showSnackBar
Explanation: In the flow, the dialog is first closed with Navigator.pop, then the confirmation message is shown with ScaffoldMessenger.showSnackBar. showDialog is the dialog opening function and is not called again in the middle of the flow.
2 Close the dialog
TextButton(
onPressed: () {
____(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Silindi')),
);
},
child: const Text('Tamam'),
)TextButton(
onPressed: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Silindi')),
);
},
child: const Text('Tamam'),
)Explanation: To close the dialog you use Navigator.pop(context). push opens a new screen, context.go is a GoRouter method, and showDialog opens a dialog but does not close it.
3 Summary parts
| Term | Meaning |
|---|---|
showDialog |
Dialog opening |
AlertDialog |
Content widget |
Navigator.pop |
Dialog closing |
ScaffoldMessenger.showSnackBar |
Confirmation message |