Flutter Tutorial Част 1: Създайте Flutter приложение от нулата

Научете как да започнете да създавате приложение Flutter, първата част от поредицата за фъфлещи уроци.

Част 1: Как да се изгради приложение за трептене от нулата

В тази поредица от уроци ще ви насочим стъпка по стъпка как да създадете мобилно приложение за електронна търговия с помощта на трептене. Мобилното приложение ще бъде приложение с отворен код за платформата Aviacommerce. Урокът ще се съсредоточи върху това приложение, за да представи важните концепции на рамката на трептене.

Този урок е първата част от поредицата за трептене: -

  1. Как да изградим приложение за трептене от нулата
  2. Как да разположите приложението в трептене (скоро)
  3. Как да организираме данни в трептене (скоро)
  4. Данните за изброяване в трептене (скоро)

Още актуализации на съдържанието, докато вървим напред.

Блогът ще обясни как да създадете оформления и да въведе състояние стъпка по стъпка. За да се потопите направо в кода, целият проект е достъпен в Github под чадъра на AviaCommerce. Чувствайте се свободни да го разклоните и да си поиграете.

Ние от AviaCommerce активно търсим нови рамки, които предефинират разработването на софтуер. Екипът ни следи отблизо дейността във Flutter от първата му бета версия.

Най-накрая Google обяви Flutter 1.0, първата стабилна версия на инструментариите за потребителски интерфейс за създаване на красиви, родни изживявания за iOS и Android от една кодова база.

Flutter разполага с изключителна документация за създаване на среда за развитие. Следвайте това официално ръководство за инсталиране, за да продължите.

След като инсталацията приключи, можем да започнем с нов тестов проект. Предпочитам Android Studio, тъй като предлага цялостно, интегрирано IDE изживяване за Flutter. Android Studio ще изисква редактор за Dart.

Стартирайте Android Studio. Можете да видите опция за инициализиране на нов проект, базиран на Flutter.

Изберете Flutter Application от списъка с конфигурации.

Помислете за модно име за първото си приложение Flutter. Или просто отидете с таймер, ако сте лоши в назоваването на неща като мен .

Последна стъпка в процеса, диалоговият прозорец ще ви поиска името на пакета за приложения.

След тази стъпка Flutter SDK ще създаде начална структура на директория за приложението. Цялото действие отива вътре в папката lib, а main.dart е отправна точка в изпълнението на приложението.

В Flutter всичко е джаджа. Изображения, икони и текст в приложението Flutter са всички джаджи. Дори елементите на оформление като редовете, колоните и решетките, които подреждат, ограничават и подравняват други джунджурии, са самите приспособления.

Добрият момент е, че Flutter SDK създава интерактивна джаджа в основата на приложението тук. За да направите нещата малко по-лесни, нека премахнете това и започнете с чисто минимален дизайн (Hello World!).

Вашият файл main.dart трябва да изглежда така:

Пускането на емулатора на Android го отваря с текстови приспособления, приветстващи „Здравей свят!“

Забележете джаджа на фокус тук. Ще се опитаме да модифицираме тялото на MaterialApp, за да изведем интерфейса такъв, какъвто искаме да бъде. Оригиналната версия е това, което е показано по-долу.

Елементите на подредбата (джаджите) в Flutter могат да бъдат категоризирани в два вида въз основа на това дали те разполагат с една джаджа или могат да държат масив от джаджи. Контейнерът, подложките принадлежат към първия, докато ред, колона и т.н. попадат под втория.

Въведете оформление на редове с три деца от текстови джаджи.

Преди да продължим и стилизираме компонентите, препоръчително е да създадем нова джаджа, която да се справи със стила, така че да следваме принципа на DRY.

Заменете трите деца с персонализирана джаджа, дефинирана по-късно в същия файл. Файлът main.dart сега става

Таймерът изглежда малко неприятен в момента. Не съм много добър в потребителските интерфейси, но нека опитаме. Опаковайте текстовата джаджа във вътрешността на контейнер и украсете контейнера с цвят на фона, заедно с подплънки, за да отделите елементи.

Освен това поставете бутон, за да извършите действията върху таймера под трите стилизирани текстови джаджа. Модифицираният код изглежда така.

Тук идва най-неразделната част от приложението - състояние. Държавата ще задържи текущата стойност на таймера и дали таймерът е активен (работи) или не. Измислих клас TimerState, който е отговорен за поддържането на състоянието и също така се грижи за изграждането на дървото на джаджите.

Натискането на превключвателите на бутоните еActive променлива.

Dart се предлага с елегантен модул за асинхронни операции. Можем да използваме неговия клас Таймер, за да ни помогне да увеличите секундите. Модифицираният TimerAppState е описан по-долу. Забележете, че реконструирахме клас Timer на TimerApp, за да предотвратим неяснотата с класа Timer в модула за асинхронизация.

Приложението е напълно функционално сега. Пълният код на main.dart можете да намерите тук. Надявам се да изчисти основите на Flutter Framework.

ФЛУТЕРФОРУМ: МЯСТО, НА КОЕТО ФЛАЙТЪР ДЕВ ХАНГУТ

FlutterForum е място, където разработчиците на плаващите се мотаят и участват в разговори и въпроси.

посетете https://flutterforum.co

Ако сте харесали този урок, моля, кликнете върху бутона и споделете, за да помогнете на другите да го намерят! Чувствайте се свободни да оставите коментар по-долу.