Как да настроите Flutter и да създадете уеб приложение Hello World в Linux

Flutter е рамка за разработка на приложения, която може да се използва за разработване на междуплатформени приложения, работещи на собствен код, след компилиране или изграждане. Разработен от Google, Flutter ви позволява да създавате бързи прототипи за кратко време, както и да създавате пълноценни приложения, които използват специфични за платформата API. Използвайки Flutter, можете да създавате красиво изглеждащи приложения за мобилни устройства, настолни операционни системи и уеб браузъри, като използвате официални джаджи за дизайн на материали. Тази статия ще обсъди инсталирането на Flutter и създаването на нов проект за разработване на уеб приложение. Flutter използва „Dart“ като основен език за програмиране за писане на приложения.

Инсталирайте Flutter на Linux

Можете да инсталирате Flutter в Linux по два метода. Първият метод е доста ясен, всичко, което трябва да направите, е да изпълните проста команда, за да инсталирате Flutter от snap store.

$ sudo snap install flutter --classic

Вторият метод включва изтегляне на хранилището за трептене от GitHub. Изпълнете последователно следните команди, за да инсталирате ръчно Flutter:

$ sudo apt install git
$ git clone https: // github.com / flutter / flutter.git -b стабилен - дълбочина 1 - без единичен клон

Имайте предвид, че изпълнението на горната команда ще ви осигури необходимите файлове от официалното хранилище на Flutter, включително изпълними двоични файлове. Ще можете да изпълните тези двоични файлове от папката “bin”. Тези изпълними файлове обаче няма да бъдат добавени към вашата системна променлива PATH и няма да можете да ги стартирате от никъде, освен ако не ги добавите ръчно към променливата PATH. За да направите това, следвайте стъпките по-долу.

Отваряне “.bashrc ”, намиращ се във вашата домашна папка с помощта на вашия любим текстов редактор:

$ nano “$ НАЧАЛО /.bashrc ”

Добавете следния ред в долната част на файла, като внимателно замените низ.

export PATH = "$ PATH:/ пърхане / кошче "

Например, ако сте изтеглили хранилището на Flutter в папката „Изтегляния“, ще трябва да добавите следния ред:

export PATH = "$ PATH: $ HOME / Downloads / flutter / bin"

Запазете файла, след като сте готови. Опресняване “.bashrc ”, като изпълните командата по-долу:

$ източник “$ HOME /.bashrc ”

За да проверите дали папката „bin“ на Flutter е добавена към пътя, изпълнете командата по-долу:

$ echo $ PATH

Трябва да получите някои резултати като тази:

/ usr / local / sbin: / usr / local / bin: / usr / sbin: / usr / bin: / sbin: / bin: / usr / games: / usr / local / games: / snap / bin: / home / nit / Downloads / flutter / bin

Забележете наличието на ключовата дума „flutter“ и пълния път, който показва папката „bin“ в директорията „flutter“.

За да проверите дали командата „flutter“ може да се изпълни от който и да е път, използвайте командата по-долу:

$ които пърхат

Трябва да получите някои резултати като тази:

/ home / nit / Downloads / flutter / bin / flutter

Имайте предвид, че езикът „Dart“, който е необходим за писане на приложенията на Flutter, се доставя с файлове на Flutter, изтеглени от хранилището на git или от пакета. Изпълнете следната команда, за да проверите липсващите зависимости, необходими за стартиране на Flutter:

$ трептене на лекар

Някои необходими файлове могат да започнат да се изтеглят, за да завършат настройката на Flutter. Ако все още не сте инсталирали Android SDK, в изхода ще се покаже съобщение, което да ви води през инсталацията.

Ако искате да разработите приложения за Android с помощта на Flutter, щракнете върху връзките, видими в изхода на терминала, и следвайте съответните стъпки за инсталиране на Android SDK.

Този урок се фокусира върху изграждането на уеб приложения с помощта на Flutter. За да активирате поддръжка за създаване на уеб приложения, изпълнете последователно следните команди:

$ flutter channel beta
надстройка на $ flutter
$ flutter config --enable-web

За да проверите дали поддръжката на уеб приложения наистина е активирана, изпълнете командата по-долу:

$ flutter устройства

Трябва да получите някои резултати като тази:

2 свързани устройства:
Уеб сървър (уеб) • уеб-сървър • уеб-javascript • Flutter Tools
Chrome (уеб) • хром • уеб-javascript • Google Chrome 87.0.4280.66

Ако досега сте изпълнявали правилно стъпките, Flutter трябва да бъде правилно инсталиран на вашата система, готов да създаде някои уеб приложения.

Създайте нов проект Flutter

За да създадете нов проект за уеб приложение „HelloWorld“ с помощта на Flutter, изпълнете командите, споменати по-долу:

$ flutter създава helloworld
$ cd helloworld

За да тествате новосъздадения си проект, изпълнете командата:

$ flutter run -d хром

Трябва да видите демонстрация на уеб приложение на Flutter като тази:

Можете да отстранявате грешки в уеб приложенията на Flutter, като използвате инструменти за разработка, вградени в Chrome.

Променете вашия проект

Демо проектът, който създадохте по-горе, съдържа „main.dart “, намиращ се в папката„ lib “. Код, съдържащ се в този „основен.dart ”файл се коментира много добре и може да бъде разбран доста лесно. Бих ви предложил да преминете през кода поне веднъж, за да разберете основната структура на приложението на Flutter.

Flutter поддържа „горещо презареждане“, което ви позволява бързо да опресните приложението си, без да го рестартирате, за да видите промените. Опитайте да промените заглавието на приложението от „Начална страница на Flutter Demo“ на „Hello World !!“В„ main.дартс ”файл. След като приключите, натиснете ключ в терминала, за да обновите състоянието на приложението, без да го рестартирате.

Създайте своя Flutter App

За да създадете вашето уеб приложение Flutter, използвайте командата, посочена по-долу от директорията на вашия проект:

$ flutter изграждане на мрежа

След като процесът на изграждане приключи, трябва да имате нова папка в директорията на вашия проект, намираща се на пътя „build / web“. Тук ще намерите всичко необходимо “.html ”,“.js “и„.css ”файлове, необходими за обслужване на проекта онлайн. Ще намерите и различни файлове с активи, използвани в проекта.

Полезни ресурси

За да научите повече за разработването на уеб приложения с помощта на Flutter, вижте официалната му документация. Можете да се обърнете към официалната документация за езика Dart, за да получите по-добро разбиране на приложенията на Flutter. Flutter се предлага с много официални и чужди пакети, които можете да използвате за бързо разработване на приложения. Можете да намерите тези пакети на разположение тук. Можете да използвате приспособления за дизайн на материал Flutter във вашите уеб приложения. Можете да намерите документация за тези джаджи в официалната документация на Flutter. Можете също така да усетите тези джаджи, като разгледате работни демонстрации на уеб компоненти за материален дизайн.

Заключение

Flutter се разработва от доста време и се разраства като рамка за разработване на крос-платформени приложения „пиши веднъж внедряване навсякъде“. Неговото приемане и популярност може да не са толкова високи, колкото другите подобни рамки, но предоставя стабилен и стабилен API за разработване на междуплатформени приложения.