Theory
एक Heap में चार Widgets
पिछले lesson ने card के pieces बनाए: poster, title, star, button। एक bare Column में drop होने पर वे screen edges से flush बैठते हैं, एक-दूसरे से glued, title left में जाम: एक heap, card नहीं।
इसमें जो कुछ भी ग़लत है वह ARRANGEMENT है: spacing, alignment, framing: invisible widgets का province। इनमें से छह syllabus carry करते हैं, और छह में से एक एक पुराना Android friend है जो नया नाम पहने हुए है।
Theory
Column और Row: Axis Pair
Column(children: [...]) children को vertically stack करता है; Row(...) इन्हें horizontally line up करता है: Unit 1 का LinearLayout, 2 honest widgets में split।
इनकी shared properties axes में बोलती हैं:
- mainAxisAlignment: direction के along:
MainAxisAlignment.center,.spaceBetween,.spaceEvenly - crossAxisAlignment: इसके across: एक Column का cross axis horizontal है
तो crossAxisAlignment: CrossAxisAlignment.start वाला एक Column अपने children को left-align करता है; mainAxisAlignment: MainAxisAlignment.spaceEvenly वाला एक Row अपने buttons को toolbar जैसा spread करता है।
Theory
Center, Padding, Scaffold
Center(child:): एक child, दोनों तरफ़ centred: सबसे quickest dignity जो एक lone widget को मिल सकती है।
Padding(padding: EdgeInsets.all(16), child:): breathing space, EdgeInsets से measured: .all(16) हर जगह, .symmetric(horizontal: 24), .only(left: 8): Flutter में space एक WIDGET है जो दूसरे को wrap करता है, एक पर scribbled property नहीं।
Scaffold: named slots के साथ screen का skeleton: appBar: AppBar(title: Text(...)), body:, floatingActionButton:: हर proper screen एक Scaffold की तरह शुरू होती है, यही वजह है यह पहले example से हर example को frame कर रहा है।
Practical
Booking Screen, Properly Arranged
Scaffold(
appBar: AppBar(title: const Text('FestConnect')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack( // overlap: FrameLayout's twin
children: [
Image.asset('assets/garba.png', height: 180),
Positioned( // pin within the Stack
top: 8,
right: 8,
child: Container(
color: Colors.red,
padding: const EdgeInsets.all(4),
child: const Text('SOLD OUT',
style: TextStyle(color: Colors.white)),
),
),
],
),
const Text('Garba Night',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Main Ground, 7:30 pm'),
Icon(Icons.star, color: Colors.amber),
],
),
],
),
),
)
Quiz
Flutter का Stack Unit 1 के किस Android container का direct twin है, और वे कौन सा rule share करते हैं?
- LinearLayout: एक line में children
- FrameLayout: children एक frame में overlap होते हैं, LAST child ऊपर draw होता है
- ScrollView: एक child, scrolling
- TabLayout: tabs के पीछे children
Show the answer
FrameLayout: children एक frame में overlap होते हैं, LAST child ऊपर draw होता है
Stack एक Dart passport के साथ FrameLayout IS है: children same frame occupy करते हैं, list order में painted होते हैं, तो last child ऊपर बैठता है: यही वजह है listing का SOLD OUT badge, poster के बाद listed, इसके ऊपर paint होता है। Positioning भी rhyme करता है: Android का layout_gravity Flutter का Positioned(top:, right:) बन जाता है जो Stack के अंदर एक child pin करता है। LinearLayout के twins Row और Column हैं; ScrollView का SingleChildScrollView है। इन twins को पहचानना Flutter के through honest shortcut है: आपने ये layouts पहले से एक बार सीखी हैं, XML में।
Think first
पीली-काली Stripes
एक Row में poster thumbnail plus एक लंबा event title है, और एक narrow phone पर app Row के right edge पर पीली-काली warning stripes paint करता है। Diagnose कीजिए क्या हुआ और standard cure नाम दीजिए, tap करने से पहले।
Show the answer
Overflow: Row के children ने screen के पास जितनी width है उससे ज़्यादा demand की, और Flutter, चुपचाप clip करने के बजाय (Unit 1 का ScrollView lesson याद रखता है), debug builds में hazard stripes paint करता है और exactly बताता है कितने pixels से। Standard cure: flexible child को Expanded में wrap कीजिए: Expanded(child: Text(title)): जो इसे बची हुई space देता है और text को इसके अंदर wrap या ellipsize होने देता है। Diagnosis habit: stripes = Row/Column में कोई जितनी room exist करती है उससे ज़्यादा चाहता है = पता कीजिए किसे flex करना चाहिए, Expanded में wrap कीजिए।
Watch out
Arrangement Slips
Main बनाम Cross Axis: एक Column का mainAxisAlignment चीज़ों को VERTICALLY move करता है; students जो horizontal centring expect करते हैं उन्हें इसका crossAxisAlignment चाहिए: property तक पहुँचने से पहले axis का नाम लीजिए।
Property की तरह Padding: Text पर कोई padding: नहीं है; Padding एक EdgeInsets वाली WRAPPER widget है।
Scaffold-less Screens: Scaffold skip करना app bar, background और floating-button slots खो देता है और कई Material widgets की assumptions तोड़ता है: screens हमेशा Scaffold से शुरू होती हैं।
Theory
Trees को एक Architect की तरह पढ़िए
Listing को outside-in पढ़ने की practice कीजिए: Scaffold frame करता है, Padding breathe करता है, Column stack करता है, Stack overlap करता है, leaves show करती हैं: हर Flutter screen कभी भी अलग nouns के साथ यही sentence है। और नोटिस कीजिए twins mapping अब Unit 1 के containers के लिए complete है: LinearLayout = Row/Column, FrameLayout = Stack, ScrollView = SingleChildScrollView। अगला lesson 2 text widgets में descend करता है: Text की fine print और TextField, जहाँ typing state से मिलती है।
Summary
Key takeaways
- Column vertically stack करता है, Row horizontally: mainAxisAlignment along, crossAxisAlignment across।
- Center एक child centre करता है; Padding EdgeInsets (.all, .symmetric, .only) से space wrap करता है।
- Scaffold screen skeleton है: appBar, body, floatingActionButton named slots।
- Stack children overlap करता है (last ऊपर) Positioned pinning के साथ: FrameLayout का direct twin।
- Overflow पीली-काली stripes paint करता है; Expanded एक child को flexible बची हुई space देता है।
- Space और alignment widgets को wrap करने वाले WIDGETS हैं, properties नहीं।
- Memory hook: frame, breathe, stack, line, centre: arrangement invisible work है।