Ako nastaviť flutter a vytvoriť webovú aplikáciu Hello World v systéme Linux

Flutter je rámec pre vývoj aplikácií, ktorý je možné použiť na vývoj multiplatformových aplikácií bežiacich na natívnom kóde po ich zostavení alebo vytvorení. Flutter, ktorý vyvinula spoločnosť Google, vám umožňuje vytvárať rýchle prototypy v krátkom čase a tiež vám umožňuje vytvárať plnohodnotné aplikácie, ktoré využívajú API špecifické pre jednotlivé platformy. Pomocou Flutteru môžete vytvárať krásne vyzerajúce aplikácie pre mobilné zariadenia, operačné systémy pre počítače a webové prehliadače pomocou oficiálnych widgetov pre návrh materiálov. Tento článok bude pojednávať o inštalácii Flutter a vytvorení nového projektu pre vývoj webovej aplikácie. Flutter používa „Dart“ ako hlavný programovací jazyk na písanie aplikácií.

Nainštalujte Flutter na Linux

Flutter môžete v systéme Linux nainštalovať dvoma spôsobmi. Prvá metóda je celkom jednoduchá, všetko, čo musíte urobiť, je spustiť jednoduchý príkaz na inštaláciu Flutteru z obchodu snap.

$ sudo snap nainštalovať flutter --classic

Druhá metóda spočíva v stiahnutí flutterového úložiska z GitHubu. Spustite nasledujúce príkazy za sebou a manuálne nainštalujte Flutter:

$ sudo apt nainštalovať git
$ git klon https: // github.com / flutter / flutter.git -b stable --depth 1 --no-single-branch

Upozorňujeme, že spustením vyššie uvedeného príkazu získate požadované súbory z oficiálneho úložiska Flutter vrátane spustiteľných binárnych súborov. Tieto binárne súbory budete môcť spustiť z priečinka „bin“. Tieto spustiteľné súbory však nebudú pridané do vašej systémovej premennej PATH a nebudete ich môcť spustiť odkiaľkoľvek, pokiaľ ich do premennej PATH nepridáte manuálne. Postupujte podľa pokynov uvedených nižšie.

Otvorené ".súbor bashrc ”umiestnený vo vašom domovskom priečinku pomocou obľúbeného textového editora:

$ nano “$ HOME /.bashrc “

Pridajte nasledujúci riadok do dolnej časti súboru a opatrne vložte struna.

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

Napríklad, ak ste si stiahli úložisko Flutter v priečinku „Downloads“, budete musieť pridať nasledujúci riadok:

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

Po dokončení súbor uložte. Obnoviť ".súbor bashrc ”spustením príkazu nižšie:

$ zdroj „$ HOME /.bashrc “

Ak chcete skontrolovať, či bol priečinok „bin“ spoločnosti Flutter pridaný do cesty, spustite nasledujúci príkaz:

$ echo $ PATH

Mali by ste dostať nejaký výstup ako tento:

/ usr / local / sbin: / usr / local / bin: / usr / sbin: / usr / bin: / sbin: / bin: / usr / hry: / usr / local / hry: / snap / bin: / home / nit / Súbory na stiahnutie / flutter / bin

Všimnite si prítomnosť kľúčového slova „flutter“ a úplnú cestu, ktorá zobrazuje priečinok „bin“ v adresári „flutter“.

Ak chcete skontrolovať, či je možné príkaz „flutter“ spustiť z ľubovoľnej cesty, použite nasledujúci príkaz:

$ ktoré sa trepotajú

Mali by ste dostať nejaký výstup ako tento:

/ home / nit / Súbory na stiahnutie / flutter / bin / flutter

Pamätajte, že jazyk „Dart“, ktorý je potrebný na písanie aplikácií Flutter, je dodávaný so súbormi Flutter stiahnutými z úložiska git alebo z balíka snap. Spustením nasledujúceho príkazu skontrolujte chýbajúce závislosti potrebné na spustenie flutteru:

$ flutterový lekár

Niektoré požadované súbory sa môžu začať sťahovať, aby sa dokončilo nastavenie flutteru. Ak ešte nemáte nainštalovanú súpravu Android SDK, na výstupe sa zobrazí správa, ktorá vás prevedie inštaláciou.

