Flutter Widget; types of flutter widget: Visible and Invisible, StatelessWidget and StatefulWidget, Single child widget and Multiple child widget

📖 Theory

screen જે entirely એક noun થી બનેલી છે

last lesson નું minimal app 4 widgets deep હતું: MaterialApp, Scaffold, Center, Text. Flutter ને પૂછો કે screen પર કોઈ પણ વસ્તુ શું છે: button, તેની આસપાસનો gap, screen itself: અને answer હંમેશા same noun છે: a widget.

એક noun classification વગર chaos હોત. syllabus widget world ને 3 clean axes પર cuts કરે છે, અને તેમની વચ્ચે તેઓ ફક્ત 3 questions ને answer કરે છે જે matter કરે છે જ્યારે તમે widget સુધી reach કરો: શું તે SHOW કરે છે? શું તે CHANGE થઈ શકે છે? કેટલા CHILDREN?

📖 Theory

Axis 1: visible vs invisible

Visible widgets pixels ને screen પર put કરે છે અથવા input લે છે: Text, Image, Icon, ElevatedButton, TextField: જેને user point કરે.

Invisible widgets કંઈ draw નથી કરતા પોતે: તેઓ others ને ARRANGE કરે છે: Row અને Column children ને line up કરે છે, Center એક ને position કરે છે, Padding એકની આસપાસ space ને push કરે છે, Stack pile ને overlap કરે છે, Scaffold આખી screen ને frame કરે છે (app bar slot, body slot, floating button slot).

screen એ invisible scaffolding છે જે visible leaves ને hold કરે છે: exactly Unit 1 ની XML-layouts-holding-widgets structure, rewritten as Dart objects.

📖 Theory

Axis 2: stateless vs stateful (exam axis)

StatelessWidget: immutable. તેની build() method purely render કરે છે configuration થી જે તેને આપવામાં આવી હતી: same inputs, same pixels, forever. fest નું name label, poster, rules page.

StatefulWidget: 2 pieces માં આવે છે: widget plus State object જે rebuilds પર survive કરે છે. Mutable data (seats left, checkbox નું tick) State માં lives કરે છે, અને તેને changing કરવું એક gate દ્વારા goes છે:

setState(() { seats--; });

setState mutate કરે છે AND Flutter ને re-run build() કરવા કહે છે, new values સાથે repainting. setState wrapper ને forget કરવું એ Flutter નો most classic bug છે: data changes થાય છે, screen નથી થતી.

📊 At a glance

3 classifications at a glance

⌨️ Practical

એક દરેક change-kind, side by side

// STATELESS: fixed configuration in, same pixels out, forever
class FestTitle extends StatelessWidget {
  const FestTitle({super.key});
  @override
  Widget build(BuildContext context) {
    return const Text('TechnoUtsav 2026');
  }
}

// STATEFUL: seat counter જે screen પર change થવું જોઈએ
class SeatCounter extends StatefulWidget {
  const SeatCounter({super.key});
  @override
  State<SeatCounter> createState() => _SeatCounterState();
}

class _SeatCounterState extends State<SeatCounter> {
  int seats = 350;                       // mutable data State માં lives કરે છે

  @override
  Widget build(BuildContext context) {
    return Column(                       // multi-child, invisible
      children: [
        Text('Seats left: $seats'),      // visible leaf
        ElevatedButton(
          onPressed: () => setState(() { seats--; }),  // the gate
          child: const Text('Book one'),
        ),
      ],
    );
  }
}

🧩 Quiz

FestConnect Flutter ને seats-left display ની જરૂર છે જે દરેક વાર Book tap થાય ત્યારે decrease થાય. કયું widget kind, અને શા માટે?

1. StatelessWidget: counter નું layout ક્યારેય change નથી થતું
2. StatefulWidget: displayed value એ time સાથે change થવું જોઈએ, તેથી તેને State object અને setState ની જરૂર છે
3. Invisible widget: counters pixels ને draw નથી કરતા
4. Either works: stateless widgets પણ build() દ્વારા update થઈ શકે છે

💭 Think first

booking screen ને Classify કરો

next lessons આ screen ને build કરે છે: event poster, event title, name TextField, Book button, બધા vertically arranged breathing space સાથે, Scaffold પર. દરેક piece પર ત્રણેય axes ને run કરો tap કરતા પહેલાં.

⚠️ Watch out

Classification traps

Mutating without setState: seats-- alone variable ને changes કરે છે અને કંઈ REPAINT નથી કરતું: classic silent bug; દરેક visible change gate દ્વારા goes છે.

child vs children: Center(children: [...]) compile નથી થતું; Row(child: ...) પણ નહીં. Single-child widgets child: લે છે, multi-child children: [ ] લે છે: error message ને reading તેને solve કરે છે, axis ને reading તેને prevent કરે છે.

"Invisible" એ "unimportant" નથી: layout widgets દરેક real tree ના મોટાભાગના છે; invisible એટલે no pixels of their own, not no effect.

📖 Theory

દરેક widget પહેલાં ત્રણ questions

interview ને internalise કરો: શું તે show કરે છે? (visible અથવા layout) : શું તે change થાય છે? (stateless અથવા stateful) : એક child અથવા many? દરેક widget માટે પૂછો જે તમે ever add કરો, અને Flutter નું enormous catalogue filing system માં collapse થાય છે. Unit 4 હવે catalogue ની first shelf ને walk કરે છે: visible four (Text, Image, Button, Icon), દરેક તેના constructor અને named-parameter properties દ્વારા.

✅ Summary

Key takeaways

• screen પર બધું widget છે; UI એ તેમનું tree છે, configured via named parameters.
• Axis 1: visible widgets pixels ને show કરે છે અથવા input લે છે; invisible ones (Row, Column, Center, Padding, Stack, Scaffold) others ને arrange કરે છે.
• Axis 2: StatelessWidget fixed config ને render કરે છે; StatefulWidget State object ને own કરે છે, અને setState(() {...}) mutate + rebuilds કરે છે.
• Changing data without setState screen પર કંઈ update નથી કરતું: classic bug.
• Axis 3: single-child widgets child: લે છે; multi-child children: [ ] લે છે.
• kind ને decide કરો પૂછીને: show? change? how many children?
• Memory hook: show, change, children: 3-question widget interview.