Theory
tap જે booking ને delete કરે છે
FestConnect Flutter ની My Bookings list દરેક row માટે Cancel button ને gain કરે છે: એક accidental tap student ના Garba Night seat ને delete કરી શકે છે.
Destructive actions એ દરેક platform પર જે તમે જાણો છો તેના માટે ritual earn કર્યું છે: BCA404 એ form ને ShowDialog સાથે freeze કર્યું અને DialogResult ને read કર્યું; web એ modals ને use કર્યું. Flutter નું ritual familiar લાગે છે: પણ તેના dialogs એ genuinely elegant idea ને hide કરે છે કે dialog ક્યાં lives કરે છે, અને તે idea એ શું exam actually 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... ],
),
);
તે modally float થાય છે dimmed scrim પર: screen behind untouchable છે: અને actions: buttons ને hold કરે છે, last lesson ના law દ્વારા ranked: quiet TextButton Keep it માટે, એક louder button destructive confirmation માટે.
Practical
confirm dialog જે answer back કરે છે
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) {
// seat ને release કરો (sure null છે જો તેમણે outside tap કર્યું હોય!)
}
}
// અને hint જે accident ને prevent કરે છે first place માં:
Tooltip(
message: 'Cancels your booking permanently',
child: IconButton(icon: const Icon(Icons.delete),
onPressed: confirmCancel),
)
Theory
elegant idea: dialogs are routes
શા માટે Navigator.pop(context) dialog ને close કરે છે: same call જે SCREEN ને close કરે છે?
કારણ કે Flutter માં, dialog એ mini-route છે, current screen ની ઉપર navigation stack પર pushed. Closing એ popping છે: અને popping answer ને back carry કરી શકે છે: Navigator.pop(context, true): જે showDialog તેના Future ના value તરીકે deliver કરે છે.
એ BCA404 નું DialogResult reborn છે: modally ask કરો, answer ને await કરો, branch કરો: એક honest extra સાથે: બહાર TAP કરવું null સાથે dismiss કરે છે, તેથી sure == true ને test કરો, ક્યારેય just sure નહીં. (જ્યારે choice compulsory હોય ત્યારે barrierDismissible: false સાથે outside-dismissal ને Forbid કરો.)
Quiz
Flutter માં open AlertDialog ને કેવી રીતે close કરવામાં આવે છે, અને શા માટે તે mechanism?
- dialog.close(): દરેક widget પાસે close method છે
- Navigator.pop(context): dialog ને mini-route જેમ navigation stack પર pushed કરવામાં આવ્યું હતું
- setState(() { showingDialog = false; })
- તે 5 seconds પછી itself close થાય છે
Show the answer
Navigator.pop(context): dialog ને mini-route જેમ navigation stack પર pushed કરવામાં આવ્યું હતું
dialogs SAME stack પર live થાય છે જેમ screens: showDialog pushes કરે છે, pop removes કરે છે: દરેક વસ્તુ માટે એક navigation model જે appear અને disappear થાય છે, અને pop નો optional second argument એ રસ્તો છે જેના દ્વારા answer awaiting showDialog પર travel back કરે છે. Option A API ને invent કરે છે; widgets windows નથી. Option C loading-overlay lesson થી reflex છે: reasonable machinery, પણ dialogs કેવી રીતે work કરે તે નહીં: તેઓ routes છે, conditional children નહીં. Option D toast ના temperament ને describe કરે છે: next lesson નું widget, ક્યારેય dialog નું નહીં.
Think first
ત્રણ exits ને Audit કરો
dialog પાસે 3 ways out છે: 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 કરે છે: exactly right destructive action માટે, કારણ કે shrug ક્યારેય seat ને delete નથી કરવો જોઈએ. if (sure) ને instead લખો અને null condition ને crash કરે છે (Dart bools null ને refuse કરે છે): == true idiom એ safety AND null-safety બંને છે. ત્રણ exits, ત્રણ values, એક honest guard: તે trace એ full exam answer છે.
Watch out
Dialog અને tooltip slips
pops ને Forgetting કરવા: Navigator.pop વગરના buttons dialog ને eternally open leave કરે છે: દરેક action closes થાય છે, તેના answer સાથે.
if (sure) ને Testing કરવું: outside-tap થી null તેને breaks કરે છે: sure == true, હંમેશા.
non-decisions માટે Dialog: "Booking saved!" ને modal interrogation ની જરૂર નથી: તે toast/SnackBar territory છે, next lesson.
Tooltip એ એકમાત્ર label: long-press hints few દ્વારા discoverable છે: tooltips icons ને SUPPLEMENT કરે છે (અને screen readers ને serve કરે છે): તેઓ critical actions માટે visible text ને ક્યારેય replace નથી કરતા.
Theory
modal pattern, third platform
તેમને line up કરો: BCA404 નું ShowDialog() જે DialogResult return કરે છે, web ના modal boxes, અને Flutter નું await showDialog જે Future return કરે છે: modally ask કરો, 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) closes કરે છે; pop(context, value) answers કરે છે.
- await showDialog<bool> answer ને receive કરે છે: pops થી true/false, outside tap થી NULL.
- sure == true સાથે Guard કરો; barrierDismissible: false button choice ને force કરે છે.
- actions ને Rank કરો: quiet TextButton એક louder confirming button ની બાજુમાં.
- Tooltip(message, child) long-press hint ને add કરે છે (IconButton નું tooltip: shorthand): supplement, replacement નહીં.
- Memory hook: dialogs are routes; pop verdict ને carry કરે છે; outside taps null ને answer કરે છે.