Theory
वह Tap जो एक Booking Delete करता है
FestConnect Flutter की My Bookings list को per row एक Cancel button मिलता है: एक accidental tap एक student की Garba Night seat delete करने से बस एक दूर।
Destructive actions ने आपके जाने हर platform पर एक ritual कमाया है: BCA404 ने ShowDialog से form freeze किया और एक DialogResult पढ़ा; web ने modals इस्तेमाल किए। Flutter का ritual familiar दिखता है: पर इसके dialogs एक genuinely elegant idea छुपाते हैं कि एक dialog कहाँ रहता है, और exam असल में यही idea test करता है।
Theory
AlertDialog, Summoned
दो pieces: SHOWING function और dialog WIDGET:
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Cancel booking?'),
content: Text('Your Garba Night seat will be released.'),
actions: [ ...buttons... ],
),
);
यह एक dimmed scrim के ऊपर modally float करता है: इसके पीछे की screen untouchable है: और actions: buttons hold करता है, पिछले lesson के law से ranked: Keep it के लिए quiet TextButton, destructive confirmation के लिए एक louder button।
Practical
Confirm Dialog जो जवाब देता है
Future<void> confirmCancel() async {
final sure = await showDialog<bool>( // showDialog RETURNS a Future
context: context,
builder: (context) => AlertDialog(
title: const Text('Cancel booking?'),
content: const Text('Your Garba Night seat will be released.'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false), // answer: no
child: const Text('Keep it'),
),
ElevatedButton(
onPressed: () => Navigator.pop(context, true), // answer: yes
child: const Text('Cancel booking'),
),
],
),
);
if (sure == true) {
// release the seat (sure is null if they tapped outside!)
}
}
// And the hint that prevents the accident in the first place:
Tooltip(
message: 'Cancels your booking permanently',
child: IconButton(icon: const Icon(Icons.delete),
onPressed: confirmCancel),
)
Theory
Elegant Idea: Dialogs Routes हैं
Navigator.pop(context) एक dialog क्यों बंद करता है: वही call जो एक SCREEN बंद करती है?
क्योंकि Flutter में, एक dialog एक mini-route IS है, navigation stack पर current screen के ऊपर pushed। बंद करना pop करना है: और popping answer वापस carry कर सकती है: Navigator.pop(context, true): जो showDialog अपने Future की value की तरह deliver करता है।
यही है BCA404 का DialogResult फिर से जन्मा हुआ: modally पूछिए, answer का await कीजिए, branch कीजिए: एक honest extra के साथ: OUTSIDE tap null से dismiss होता है, तो sure == true test कीजिए, कभी सिर्फ़ sure नहीं। (जब एक choice compulsory हो तो barrierDismissible: false से outside-dismissal forbid कीजिए।)
Quiz
Flutter में एक open AlertDialog कैसे बंद होता है, और यह mechanism क्यों?
- dialog.close(): हर widget के पास एक close method है
- Navigator.pop(context): dialog navigation stack पर एक mini-route की तरह pushed हुआ था
- setState(() { showingDialog = false; })
- यह 5 seconds के बाद खुद बंद हो जाता है
Show the answer
Navigator.pop(context): dialog navigation stack पर एक mini-route की तरह pushed हुआ था
Dialogs screens के SAME stack पर रहते हैं: showDialog push करता है, pop remove करता है: हर उस चीज़ के लिए एक navigation model जो appear और disappear होती है, और pop का optional second argument वह तरीका है जिससे answer waiting showDialog तक travel करता है। Option A एक API invent करता है; widgets windows नहीं हैं। Option C loading-overlay lesson का reflex है: reasonable machinery, पर dialogs इस तरह काम नहीं करते: वे routes हैं, conditional children नहीं। Option D एक toast के temperament को describe करता है: अगले lesson का widget, कभी एक dialog का नहीं।
Think first
तीन Exits Audit कीजिए
Dialog के 3 रास्ते हैं बाहर: Keep it, Cancel booking, और dim area के बाहर tap करना। Trace कीजिए हर एक sure को क्या value deliver करता है, और if (sure == true) guard किस चीज़ से protect करता है, फिर tap कीजिए।
Show the answer
Keep it: pop(context, false): sure = false। Cancel booking: pop(context, true): sure = true। बाहर tap करना: कोई value के साथ dismissed नहीं: sure = null। Guard sure == true null को no की तरह treat करता है: एक destructive action के लिए exactly सही, क्योंकि एक shrug को कभी एक seat delete नहीं करनी चाहिए। if (sure) की जगह लिखिए और null condition को crash करता है (Dart bools null refuse करते हैं): == true idiom दोनों safety AND null-safety है। तीन exits, तीन values, एक honest guard: वह trace पूरा exam answer है।
Watch out
Dialog और Tooltip Slips
Pops भूल जाना: बिना Navigator.pop वाले buttons dialog को हमेशा के लिए open छोड़ देते हैं: हर action अपने answer के साथ बंद होता है।
if (sure) Test करना: outside-tap से आया null इसे तोड़ता है: हमेशा sure == true।
Non-Decisions के लिए Dialog: "Booking saved!" को कोई modal interrogation नहीं चाहिए: वह toast/SnackBar territory है, अगला lesson।
Tooltip को इकलौता Label बनाना: long-press hints कम लोगों को discoverable होते हैं: tooltips icons को SUPPLEMENT करते हैं (और screen readers serve करते हैं): critical actions के लिए वे कभी visible text replace नहीं करते।
Theory
Modal Pattern, तीसरा Platform
इन्हें line up कीजिए: BCA404 का ShowDialog() DialogResult return करते हुए, web के modal boxes, और Flutter का await showDialog एक Future return करते हुए: modally पूछिए, verdict का await कीजिए, इस पर branch कीजिए: एक pattern, तीन wardrobes। और Tooltip एक छोटी reunion भी complete करता है: BCA404 का ToolTip component, अब एक wrapper widget। पूरे subject में एक lesson बाकी है: toast, switch, charts और Form: FestConnect Flutter का finale।
Summary
Key takeaways
- showDialog(context, builder) एक modal AlertDialog float करता है: title, content, actions।
- Dialogs navigation stack पर mini-routes हैं: Navigator.pop(context) बंद करता है; pop(context, value) answer देता है।
- await showDialog<bool> answer receive करता है: pops से true/false, outside tap से NULL।
- sure == true से guard कीजिए; barrierDismissible: false एक button choice force करता है।
- Actions को rank कीजिए: एक louder confirming button के बगल में quiet TextButton।
- Tooltip(message, child) एक long-press hint add करता है (IconButton का tooltip: shorthand): supplement, replacement नहीं।
- Memory hook: dialogs routes हैं; pop verdict carry करता है; outside taps null answer देते हैं।