Како да започнете со Flutter – дел 1

Ова е гостински текст на Горјан Јовановски првично објавен на неговиот блог на Medium. Горјан е креатор на апликацијата Мој Воздух (AirCare), активист за заштита на природата, TED-говорник и Team Lead во Booking.com.


Ова е приказна/прирачник за тоа како започнав да работам со Flutter. Ова никако не е широк туторијал, бидејќи има многу начини да се направи ова.

Во 2014, напишав Android апликација наречена AirCare, која користи отворени податоци за визуелизација на загадувањето на воздухот во Македонија. Оттогаш, апликацијата се прошири во 7 држави, има над 100 000 корисници.

Пред неколку месеци, размислував како да овозможам моите Android и iOS апликации да имаат исти функционалности најбрзо што може. Дојдов до заклучок дека треба да користам јазик што ќе ми го овозможи ова. Flutter

Во овој серијал текстови:

Прв дел: IDE Setup (овој текст)
Втор дел: Виџети (доаѓа наскоро)

Што е Flutter?

Технички Flutter не е програмски јазик. Flutter е UI toolkit од направен од Google со цел да им се помогне на девелоперите да напишат еден код кој потоа може да се издава на различни платформи. Користи „Dart“, јазик со C-синтакса (мене ми личи повеќе на JavaScript) со кој се контролира бизнис логиката.

Ако сте слушнале за React native, ова е сличен концепт, но направен од Google, со неколку разлики што според мене го прават подобар за користење. Генерално, двата пристапи користат реактивно програмирање (reactive programming).

Во моментов Flutter може да се користи за Android и iOS. Можноста Flutter да генерира и веб-решенија од вашиот код е во изработка, но сè уште е во фаза на технички преглед и не е подготвена за продукција. Напредокот за оваа можност може да го следите тука. Кога ќе биде достапна и оваа можност кодот ќе може да го „објавувате“ (deploy) на 3 различни платформи.

Што треба да запомните:

  • Flutter ги контролира UI и визуелниот изглед на апликациајта
  • Dart ја контролира бизнис логиката
  • Flutter и Dart користат реактивно програмирање
  • Може да користите еден код за издавање на Android и iOS, веб решение доаѓа наскоро…

Почеток

Еве ги основните чекори кои јас ги следев кога започнував да го користам Flutter

  1. Преземање на IDE
    Flutter работи одлично со Android Studio или Visual Studio Cоde. Во мојот случај веќе користев Android Studio, па продолжив со тоа.
  2. Инсталација на Flutter SDK
    Сите инструкции за инсталација на Flutter на Windows, Mac и Linux може да пронајдете тука.
  3. Инсталација на IDE плагини
    И Android Studio и VS Code имаат плагини кои треба да ги инсталирате. За Android Studio отворете (Preferences > Plugins на macOS, File > Settings > Plugins на Windows и Linux), одберете Browse repositories, па одберете го Flutter плагионот и Install. По ова рестартирајте го едиторот.

Тестирање на Flutter демо апликацијата

Откако го подгвивте Android Studio, да ја направиме и тестираме нашата прва Flutter апликација. Од File > New > New Flutter Project… ќе дојдете до следниот прозорец:

Засега, игнорирајте ги другите опции и одберете Flutter Application. На следниот екран можете да ги конфигурирате стандардните опции за името на проектот (ова ќе биде последниот дел од името на вашиот пакет) и патеките. Откако ќе кликнете на „Next“, се отвора следниот екран:

Изборот на име на пакет е како и за нормалen развој на апликациja. Поважните делови се секциите за AndroidX и изборот на програмски јазици на платформата.

  • AndroidX е следната верзија на Android Support Library и многу плагини што подоцна ќе ги користите веќе ја имаат оваа зависност (dependency), па селектирајте го ова поле.
  • Изборот на програмски јазици за платформата му кажува на „волшебникот“ во кој јазик сакате апликација да се „изгради“. Стандардно, за Android се користи Java, за iOS се користи Swift. Ако сакате да работите во Kotlin, тогаш можете да го одберете ова, но не препорачувам употреба на Objective-C за iOS, бидејќи многу плагини бараат Swift.

По ова одберете Finish и готови сте!

Android Studio распоред

Android Studio го генерира основниот код за вас во Flutter што ќе ви овозможи веднаш да започнете со уредување. Според мене, „чепкање“ на нешто што веќе функционира е најдобриот начин да научите нешто ново.

Ќе ги видите трите најважни делови  на UI, со исклучок на прозорецот со код.

  • # 1: Ова е Project Explorer, делот на едиторот каде што може да ги видите сите фајлови креирани од Flutter. Некои важни фајлови и фолдери  што треба да се истакнат се:
    android: Фолдер во кој е сместен целиот код генериран за Android
    ios: Фолдер во кој е сместен целиот код генериран за iOS
    lib: Фолдер каде што се чува целиот Dart код што ќе го напишете
    pubspec.yaml: Фајл за конфигурација за вашиот проект. Тука ја дефинирате верзијата на апликацијата, локации на „asset“ и плагини што сакате да ги импортирате во вашиот проект.
  • # 2: Ова е Device Selector, тука можете да изберете на кој уред сакате да ја пуштите апликацијата. Ако поврзете физички уред со вашата машина, тој ќе се појави овде. Во спротивно можете да конфигурирате Android Simulator / iOS Emulator.
  • #3: Ова е Device Controller, тука ја стартувате, запирате, повторно вчитувате и рестартирате апликациајта на одбраниот уред во Device Selector

Откако ќе приклучите физички уред, или ќе конфигурирате виртуелен уред, одберете го од Device Selector, и притиснете на зеленото „Play“-копче на Device Controller.

Ако се е во ред, само што ја направивте својата прва Flutter апликација!

1 коментар на “Како да започнете со Flutter – дел 1

Коментирај

Вашата адреса за е-пошта нема да биде објавена.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Слични статии