Ak chcete vyvíjať aplikácie pre Android pomocou Flutteru, kliknite na odkazy viditeľné vo výstupe terminálu a podľa príslušných krokov nainštalujte Android SDK.

Tento výukový program sa zameriava na vytváranie webových aplikácií pomocou Flutteru. Ak chcete povoliť podporu pre vytváranie webových aplikácií, spustite postupne nasledujúce príkazy:

$ flutterový kanál beta
$ flutter upgrade
$ flutter config --enable-web

Ak chcete skontrolovať, či bola podpora webových aplikácií skutočne povolená, spustite nasledujúci príkaz:

$ flutterové zariadenia

Mali by ste dostať nejaký výstup ako tento:

2 pripojené zariadenia:
Webový server (web) • webový server • web-javascript • nástroje flutteru
Chrome (web) • chróm • web-javascript • Google Chrome 87.0.4280.66

Ak ste doteraz postupovali podľa pokynov, program Flutter by mal byť teraz vo vašom systéme správne nainštalovaný a pripravený na vytváranie niektorých webových aplikácií.

Vytvorte nový projekt flutteru

Ak chcete vytvoriť nový projekt webových aplikácií „HelloWorld“ pomocou aplikácie Flutter, spustite príkazy uvedené nižšie:

$ flutter vytvorí helloworld
$ cd helloworld

Ak chcete otestovať svoj novovytvorený projekt, spustite príkaz:

$ flutter run -d chróm

Mali by ste vidieť ukážku webovej aplikácie Flutter takto:

Webové aplikácie Flutter môžete ladiť pomocou vývojových nástrojov zabudovaných do prehliadača Chrome.

Upravte svoj projekt

Demo projekt, ktorý ste vytvorili vyššie, obsahuje „hlavný“.dart “súbor umiestnený v priečinku„ lib “. Kód obsiahnutý v tomto „hlavnom.dart ”súbor je veľmi dobre komentovaný a dá sa ľahko pochopiť. Navrhujem, aby ste si kód prečítali aspoň raz, aby ste pochopili základnú štruktúru aplikácie Flutter.

Flutter podporuje funkciu „hot reload“, ktorá vám umožní rýchlo obnoviť aplikáciu bez opätovného spustenia, aby ste videli zmeny. Skúste zmeniť názov aplikácie z „Flutter Demo Home Page“ na „Hello World !!" v hlavnom.šípkový “súbor. Po dokončení stlačte zadajte terminál na obnovenie stavu aplikácie bez jej opätovného spustenia.

Zostavte si svoju flutterovú aplikáciu

Ak chcete vytvoriť webovú aplikáciu Flutter, použite nižšie uvedený príkaz z adresára projektu:

$ flutter build web

Po dokončení procesu vytvárania by ste mali mať v priečinku projektu nový priečinok umiestnený na ceste „build / web“. Tu nájdete všetky potrebné “.html “,„.js “a„.css ”súbory potrebné na online obsluhu projektu. Nájdete tiež rôzne súbory aktív použité v projekte.

Užitočné zdroje

Ak sa chcete dozvedieť viac o vývoji webových aplikácií pomocou Flutteru, pozrite si jeho oficiálnu dokumentáciu. Môžete sa obrátiť na oficiálnu dokumentáciu pre jazyk Dart, aby ste lepšie pochopili aplikácie Flutter. Flutter prichádza s hromadou oficiálnych balíkov a balíčkov tretích strán, ktoré môžete použiť na rýchly vývoj aplikácií. Tieto balíčky nájdete tu. Widgety Flutter pre materiálový dizajn môžete použiť vo svojich webových aplikáciách. Dokumentáciu k týmto widgetom nájdete v oficiálnej dokumentácii flutteru. Tieto widgety môžete tiež cítiť prehliadaním pracovných ukážok webových komponentov materiálového dizajnu.

Záver

Flutter je vo vývoji už nejaký čas a rastie ako rámec pre vývoj multiplatformových aplikácií „write once deploy anywhere“. Jeho prijatie a popularita nemusí byť taká vysoká ako u iných takýchto rámcov, ale poskytuje stabilné a robustné API na vývoj aplikácií pre rôzne platformy.