Ова е гостински текст на Горјан Јовановски првично објавен на неговиот блог на Medium. Горјан е креатор на апликацијата Мој Воздух (AirCare), активист за заштита на природата, TED-говорник и Team Lead во Booking.com.
Ова е приказна/прирачник за тоа како започнав да работам со Flutter. Ова никако не е широк туторијал, бидејќи има многу начини да се направи ова.
Во 2014, напишав Android апликација наречена AirCare, која користи отворени податоци за визуелизација на загадувањето на воздухот во Македонија. Оттогаш, апликацијата се прошири во 7 држави, има над 100 000 корисници.
Пред неколку месеци, размислував како да овозможам моите Android и iOS апликации да имаат исти функционалности најбрзо што може. Дојдов до заклучок дека треба да користам јазик што ќе ми го овозможи ова. Flutter…
Во овој серијал текстови:
Прв дел: IDE Setup (погледни тука)
Втор дел: Виџети (овој текст)
Flutter е виџет
Сè што гледате во Flutter во принцип е виџет. Ова е името кое Google има го дава на своите UI компоненти од кои е составена вашата апликација. Од „текст бокс“, до „слика“ до „side drawer“, па дури и „app bar“ сите компоненти се виџети.
Пример за виџети во Flutter
Некои од овие виџети доаѓаат вградени во Flutter, и ако сакате можете сите да ги погледнете тука. Останатите што ги нема таму, се дел од надворешни пакети кои ќе ги вклучите во апликациите (ќе го разгледаме ова подцна).
Да погледнеме некој виџети кои веќе постојат во нашата апликација од првиот дел од овој „водич“.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Во main.dart фајлот Flutter сам нѝ дефинираше 3 класи, погледнете ја _MyHomePageState (последната) и фокусирајте се на build методот таму. Ќе забележите дека враќа виџет со име Scaffold. Овој виџет има properties кои сами по себе се виџети (запомни, скоро се во Flutter е виџет). Еве кусо објаснување за секоја од нив кои се во демо апликација:
- Scaffold – вообичаено е виџет од највисоко ниво, го дава главниот преглед на една апликација (буквално скеле), и ви овозможува да дефинирате „app bar“, „body“, „floating action button“и некои додатоци.
- AppBar – е виџет што буквално ја претставува горната лента на вашата апликација. Тука се сместени насловот, логото и икони за акција (на пример споделување).
- Center – е виџет што прави токму она што го наговестува името – се обидува да ги центрира неговите деца виџети во рамките на „парент контејнерот“, и вертикално и хоризонтално.
- Column – е виџет за позиционирање, има листа на „children“-контејнери кои ги позиционира вертикално еден под друг
- Text – е елемент за текст, кој поддржува различно форматирање на текст.
- FloatingActionButton доаѓа од „material design“ на Android и е копче кое вообичаено се наоѓа во долниот десен агол, покажувајќи некоја акција.
Ќе пишувате многу виџети во Flutter и тие речиси секогаш ќе се сместени во „build“-методот. Но ако погледнете во класите кои ги скокнавме, MyApp и MyHomePage, ќе забележите дека и тие се проширени со различни виџети.
- StatelessWidget виџет што не зависи од ништо друго освен од конфигурацијата што ја има. Овој виџет вообичаено никогаш не се менува низ животниот циклус на апликацијата, заради ова мислете на него како на статички.
- StatefullWidget е виџет зависи од надворешните својства што се менуваат за време на употребата на апликацијата. Замислете пример некој Text виџет што повлекува податоци од сервер. Првично e празен текст, но потоа надворешен фактор (завршување на повикот до серверот) го менува за да прикаже нешто. Овој виџет е динамичен.
- State е класа која ги чува сите важни функции и променливи што се користат за генерирање на динамички виџетите/карактеристиките на виџетитет во build методот. Поврзани се со StatefullWidget.
„Stateless“ виџетите се полесни за да ги процесира мобилниот уред, но не се менуваат. „Statefull“ можат да се променат, но користете ги паметно и единствено кога ви се потребни зошто бараат поголема моќ за процесирање.
Во случај на демо апликациајта, можете да видите дека MyApp виџетот нема посебна модификација на виџетот во неговиот build-методот па нема потреба од состојба (State). Но, MyHomePage има бројач што може да се ажурира кога корисникот ќе кликне на копчето. За да ја зачуваме оваа вредност и да ја ажурираме динамички во виџетот што ја прикажува, потребна е состојба (state).
Својства (properties) на виџетите
Една од работите што навистина ми се допаѓаат кај Flutter, е колку добро виџетите се документирани. На пример да го разгледаме Text-виџетот. Ако сакаме да ги знаеме сите својства што можеме да ги поставиме на него, најлесно е Ctrl + Кликнете на него. Ова ќе нè одведе до сорсот на виџетот, каде ќе видиме листа на својства што може да се користат, со описни имиња, па дури и со опис на текст, за да нè известат што прават.
Дел од сорс на Text-виџетот
Овде, може да видиме дека има неколку својства што можат да се постават. Главното, data, е вусшност String што треба да се прикаже. Тоа е неопходno (ова може да го видиме од assert и од тоа што својството(property) не е во списокот на дополнителни својства). Останатите се по незадолжителни својства, пример: text alignment, style, overflow и max lines кои може да се дефинираат за виџетот.
Можеме да истражуваме и повеќе. Ctrl + Кликнете на style, а потоа кликнете на нејзината класа наречена TextStyle, го добиваме ова:
Properties на TextStyle
Сега знаеме како да ги промениме бојата, „font weight“, големината и декорацијата на „Text“-виџетот, и може да видиме дека се незадолжителни. Одлично, но како ќе ги составиме овие? Многу лесно:
Text(
'You have pushed the button this many times:',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 12
),
)
Вака го додаваме TextStyle на „style“ на Text-виџетот. Како што гледате, TextStyle има својства, што можеме да ги инстанцираме, со константи или други виџети.
Ова треба доволно да може да започнете да си играте со виџети. На пример да додадете повеќе Text полиња на текст полето во демо апликацијата со различни стилови, обидете се да ги ставите во колона Column, па дури и ред (Row)!
Во следниот дел, ќе ја погледнеме бизнис логиката на апликацијата, кодот што контролира што се случува на екранот и супер кул тема за реактивно програмирање! Ако сакате да видите Flutter во акција, преземете ja AirCare – апликацијата што визуелизира загадување на воздухот околу вас!
Стани премиум член и доби пристап до сите содржини, специјален попуст на над 2.200 производи во ИТ маркет, верификуван профил и можност за огласување на ИТ Огласник. Плус ќе го поддржиш медиумот кој го градиме цели 16 години!
Доколку веќе имаш премиум членство, најави се тука.
Beyond Basics 
Emit Knowledge 
