Theory
Event card, દેખાતા એક એક ટુકડે
FestConnect Flutter ના event card ને બરાબર 4 પ્રકારની દેખાતી વસ્તુ જોઈએ છે: poster (એક image), ભારપૂર્વકના નારંગી રંગમાં શીર્ષક (text), ખાસ events માટે નાનકડો તારો (એક icon), અને Book નું button.
Unit 1 માં આમાંનું દરેક એક XML tag વત્તા Java ની શોધખોળ હતું. Flutter માં દરેક એટલે named parameters વાળો constructor નો call: Dart ના functions વાળો પાઠ હવે દેખીતી રીતે ભાડું ચૂકવવા લાગ્યો છે. ચાર widgets, અને દરેક એક જ રીતે શીખવાનું: પહેલાં constructor, પછી જે properties મહત્ત્વની હોય તે.
Theory
Text અને તેનો TextStyle
Text('Garba Night') એ જ એનું આખું ઓછામાં ઓછું રૂપ છે. શણગાર એક જ named parameter પર સવારી કરે છે:
Text('Garba Night',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.deepOrange,
),
textAlign: TextAlign.center,
maxLines: 1,
)
ઘાટ પર ધ્યાન આપો: style પોતે જ એક object છે (TextStyle), જે named parameters વડે ઘડાય છે: widgets ને widgets ગોઠવે છે, objects ને objects ગોઠવે છે, અને એ સાંકળ છેક નીચે સુધી ચાલે છે.
Theory
Image: બે constructors, અને pubspec નું એક દાણ
Image દરેક સ્રોત માટે અલગ named constructors સાથે આવે છે:
Image.asset('assets/garba.png'): app ની અંદર જ બંધાયેલી image. ચૂકવવાનું દાણ આ છે: એ file pubspec.yaml માંassets:નીચે પણ નોંધાયેલી હોવી જોઈએ, નહીં તો app ચાલશે ખરી પણ એ file શોધી નહીં શકેImage.network('https://fest.example/poster.png'): ચાલુ app માં download થતી image: એને internet જોઈએ, અને એ થોડા વિલંબ પછી આવે છે
બંનેમાં સહિયારી properties: width, height, અને fit: BoxFit.cover (કાપીને ભરી દેવું, poster માટેની રૂઢ પસંદગી).
Practical
Card નો ઉપરનો ભાગ: ચારેય દેખાતાં widgets
Column(
children: [
Image.asset('assets/garba.png', // 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 અહીં રહેશે
},
child: const Text('Book'),
),
const ElevatedButton(
onPressed: null, // null = નિષ્ક્રિય, ભૂખરું પડી જાય
child: Text('Sold out'),
),
],
)
Theory
Buttons અને Icon: ઝીણી શરતો
ElevatedButton (ઊપસેલું), TextButton (સપાટ) અને IconButton (ફક્ત icon) ત્રણેયનું હૃદય એક જ બે parameters વાળું છે:
onPressed:એટલે tap થાય ત્યારે ચાલતું callback, અને એ જ વર્તનની ચાવી પણ: null એટલે નિષ્ક્રિય, એટલે કે ભૂખરું અને દબાવી ન શકાય એવું, અને એ માટે null સિવાય બીજો કોઈ code લખવો પડતો નથીchild:એટલે કોઈ પણ widget: સામાન્ય રીતે Text, ક્યારેક Icon, અને બંનેની Row પણ ચાલે
Icon(Icons.star) અંદરથી મળતી Icons ની યાદી માંથી દોરે છે: એ font માંથી દોરાય છે, એટલે size: અને color: વડે એને છૂટથી બદલી શકાય: કોઈ image files નહીં, pubspec નું કોઈ દાણ નહીં.
Quiz
ElevatedButton(onPressed: null, child: Text('Book')) વપરાશકારને શું દેખાય છે અને શું મળે છે?
- સામાન્ય button, જે tap કરતાં crash થાય છે
- ભૂખરું પડી ગયેલું, નિષ્ક્રિય button: onPressed માટેનું null એ જ Flutter ની નિષ્ક્રિય કરવાની ચાવી છે
- Compile error: onPressed null હોઈ શકે જ નહીં
- અદ્રશ્ય button, જે કશી જગ્યા રોકતું નથી
Show the answer
ભૂખરું પડી ગયેલું, નિષ્ક્રિય button: onPressed માટેનું null એ જ Flutter ની નિષ્ક્રિય કરવાની ચાવી છે
Flutter callback ની હાજરીને જ સક્રિય હોવાની નિશાની ગણે છે: function હોય એટલે tap થઈ શકે, અને null હોય એટલે નિષ્ક્રિય, અને button પોતે જ આપોઆપ ભૂખરું થઈ જાય છે: Android નું setEnabled(false) અહીં એક જ parameter માં સંકેલાઈ ગયું છે. એટલા માટે જ વેચાઈ ગયેલા events null મોકલે છે અને ખુલ્લા events પોતાનું booking વાળું closure. વિકલ્પ A એવું કલ્પે છે કે null ને બોલાવવામાં આવે છે: જે છે જ નહીં એને Flutter ક્યારેય બોલાવતું નથી. વિકલ્પ C ખોટો છે, કારણ કે એ parameter નો type બરાબર આ જ હેતુ માટે null ને સ્પષ્ટપણે સ્વીકારે છે. વિકલ્પ D નિષ્ક્રિય અને ગેરહાજર વચ્ચે ગૂંચવાય છે: button તો દેખાતું જ રહે છે, બસ પ્રામાણિકપણે ભૂખરું.
Think first
એ asset જે એકેય ફોન પર ચાલી નહીં
એક સહાધ્યાયી project ના folder માં assets/garba.png ઉમેરે છે, Image.asset('assets/garba.png') લખે છે, અને ચાલતી app માં જ્યાં poster દેખાવું જોઈએ ત્યાં ભૂલનું ખોખું દેખાય છે. રસ્તો તો સાચો છે. એણે શું છોડી દીધું, અને Flutter એની માગણી શા માટે કરે છે?
Show the answer
pubspec.yaml માં નોંધણી: flutter: ની નીચે assets: માં એણે assets/garba.png (અથવા આખું assets/ folder) લખવું જ પડે. Flutter app માં ફક્ત એ જ બાંધે છે જે pubspec જાહેર કરે છે: build ને દરેક file ની જાણ હોવી જોઈએ, અને ફક્ત folder માં પડી રહેલી file એના માટે અદ્રશ્ય જ છે. (pubspec બદલ્યા પછી app ફરી ચલાવો: એકલા hot reload થી assets ફરી બંધાતાં નથી.)
પરીક્ષા માટે આ જોડી સાચવી રાખો: Image.asset એટલે app માં બંધાયેલી વત્તા pubspec નું દાણ વત્તા તરત દેખાય; Image.network એટલે download થતી વત્તા internet જોઈએ વત્તા વિલંબ. ચિત્ર ક્યાં પડ્યું છે એના પરથી પસંદગી કરો.
Watch out
દેખાતાં widgets માં થતી ભૂલો
નોંધ્યા વગરનાં assets: ઉપરના કોયડા વાળી ભૂલ: કાં તો pubspec.yaml, કાં તો કશું નહીં.
style: 'bold': TextStyle એ OBJECT છે, string નહીં: style: TextStyle(fontWeight: FontWeight.bold).
child અને text ની ગૂંચવણ: buttons માં text: નામનું parameter હોતું જ નથી; લખાણ તો child: Text(...) છે: આ જ composition ની ટેવ છે.
Network ની images તરત આવશે એમ ધારવું: એ download પછી જ આવે છે; વચ્ચે loading નું ચિહ્ન બતાવવું એ ઓપવાળી ટેવ છે (અને Unit 5 નાં progress widgets એ પૂરું પાડશે).
Theory
Constructor વત્તા properties: શીખવાનો ઢાંચો
દરેક widget કઈ રીતે શીખાયું એ જુઓ: પહેલાં constructor નું રૂપ, પછી એ 3 કે 4 properties જે એનું વ્યક્તિત્વ ઊંચકે છે: BCA404 ના controls અને Unit 1 નાં widgets વાળો એ જ properties તથા events નો ઢાંચો, અહીં named parameters તરીકે લખાયેલો. આ વિષયમાં બાકી રહેલું દરેક widget આ જ પ્રશ્નાવલિ સામે ખૂલી જશે. Card ના ટુકડા હવે હયાત છે, પણ એ ફક્ત એકની ઉપર એક ખડકાયેલા છે. એમને સુંદર રીતે ગોઠવવાનું કામ ન દેખાતાં widgets નું છે: Column, Row, Center, Padding, Scaffold અને Stack, અને એ જ હવે પછી.
Summary
Key takeaways
- Text(data, style: TextStyle(fontSize, fontWeight, color), textAlign, maxLines): style પોતે એક object છે.
- App માં બંધાયેલી files માટે Image.asset (pubspec.yaml માં નોંધણી ફરજિયાત); download માટે Image.network; અને posters માટે fit: BoxFit.cover.
- Buttons: ElevatedButton / TextButton / IconButton, જેમાં onPressed: અને child: (કોઈ પણ widget).
- onPressed: null એટલે નિષ્ક્રિય અને આપોઆપ ભૂખરું: સક્રિય કરવાની ચાવી એટલે callback ની હાજરી.
- Icon(Icons.name, size, color): font માંથી દોરાય છે, છૂટથી રંગી શકાય, અને asset નું કોઈ દાણ નહીં.
- દરેક widget ને constructor વત્તા થોડી મહત્ત્વની properties તરીકે શીખો.
- યાદ રાખવાની કડી: null button ને સુવડાવે, pubspec image ને ખવડાવે, અને style એ object છે.