Checkbox, RadioButton

📖 Theory

form બે kinds ના question ને asks કરે છે

FestConnect Flutter નું registration form તેના choices section સુધી પહોંચ્યું છે:

Add a carry bag? Get event updates?: independent yes/nos: tick any, tick both.

Payment: Cash, Card અથવા UPI?: exactly one.

તમે આ split ને twice meet કર્યું છે: BCA404 નું CheckBox-vs-RadioButton અને Unit 1 ના Android widgets. Flutter split ને keep કરે છે, last lesson નો controlled-widget law keep કરે છે: અને quietly relocate કરે છે કે radio EXCLUSIVITY ક્યાંથી આવે છે, રીતે જે દરેક Android અને VB veteran ને catch કરે છે.

📖 Theory

Checkbox: એક bool દરેક, forever independent

દરેક checkbox એ controlled widget છે જે its own bool ની આસપાસ wrapped છે:

bool carryBag = false;

Checkbox(

value: carryBag,

onChanged: (v) => setState(() { carryBag = v!; }),

)

slider નો loop verbatim: value state ને display કરે છે, onChanged flip ને publish કરે છે. બે checkboxes = 2 bools = total independence: જે precisely any-of semantics છે. labelled convenience form એ CheckboxListTile છે (checkbox + title એક tappable row માં).

⌨️ Practical

બંને question kinds, એક form

class _RegisterState extends State<RegisterScreen> {
  bool carryBag = false;        // checkbox: own bool દરેક
  bool wantsUpdates = true;
  String payMode = 'upi';       // ONE variable = ONE radio group

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CheckboxListTile(
          title: const Text('Add a carry bag (Rs 10)'),
          value: carryBag,
          onChanged: (v) => setState(() { carryBag = v!; }),
        ),
        CheckboxListTile(
          title: const Text('Send me event updates'),
          value: wantsUpdates,
          onChanged: (v) => setState(() { wantsUpdates = v!; }),
        ),
        RadioListTile<String>(
          title: const Text('Cash'),
          value: 'cash',                 // આ radio ની identity
          groupValue: payMode,           // the SHARED group variable
          onChanged: (v) => setState(() { payMode = v!; }),
        ),
        RadioListTile<String>(
          title: const Text('Card'),
          value: 'card',
          groupValue: payMode,
          onChanged: (v) => setState(() { payMode = v!; }),
        ),
        RadioListTile<String>(
          title: const Text('UPI'),
          value: 'upi',                  // payMode ને equals કરે છે: selected render થાય છે
          groupValue: payMode,
          onChanged: (v) => setState(() { payMode = v!; }),
        ),
      ],
    );
  }
}

📖 Theory

Radio: exclusivity by shared variable

radio trio ના machinery ને Read કરો:

• દરેક Radio value ને carry કરે છે: તેની identity ('cash', 'card', 'upi')
• બધા 3 તેમના groupValue ને SAME state variable, payMode પર point કરે છે
• radio જેનું value == groupValue હોય તે selected render થાય છે: payMode = 'upi' સાથે, UPI row dot ને show કરે છે
• Card પર tap કરવું setState(payMode = 'card') ને run કરે છે: ONE assignment, અને rebuild બધા 3 radios ને new groupValue સામે repaint કરે છે: Card dot ને gain કરે છે, UPI lose કરે છે

કોઈ RadioGroup નહીં, કોઈ GroupBox નહીં, ક્યાંય કોઈ container નહીં: group IS shared variable છે.

🧩 Quiz

Flutter માં, શું 3 Radio widgets ને એક exclusive group તરીકે behave કરાવે છે?

1. તેમને same Column અથવા container ની અંદર Placing કરવું
2. બધા 3 same groupValue state variable ને sharing કરે છે
3. તેમને same value parameter આપવું
4. તેમને RadioGroup widget માં Wrapping કરવું, જેમ Android

💭 Think first

બે questions, તો કેટલા variables?

form બીજું radio question ને grows કરે છે: Delivery: Take away / Home delivery. BCA404 માં આને બીજા GroupBox ની જરૂર હતી. Flutter માં તેને શું જોઈએ છે, અને શું wrong થાય છે જો તમે lazily payMode ને બંને questions માટે reuse કરો? Trace કરો, પછી tap.

⚠️ Watch out

Choice-widget slips

onChanged: null તેમને freezes કરે છે: buttons જેમ, null handler control ને disabled render કરે છે: deliberately useful, accidentally baffling.

v! bang: onChanged nullable (bool? / T?) ને hands કરે છે; v! non-null ને asserts કરે છે storing પહેલાં: modern Dart ની null safety તેના teeth ને showing.

one-of questions માટે Checkbox: 2 payment checkboxes બંને ticked એ data bug છે જે form design માં born થયો: BCA404 rule (any-of = check, one-of = radio) બધા 3 platforms પર survives કરે છે.

📖 Theory

controlled-widget law, second અને third witnesses

Checkbox અને Radio just re-testified: value state થી, change onChanged + setState દ્વારા: અને Radio એ insight add કર્યું કે even GROUPING એ Flutter માં state છે. આ framework નું philosophical heart છે: layout arranges, state decides, widgets merely display. Unit 5 next progress indicators અને deeper Stack સાથે open થાય છે: loading overlay જે દરેક real booking flow ને needs છે.

✅ Summary

Key takeaways

• Checkbox: value (its own bool) + onChanged + setState: independent any-of choices; labelled rows માટે CheckboxListTile.
• Radio<T>: value એ radio ની identity છે; groupValue shared state variable પર point કરે છે; selected જ્યારે value == groupValue.
• Exclusivity SHARED groupValue થી આવે છે: containers થી નહીં (Android/VB.NET contrast).
• એક question = એક groupValue variable; એક ને questions across reuse કરવું groups ને merge કરે છે.
• onChanged: null disables; handlers nullables ને receive કરે છે (hence v!).
• Any-of = checkbox, one-of = radio: rule તેના third platform પર survives કરે છે.
• Memory hook: group એ variable છે, box નહીં.