Theory
Semester की आख़िरी Screen
FestConnect Flutter की list में दो jobs बाकी हैं, और वे पूरा subject बंद करती हैं।
Committee एक attendance chart चाहती है: day 1 बनाम day 2 बनाम day 3, bars।
और registration अभी भी एक empty name और एक 3-digit phone accept करती है: form को validation चाहिए जो precisely scold करे और clean होने तक submission block करे।
इनमें से एक job के लिए Flutter एक widget ship करने से मना करता है: और दोनों endings framework की सबसे deep 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 इस्तेमाल कीजिए। (fl_chart आज का standard है; charts_flutter Google की older library थी।)
पर एक 3-bar attendance chart के लिए, एक purer answer है: इसे compose कीजिए: Containers की एक Row जिनकी heights ही data HAI: कोई package नहीं, कहीं भी चलता है, और यह ImageSlider lesson का moral फिर है: missing widgets assemblies हैं जो happen होने का wait कर रही हैं।
Practical
सिर्फ़ Containers से एक Bar Chart
final attendance = {'Day 1': 320.0, 'Day 2': 410.0, 'Day 3': 275.0};
Row(
crossAxisAlignment: CrossAxisAlignment.end, // bars grow from a floor
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 drives the pixels: 410 -> 205
color: Colors.deepOrange,
),
Text(e.key),
],
);
}).toList(),
)
Theory
Form: एक System की तरह Validation
तीन pieces scattered fields को एक validating Form में बदलते हैं:
- key:
final _formKey = GlobalKey<FormState>();Form(key: _formKey)को hand किया गया: form की state का आपका handle - TextFormField: TextField plus एक
validator:function:(v) => v!.isEmpty ? 'Enter your name' : null - submit call:
_formKey.currentState!.validate(): EVERY field का validator चलाता है, हर fail होने वाले field के नीचे इसका returned message paint करता है, और सिर्फ़ तब true answer देता है जब सब null return करें
Validator के contract को ध्यान से पढ़िए: null return करने का मतलब है VALID: एक String error message है। यह inversion इस topic का certain exam question है।
Practical
पूरी हुई 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()) {
// every validator returned null: register!
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Registered for the fest!')));
}
},
child: const Text('Register'),
),
],
),
)
Quiz
एक TextFormField का validator null return करता है। इसका क्या मतलब है?
- Field बिना specific message के validation में fail हुआ
- Field VALID है: null मतलब है report करने के लिए कोई error नहीं; एक returned String error message है
- Validator एक null input पर crash हुआ
- Field empty छोड़ी गई
Show the answer
Field VALID है: null मतलब है report करने के लिए कोई error नहीं; एक returned String error message है
Contract instinct से inverted है और इसलिए हमेशा examined होता है: validator की return value ही error message HAI, तो report करने के लिए कुछ नहीं: null: मतलब field pass हुई, जबकि कोई भी String field को fail करता है और नीचे painted red text भी बन जाता है। validate() फिर aggregate करता है: सिर्फ़ तब true जब हर field ने null answer दिया। Option A null को usual something-went-wrong instinct से पढ़ता है जिसे break करने के लिए यह question exist करता है। Options C और D INPUT (v, जो null या empty हो सकता है और जिसे आप test करते हैं) को RETURN (आपके verdict) से confuse करते हैं। यहाँ null एक clean bill of health है।
Think first
पूरी Journey, एक Screen में
पूरी हुई form देखिए और नाम दीजिए इसके हर piece को कहाँ सीखा गया था: Column, TextFormField की decoration, keyboardType, setState-less validate flow, SnackBar, और सब carry करने वाले named parameters। फिर roll call के लिए tap कीजिए।
Show the answer
Column: invisible-widgets lesson। decoration/InputDecoration और keyboardType: TextField lesson। Button और इसकी rank: buttons-slider। SnackBar: पिछला lesson। हर जगह Named parameters: Dart functions lesson, exactly जैसा promise किया गया था। और validate() को कोई setState नहीं चाहिए: FORM object key के ज़रिए field state hold करता है: state theme का एक fitting last variation। एक screen, ग्यारह lessons, दो languages, एक subject: FestConnect Mobile Unit 1 में Java widgets की तरह शुरू हुआ और यहाँ रीबिल्ट, validated और cross-platform ख़त्म होता है। वह arc: platforms से survive करते patterns: यही असली syllabus था।
Watch out
Final-Topic Traps
एक Built-in Chart Widget Invent करना: honest options नाम दीजिए: pub.dev packages (fl_chart) या composition: pretend करना कि Flutter native BarChart ship करता है mark खो देता है।
Inverted Validator Logic: success पर 'OK' return करना OK को एक error की तरह paint करता है: null pass होता है, String fail होता है, हमेशा।
Key भूल जाना: validate() form तक सिर्फ़ GlobalKey के through पहुँचता है; बिना key वाला Form decoration है।
Default से हर Keystroke पर Validate करना: submit पर validate() calm default है; live validation opt-in है (autovalidateMode), free नहीं।
Theory
Subject बंद होता है
Count कीजिए आप अब क्या carry करते हैं: Android का widget catalogue और इसकी adapter/recycling machinery, एक हफ़्ते में transfer से सीखी एक second language, Flutter का widget algebra (visible/invisible, stateless/stateful, state से controlled), और TWICE बनाई गई एक app। जब BCA503-02 और real internships आपको React या जो भी आगे आए वह हाथ में दें, वही 3 questions पूछते हुए जाइए: यह कैसे show करता है, कैसे change होता है, data कैसे flow करता है: और आप lunch तक घर जैसा feel करेंगे। FestConnect Mobile 2: shipped।
Summary
Key takeaways
- कोई built-in charts नहीं: pubspec dependencies + flutter pub get के through pub.dev packages (fl_chart), या data-driven Containers से bars compose कीजिए।
- Form(key: GlobalKey<FormState>()) TextFormFields wrap करता है: TextField plus एक validator।
- Validator contract: null return = VALID; String return = invalid, और वह String painted error है।
- _formKey.currentState!.validate() सारे validators चलाता है, messages दिखाता है, सिर्फ़ सब pass होने पर true return करता है।
- Submit pattern: if (validate()) proceed: कोई setState नहीं चाहिए; form state key के पीछे रहती है।
- Missing widgets का Flutter answer composition ही रहता है।
- Memory hook: null pass होता है, Strings scold करते हैं, और जो Flutter के पास नहीं है, आप compose करते हैं।