Buttons, Slider

📖 Theory

છ tickets, એક thumb

Group bookings arrive: student દીઠ 6 tickets સુધી. TextField જે "six" અને "6six" ને accept કરે છે તે old pain છે; natural control એ slider છે જે thumb ને 1 થી 6 સુધી drag કરે છે.

તમે Slider ને તેના min અને max સાથે wire કરો છો, run કરો છો, drag: અને thumb દરેક વાર 1 પર સીધો snap back થાય છે. broken નથી: Flutter તમને તેનો single most important interaction law શીખવી રહ્યું છે, અને આ lesson તેને properly learn કરવાની આસપાસ built છે: right after button family ને તેના ranks મળે છે.

📖 Theory

button family, by rank

બધા buttons same heart ને share કરે છે (onPressed + child, null disables): શું differs છે તે visual rank છે:

• ElevatedButton: raised, filled: THE primary action (Book)
• OutlinedButton: bordered: middle-rank actions (Add to wishlist)
• TextButton: flat text: secondary, low-noise (Cancel, Skip)
• IconButton: icon-only, compact: toolbars (share, favourite)
• FloatingActionButton: round floating one, Scaffold ના own floatingActionButton: slot માં living: one per screen, તેની defining action

rank = visual loudness = importance: one Elevated per region, quiet Texts તેની બાજુમાં.

⌨️ Practical

quantity slider, done right

class _BookingState extends State<BookingScreen> {
  double tickets = 1;                    // STATE value ને own કરે છે

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Tickets: ${tickets.toInt()}'),
        Slider(
          value: tickets,                // slider state ને DISPLAYS કરે છે
          min: 1,
          max: 6,
          divisions: 5,                  // discrete stops: 1,2,3,4,5,6
          label: '${tickets.toInt()}',   // thumb પર bubble
          onChanged: (v) {
            setState(() { tickets = v; });   // no setState = snap-back
          },
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(onPressed: () {}, child: const Text('Cancel')),
            ElevatedButton(
              onPressed: () { /* book tickets.toInt() seats */ },
              child: const Text('Book'),
            ),
          ],
        ),
      ],
    );
  }
}

📖 Theory

controlled-widget law

શા માટે naked slider snap back થયો? કારણ કે Flutter Slider તેની position ને own નથી કરતો. listing ના loop ને read કરો:

• value: tickets : slider DISPLAYS કરે છે whatever state variable hold કરે છે
• dragging onChanged(v) ને fire કરે છે CANDIDATE value સાથે: continuously, drag દરમિયાન
• તમારો handler variable ને setStates કરે છે : build reruns : slider હવે new value ને display કરે છે

setState ને skip કરો અને variable ક્યારેય change નથી થતું, તેથી દરેક rebuild thumb ને old value પર repaint કરે છે: snap-back. widget એ state નું view છે, ક્યારેય તેનો keeper નથી: અને Checkbox, Radio અને Switch, જે next lessons માં waiting કરે છે, identical law ને obey કરે છે.

🧩 Quiz

Slider પાસે correct min, max અને value છે, અને onChanged: (v) { tickets = v; } WITHOUT setState. user શું experience કરે છે?

1. slider work કરે છે: variable છેવટે update થઈ રહ્યું છે
2. thumb દરેક drag પર snap back થાય છે: variable changes થાય છે પણ કોઈ rebuild slider ને તેના સાથે repaint નથી કરતું
3. compile error: onChanged એ setState ને call કરવું જોઈએ
4. slider move થાય છે પણ Text label એક drag behind lag કરે છે

💭 Think first

screen ના buttons ને Rank કરો

booking screen માંગે છે: Book (screen નો point), Cancel, heart icon wishlist માટે, અને screen-wide New Booking action જે આખા event list પર visible હોય. દરેક ને તેનું button variant assign કરો ranking reason સાથે, પછી tap.

⚠️ Watch out

Slider અને button slips

Slider value એ double છે: તેને raw display કરવું 3.0 tickets ને show કરે છે: humans માટે .toInt() (listing કરે છે, twice).

divisions off by one: stops = divisions + 1: range 1 થી 6 ને divisions: 5 ની જરૂર છે: fencepost ફરીથી.

onChanged DURING drag ફાયર થાય છે: continuously, release પર once નહીં: ત્યાં heavy work gesture ને stutters કરે છે (TextWatcher lesson નો rule, third appearance).

બે FABs: Scaffold slot એક લે છે; second floating action એ design smell છે, parameter નહીં.

📖 Theory

એક law, આગળ ચાર widgets

controlled-widget law ને once frame કરો અને તેને lit રાખો: value state થી, change onChanged + setState દ્વારા, widget ક્યારેય તેનો own score keep નથી કરતો. next lesson ના Checkbox અને Radio આ law છે verbatim (Radio સાથે clever twist exclusivity પર જે BCA404 ના GroupBox veterans compare કરવા માંગશે), અને Unit 5 નો Switch તે છે ફરીથી. loop ને અહીં learn કરો, marks ને 3 more times collect કરો.

✅ Summary

Key takeaways

• Button ranks: ElevatedButton primary, OutlinedButton middle, TextButton quiet, IconButton compact, FAB Scaffold ના slot માં THE screen action માટે.
• બધા onPressed (null = disabled) + child ને share કરે છે; loudness એ importance ને match કરવી જોઈએ.
• Slider(value, min, max, divisions, label, onChanged): value એ double છે જે STATE own કરે છે.
• Controlled-widget law: widget state ને display કરે છે; onChanged + setState changes ને publish કરે છે; setState વગર thumb snap back થાય છે.
• divisions + 1 = stops; label thumb પર bubbles થાય છે; onChanged drag દરમિયાન continuously fires થાય છે.
• same law Checkbox, Radio અને Switch ને govern કરે છે next.
• Memory hook: widgets score ને show કરે છે, setState તેને writes કરે છે.