Theory
Event Card, Piece by Visible Piece
FestConnect Flutter के event card को exactly 4 तरह की visible चीज़ें चाहिए: poster (एक image), confident orange में title (text), featured events के लिए एक छोटा star (icon), और Book button।
Unit 1 में इनमें से हर एक एक XML tag plus Java lookups था। Flutter में हर एक एक constructor call named parameters के साथ है: Dart functions lesson, अब visibly rent pay कर रहा है। चार widgets, हर एक same तरीके से सीखा गया: पहले constructor, फिर वे properties जो matter करती हैं।
Theory
Text और इसकी TextStyle
Text('Garba Night') पूरा minimal form है। Styling एक named parameter पर सवार होती है:
Text('Garba Night',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.deepOrange,
),
textAlign: TextAlign.center,
maxLines: 1,
)
Shape नोटिस कीजिए: style खुद एक object (TextStyle) है जो named parameters से बना है: widgets widgets configure करते हैं, objects objects configure करते हैं, नीचे तक सब।
Theory
Image: दो Constructors, एक Pubspec Toll
Image per source named constructors ship करता है:
Image.asset('assets/garba.png'): एक image जो app के अंदर bundled है। Toll जो pay करना है: file को pubspec.yaml मेंassets:के under भी registered होना ज़रूरी है, वरना app चलता है और फिर इसे ढूँढने में fail होता हैImage.network('https://fest.example/poster.png'): runtime पर downloaded: internet चाहिए, एक delay के बाद आती है
Shared properties: width, height, और fit: BoxFit.cover (crop-to-fill, usual poster choice)।
Practical
Card का Top: सभी 4 Visible Widgets
Column(
children: [
Image.asset('assets/garba.png', // registered in pubspec.yaml!
height: 180, fit: BoxFit.cover),
const Text('Garba Night',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.deepOrange)),
const Icon(Icons.star, size: 30, color: Colors.amber),
ElevatedButton(
onPressed: () {
// booking logic will live here
},
child: const Text('Book'),
),
const ElevatedButton(
onPressed: null, // null = DISABLED, greyed out
child: Text('Sold out'),
),
],
)
Theory
Buttons और Icon: Small Print
ElevatedButton (raised), TextButton (flat), IconButton (सिर्फ़ एक icon) same 2-parameter heart share करते हैं:
onPressed:tap callback: और behavioural switch: null का मतलब है DISABLED: greyed, unclickable, null के अलावा कोई code नहीं चाहिएchild:कोई भी widget: usually एक Text, एक Icon, दोनों की एक Row भी
Icon(Icons.star) built-in Icons catalogue से draw करता है: एक font से rendered, तो size: और color: freely इसे restyle करते हैं: कोई image files नहीं, कोई pubspec toll नहीं।
Quiz
ElevatedButton(onPressed: null, child: Text('Book')) User क्या देखता है और क्या मिलता है?
- एक normal button जो tap करने पर crash होता है
- एक greyed-out, disabled button: onPressed के लिए null Flutter का disable switch है
- एक compile error: onPressed null नहीं हो सकता
- एक invisible button जो कोई space occupy नहीं करता
Show the answer
एक greyed-out, disabled button: onPressed के लिए null Flutter का disable switch है
Flutter callback की PRESENCE को enabled flag की तरह पढ़ता है: एक function का मतलब है tappable, null का मतलब है disabled, और button खुद automatically grey में restyle हो जाता है: Android का setEnabled(false) एक parameter में folded। यही वजह है sold-out events null pass करते हैं और open events अपनी booking closure। Option A imagine करता है null CALLED हो रहा है: Flutter कभी वह invoke नहीं करता जो वहाँ नहीं है। Option C ग़लत है क्योंकि parameter का type explicitly exactly इसी purpose के लिए null admit करता है। Option D disabled को absent से confuse करता है: button visible रहता है, honestly grey।
Think first
वह Asset जो किसी Phone पर काम नहीं किया
एक classmate assets/garba.png project folder में add करता है, Image.asset('assets/garba.png') लिखता है, और running app में poster की जगह एक error box दिखता है। Path सही है। उसने क्या skip किया, और Flutter इसे क्यों demand करता है?
Show the answer
pubspec.yaml registration: flutter: assets: के under उसे assets/garba.png (या assets/ folder) list करना ज़रूरी था। Flutter सिर्फ़ वही bundle करता है app में जो pubspec declare करे: build को हर file जाननी चाहिए जो package करनी है, और folder में सिर्फ़ बैठी एक file इसके लिए invisible है। (pubspec edit करने के बाद, फिर से run कीजिए: सिर्फ़ hot reload assets को re-bundle नहीं करता।) रखने लायक exam pair: Image.asset = bundled + pubspec toll + instant; Image.network = downloaded + internet + delay: picture कहाँ रहती है उसके हिसाब से चुनिए।
Watch out
Visible-Widget Slips
Unregistered Assets: reveal का bug: pubspec.yaml या कुछ नहीं।
style: 'bold': TextStyle एक OBJECT है, string नहीं: style: TextStyle(fontWeight: FontWeight.bold)।
child बनाम text: buttons में कोई text: parameter नहीं है; label एक child: Text(...) है: composition habit।
Network Images को Instantly Expect करना: वे एक download के बाद आती हैं; एक loading placeholder polished habit है (और Unit 5 के progress widgets एक supply करेंगे)।
Theory
Constructor + Properties: Learning Pattern
नोटिस कीजिए हर widget कैसे सीखा गया: constructor signature, फिर वे 3 या 4 properties जो इसकी personality carry करती हैं: वही properties/events pattern जो BCA404 के controls और Unit 1 के widgets का था, named parameters की तरह spelt। इस subject के बाकी हर widget को same interview yield करता है। Card के pieces अब exist करते हैं: पर वे बस stacked हैं। उन्हें खूबसूरती से arrange करना invisible widgets का काम है: Column, Row, Center, Padding, Scaffold और Stack, अगला।
Summary
Key takeaways
- Text(data, style: TextStyle(fontSize, fontWeight, color), textAlign, maxLines): style एक object है।
- Bundled files के लिए Image.asset (pubspec.yaml में registered होना ज़रूरी); downloads के लिए Image.network; posters के लिए fit: BoxFit.cover।
- Buttons: ElevatedButton / TextButton / IconButton onPressed: + child: (कोई भी widget) के साथ।
- onPressed: null = disabled और auto-greyed: enable switch callback की presence है।
- Icon(Icons.name, size, color): font-drawn, freely tinted, कोई asset toll नहीं।
- हर widget को constructor + कुछ matter करने वाली properties की तरह सीखिए।
- Memory hook: null button को sulaata है, pubspec image को khilaata है, style एक object है।