Progress Bar, Stack

📖 Theory

બે seconds ના doubt

Book પર tap કરો, અને FestConnect Flutter 2 seconds spend કરે છે server પર save કરવામાં. બે seconds જેમાં unresponsive screen દરેક student ને ફરીથી tap કરાવે છે: double bookings, support queue, chaos.

Unit 1 એ આને solve કર્યું હતું Android પર ProgressBar અને visibility juggling સાથે. Flutter નું version leaner છે: 2 indicator widgets split by single parameter, અને: કારણ કે અહીં બધું composition છે: professional loading overlay, built from widget જે તમે already know કરો છો: Stack, આ topic નો second name.

📖 Theory

2 indicators, 1 deciding parameter

• LinearProgressIndicator: horizontal bar
• CircularProgressIndicator: spinner

બંને એક switch ને obey કરે છે, value: parameter:

• value: null (અથવા simply omitted): indeterminate: forever animates કરે છે, promising ફક્ત "working": right unknowable durations માટે (network saves)
• value: 0.0 to 1.0: determinate: તે fraction ને displays કરે છે: 3 of 5 pass photos uploaded એ value: 0.6 છે

note scale: 0 to 1 as a double, Android ના setMax(100)/setProgress(60) નહીં: Unit 1 twin different units સાથે, અને favourite compare question.

⌨️ Practical

loading overlay: Stack + indicator + bool

class _BookingState extends State<BookingScreen> {
  bool saving = false;

  void book() {
    setState(() { saving = true; });        // overlay ને show કરો
    saveToServer().then((_) {
      setState(() { saving = false; });     // completion path માં hide કરો
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        bookingForm(),                       // the page itself

        if (saving) ...[                     // conditional children
          Positioned.fill(                   // translucent blanket
            child: Container(color: Colors.black54),
          ),
          const Center(                      // the spinner on top
            child: CircularProgressIndicator(),   // value: null = spins
          ),
        ],
      ],
    );
  }
}
// Determinate cousin, 5-photo upload માટે:
// LinearProgressIndicator(value: uploaded / 5)   // 3 of 5 -> 0.6

📖 Theory

Stack, deeper pass

invisible-widgets lesson એ Stack ને FrameLayout ના twin તરીકે introduce કર્યું; overlay તેના 2 power tools ને use કરે છે:

• Positioned.fill: child ને stretch કરે છે ENTIRE stack પર: translucent Container આખા form ને blankets કરે છે, stray taps ને absorbing કરે છે
• non-positioned children stack ના alignment ને obey કરે છે (અથવા Center wrapper, અહીં જેમ): spinner mid-screen float થાય છે

અને conditional if (saving) ...[ ] children list ની અંદર એ Flutter નો idiom છે widgets માટે જે ક્યારેક exist કરે છે: bool decide કરે છે, setState flip કરે છે, rebuild overlay ને add અથવા remove કરે છે: state deciding STRUCTURE, ફક્ત values નહીં.

🧩 Quiz

શું difference છે CircularProgressIndicator() અને CircularProgressIndicator(value: 0.6) વચ્ચે?

1. કોઈ નહીં: value ફક્ત size ને change કરે છે
2. first forever spins કરે છે (indeterminate); second fixed 60% arc ને show કરે છે (determinate)
3. first invisible છે જ્યાં સુધી value supply ન થાય
4. value: 0.6 તેને 60% speed પર spin કરાવે છે

💭 Think first

overlay ના life cycle ને Audit કરો

listing ના book() flow ને walk કરો: શું appear થાય છે ક્યારે, શું black54 Container actually contribute કરે છે dimming સિવાય, અને: recalling Unit 1 ના Android ProgressBar rule: શું failure path આ simplified code હજુ handling નથી કરતું?

⚠️ Watch out

Indicator અને overlay slips

value: 60: 0-to-1 scale એટલે 60 clamped nonsense છે; fractions, percentages નહીં.

Overlay without blanket: naked spinner live form પર હજુ taps ને let કરે છે through: Positioned.fill Container એ tap shield છે.

ફક્ત success પર Hiding કરવું: reveal નો eternal spinner: દરેક path (success, error) એ flag ને lower કરવું જોઈએ.

measurable work માટે Indeterminate: 5-photo upload mystery spinner સાથે information ને waste કરે છે જે user love કરે છે have કરવા.

📖 Theory

Composition એ Flutter answer છે

notice કરો કે શું Flutter આપ્યું નહોતું: LoadingOverlay widget. તે આપ્યું Stack, Positioned.fill, Container, indicator અને bool: અને overlay એ તેમનું COMPOSITION છે, 10 honest lines. એ framework ની philosophy છે એક exhibit માં: few primitives, infinite assemblies: same lesson જેમ Unit 1 નું hand-composed ImageSlider. next: fest નું event list returns થાય છે one final time: Flutter ના Lists, જ્યાં ListView.builder completes કરે છે adapter story જે આ subject ના very first lesson માં શરૂ થઈ હતી.

✅ Summary

Key takeaways

• LinearProgressIndicator = bar, CircularProgressIndicator = spinner; એક widget family, 2 shapes.
• value: null/omitted = indeterminate (forever spins); value: 0.0-1.0 = determinate fraction: 0-to-1, ક્યારેય 0-to-100 નહીં.
• Indeterminate unknowable waits માટે (network), determinate measurable ones માટે (n of 5 uploads).
• loading overlay = Stack + Positioned.fill translucent Container (tap shield) + centered spinner + saving bool.
• if (cond) ...[ ] children list માં: state deciding structure.
• Overlay ને hide કરો EVERY completion path માં અથવા તે forever spins કરે છે.
• Memory hook: null spins, fractions fill, blanket stray taps ને eat કરે છે.