Theory
ચાર widgets heap માં
last lesson એ card ના pieces ને build કર્યા: poster, title, star, button. bare Column માં dropped કરવામાં આવ્યા તો તેઓ screen edges સામે flush sit કરે છે, એકબીજા સાથે glued, title ડાબી બાજુએ jammed: heap, card નહીં.
તેમાં બધું wrong એ ARRANGEMENT છે: spacing, alignment, framing: invisible widgets નો province. છ તેમને syllabus ને carry કરે છે, અને છ માંથી એક એ Android નો જૂનો friend છે નવું name પહેરેલું.
Theory
Column અને Row: axis pair
Column(children: [...]) children ને vertically stack કરે છે; Row(...) તેમને horizontally lines કરે છે: Unit 1 નું LinearLayout, split 2 honest widgets માં.
તેમના shared properties axes માં speak કરે છે:
- mainAxisAlignment: direction ની સાથે:
MainAxisAlignment.center,.spaceBetween,.spaceEvenly - crossAxisAlignment: તેની આરપાર: Column નો cross axis horizontal છે
તેથી Column સાથે crossAxisAlignment: CrossAxisAlignment.start તેના children ને left-align કરે છે; Row સાથે mainAxisAlignment: MainAxisAlignment.spaceEvenly તેના buttons ને toolbar જેમ spreads કરે છે.
Theory
Center, Padding, Scaffold
Center(child:): એક child, બંને રીતે centred: એકલા widget ને quickest dignity.
Padding(padding: EdgeInsets.all(16), child:): breathing space, measured by EdgeInsets: .all(16) everywhere, .symmetric(horizontal: 24), .only(left: 8): space Flutter માં એ WIDGET છે જે બીજા ને wrap કરે છે, property નહીં જે એક પર scribbled હોય.
Scaffold: screen નું skeleton named slots સાથે: appBar: AppBar(title: Text(...)), body:, floatingActionButton:: દરેક proper screen Scaffold તરીકે start થાય છે, જે શા માટે તેણે દરેક example ને frame કર્યું છે first થી.
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 નું 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
કયું Unit 1 Android container Flutter ના Stack નું direct twin છે, અને શું rule તેઓ share કરે છે?
- LinearLayout: children line માં
- FrameLayout: children એક frame માં overlap થાય છે, LAST child top પર drawn થાય છે
- ScrollView: એક child, scrolling
- TabLayout: children tabs ની પાછળ
Show the answer
FrameLayout: children એક frame માં overlap થાય છે, LAST child top પર drawn થાય છે
Stack IS FrameLayout Dart passport સાથે: children same frame ને occupy કરે છે, painted list order માં, તેથી last child top પર sits કરે છે: જે શા માટે listing નું SOLD OUT badge, poster પછી listed, તેની ઉપર paints થાય છે. positioning પણ rhymes કરે છે: Android નું layout_gravity એ Flutter નું Positioned(top:, right:) બને છે child ને Stack ની અંદર pin કરે છે. LinearLayout ના twins એ Row અને Column છે; ScrollView નું એ SingleChildScrollView છે. આ twins ને recognising કરવું એ honest shortcut છે Flutter માંથી: તમે આ layouts ને once already learn કર્યા હતા, XML માં.
Think first
yellow-and-black stripes
Row poster thumbnail plus long event title ને hold કરે છે, અને narrow phone પર app Row ની જમણી edge પર yellow-black warning stripes ને paint કરે છે. diagnose કરો કે શું થયું અને standard cure ને name કરો, tap કરતા પહેલાં.
Show the answer
Overflow: Row ના children એ screen ની પાસે જે width હતી તેનાથી more demand કર્યું, અને Flutter, silently clipping (Unit 1 નું ScrollView lesson remembers) ને બદલે, hazard stripes ને paint કરે છે debug builds માં અને તમને કહે છે કે exactly કેટલા pixels દ્વારા. standard cure: flexible child ને Expanded માં wrap કરો: Expanded(child: Text(title)): જે તેને leftover space ને grant કરે છે અને text ને wrap અથવા ellipsize કરવા દે છે તેની અંદર. diagnosis habit: stripes = કોઈ Row/Column માં more room માંગે છે જે exists કરે છે = શોધો કે કોણ flex થવું જોઈએ, wrap in Expanded.
Watch out
Arrangement slips
Main vs cross axis: Column નું mainAxisAlignment things ને VERTICALLY move કરે છે; students expecting horizontal centring તેના crossAxisAlignment ને want કરે છે: property સુધી reach કરતા પહેલાં axis ને name કરો.
Padding as a property: Text પર કોઈ padding: નથી; Padding એ WRAPPER widget છે EdgeInsets સાથે.
Scaffold-less screens: Scaffold ને skip કરવું એ app bar, background અને floating-button slots ને lose કરે છે અને many Material widgets ના assumptions ને breaks કરે છે: screens હંમેશા Scaffold થી start થાય છે.
Theory
trees ને architect જેમ read કરો
listing ને outside-in read કરવાનો practise કરો: Scaffold frames કરે છે, Padding breathes કરે છે, Column stacks કરે છે, Stack overlaps કરે છે, leaves show કરે છે: દરેક Flutter screen ever એ sentence છે different nouns સાથે. અને notice કરો કે twins mapping હવે complete છે Unit 1 ના containers માટે: LinearLayout = Row/Column, FrameLayout = Stack, ScrollView = SingleChildScrollView. next lesson 2 text widgets માં descends થાય છે: Text નું fine print અને TextField, જ્યાં typing state ને meet કરે છે.
Summary
Key takeaways
- Column vertically stacks કરે છે, Row horizontally: mainAxisAlignment along, crossAxisAlignment across.
- Center એક child ને centre કરે છે; Padding space ને wrap કરે છે EdgeInsets દ્વારા (.all, .symmetric, .only).
- Scaffold એ screen skeleton છે: appBar, body, floatingActionButton named slots.
- Stack children ને overlap કરે છે (last on top) Positioned સાથે pinning કરે છે: FrameLayout નું direct twin.
- Overflow yellow-black stripes ને paint કરે છે; Expanded child ને flexible leftover space આપે છે.
- Space અને alignment એ WIDGETS છે જે widgets ને wrap કરે છે, properties નહીં.
- Memory hook: frame, breathe, stack, line, centre: arrangement એ invisible work છે.