Charts, Flutter Form

📖 Theory

semester ની last screen

FestConnect Flutter ની list પર બે jobs બાકી છે, અને તેઓ આખા subject ને close કરે છે.

committee attendance chart માંગે છે: day 1 vs day 2 vs day 3, bars.

અને registration હજુ empty name અને 3-digit phone ને accept કરે છે: form ને validation ની જરૂર છે જે precisely scold કરે અને submission ને block કરે જ્યાં સુધી clean ન થાય.

આમાંથી એક job માટે Flutter widget ship કરવાનો ઇનકાર કરે છે: અને બંને endings framework ના deepest habit ને શીખવે છે.

📖 Theory

Charts: honest situation

Flutter પાસે કોઈ built-in chart widget નથી. real-world route એ pub.dev થી package છે, pubspec.yaml માં declared:

dependencies:

fl_chart: ^0.66.0

પછી flutter pub get, import, અને તેના BarChart/LineChart widgets ને use કરો. (fl_chart આજનું standard છે; charts_flutter એ Google નું older library હતું.)

પણ 3-bar attendance chart માટે, purer answer છે: compose કરો: Containers નો Row જેની heights data છે: કોઈ package નહીં, ક્યાંય runs થાય છે, અને તે ImageSlider lesson નો moral છે ફરીથી: missing widgets એ assemblies છે waiting to happen.

⌨️ Practical

bar chart ફક્ત Containers થી

final attendance = {'Day 1': 320.0, 'Day 2': 410.0, 'Day 3': 275.0};

Row(
  crossAxisAlignment: CrossAxisAlignment.end,   // bars floor થી grow થાય છે
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: attendance.entries.map((e) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('${e.value.toInt()}'),
        Container(
          width: 48,
          height: e.value / 2,        // data pixels ને drive કરે છે: 410 -> 205
          color: Colors.deepOrange,
        ),
        Text(e.key),
      ],
    );
  }).toList(),
)

📖 Theory

Form: validation as a system

ત્રણ pieces scattered fields ને validating Form માં turn કરે છે:

• the key: final _formKey = GlobalKey<FormState>(); handed to Form(key: _formKey): તમારો handle form ના state તરફ
• TextFormField: TextField plus validator: function: (v) => v!.isEmpty ? 'Enter your name' : null
• the submit call: _formKey.currentState!.validate(): દરેક field ના validator ને runs કરે છે, દરેક returned message ને તેના own field ની નીચે paints કરે છે, અને true ને answers કરે છે ફક્ત જો બધા null return કર્યા હોય

validator ના contract ને carefully read કરો: null return કરવું એટલે VALID: String એ error message છે. તે inversion એ આ topic નો certain exam question છે.

⌨️ Practical

finished registration form

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: const InputDecoration(labelText: 'Your name'),
        validator: (v) =>
            v == null || v.isEmpty ? 'Enter your name' : null,
      ),
      TextFormField(
        decoration: const InputDecoration(labelText: 'Phone'),
        keyboardType: TextInputType.number,
        validator: (v) =>
            v != null && v.length == 10 ? null : 'Enter a 10-digit phone',
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // દરેક validator null return કર્યું: register!
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Registered for the fest!')));
          }
        },
        child: const Text('Register'),
      ),
    ],
  ),
)

🧩 Quiz

TextFormField નો validator null return કરે છે. તેનો અર્થ શું?

1. field validation ને failed કર્યું કોઈ specific message વગર
2. field VALID છે: null એટલે report કરવા માટે કોઈ error નથી; returned String એ error message છે
3. validator null input પર crash થયો
4. field ને empty leave કરવામાં આવ્યું

💭 Think first

આખી journey, એક screen માં

finished form ને look કરો અને name કરો કે તેના દરેક pieces ક્યાં learn થયા હતા: Column, TextFormField નું decoration, keyboardType, setState-less validate flow, SnackBar, અને named parameters જે તે બધું carry કરે છે. પછી tap કરો roll call માટે.

⚠️ Watch out

Final-topic traps

built-in chart widget ને Inventing કરવું: honest options ને name કરો: pub.dev packages (fl_chart) અથવા composition: pretending કે Flutter BarChart ને natively ships કરે છે તે mark ને lose કરે છે.

validator logic inverted: success પર 'OK' return કરવું OK ને error તરીકે paint કરે છે: null passes, String fails, હંમેશા.

key ને Forgetting કરવું: validate() form સુધી ફક્ત GlobalKey દ્વારા પહોંચે છે; Form વગર એ decoration છે.

default પર દરેક keystroke પર Validating કરવું: validate() on submit એ calm default છે; live validation એ opt-in છે (autovalidateMode), free નહીં.

📖 Theory

subject closes થાય છે

count કરો કે તમે હવે શું carry કરો છો: Android નું widget catalogue અને તેનું adapter/recycling machinery, બીજી language જેને week માં transfer દ્વારા learn કર્યું, Flutter નું widget algebra (visible/invisible, stateless/stateful, state દ્વારા controlled), અને એક app જે TWICE build થયું. જ્યારે BCA503-02 અને real internships તમને React અથવા જે next આવે તે hand કરે, ત્યારે same 3 questions પૂછીને walk in કરો: તે કેવી રીતે show કરે છે, કેવી રીતે change થાય છે, data કેવી રીતે flow થાય છે: અને તમે lunch સુધી at home feel કરશો. FestConnect Mobile 2: shipped.

✅ Summary

Key takeaways

• કોઈ built-in charts નહીં: pub.dev packages (fl_chart) pubspec dependencies + flutter pub get દ્વારા, અથવા data-driven Containers થી bars ને compose કરો.
• Form(key: GlobalKey<FormState>()) TextFormFields ને wrap કરે છે: TextField plus validator.
• Validator contract: return null = VALID; return String = invalid, અને તે String painted error છે.
• _formKey.currentState!.validate() બધા validators ને runs કરે છે, messages ને show કરે છે, true return કરે છે ફક્ત જો બધા passed હોય.
• Submit pattern: if (validate()) proceed: કોઈ setState ની જરૂર નથી; form state key ની પાછળ lives કરે છે.
• Composition એ missing widgets માટે Flutter answer રહે છે.
• Memory hook: null passes, Strings scold, અને શું Flutter lacks કરે છે, તમે compose કરો.