Výukový program pre flutter, časť 1: Vytvorte aplikáciu Flutter od začiatku

Naučte sa, ako začať vytvárať aplikáciu Flutter, prvú časť série tutoriálov o flutteroch.

Časť 1: Ako zostaviť flutterovú aplikáciu od začiatku

V tejto sérii tutoriálov vás krok za krokom prevedieme, ako vytvoriť mobilnú aplikáciu elektronického obchodu pomocou flutteru. Mobilná aplikácia by bola otvorenou zdrojovou aplikáciou pre platformu Aviacommerce. Výukový program by sa zameral na túto aplikáciu a predstavil dôležité koncepcie flutterového rámca.

Tento tutoriál je prvou časťou série lekcií o flutteroch: -

  1. Ako zostaviť flutter aplikáciu od nuly
  2. Ako rozmiestniť aplikáciu flutterom (čoskoro)
  3. Ako usporiadať údaje v fluttere (čoskoro)
  4. Zoznam údajov v fluttere (čoskoro)

Ďalšie informácie o obsahu, keď postupujeme ďalej.

Blog vysvetlí, ako vytvoriť rozloženie a krok za krokom predstaviť stav. Celý projekt je k dispozícii v Githube pod záštitou spoločnosti AviaCommerce, aby ste sa dostali priamo do kódu. Neváhajte a odbočte.

My v AviaCommerce aktívne hľadáme nové rámce, ktoré predefinujú vývoj softvéru. Náš tím pozorne sleduje aktivitu vo Fluttere od prvého vydania verzie beta.

Google konečne oznámil Flutter 1.0, prvé stabilné vydanie sady nástrojov používateľského rozhrania na vytváranie krásnych natívnych zážitkov pre systémy iOS a Android z jedinej kódovej základne.

Flutter má výnimočnú dokumentáciu na nastavenie vývojového prostredia. Postupujte podľa tohto oficiálneho sprievodcu inštaláciou.

Po dokončení nastavenia môžeme začať s novým testovacím projektom. Dávam prednosť aplikácii Android Studio, pretože ponúka Flutteru kompletný integrovaný IDE zážitok. Android Studio bude vyžadovať doplnok editora pre Dart.

Spustite Android Studio. Môžete vidieť možnosť inicializácie nového projektu založeného na Flutteroch.

Vyberte Flutter Application zo zoznamu konfigurácií.

Pomyslite na vymyslený názov svojej prvej aplikácie Flutter. Alebo jednoducho choďte s časovačom, ak ste zle pri pomenovávaní vecí ako ja .

Posledným krokom procesu bude dialógové okno s požiadavkou na názov balíka aplikácií.

Po tomto kroku vytvorí Flutter SDK počiatočnú štruktúru adresárov pre aplikáciu. Všetky akcie prechádzajú do priečinka lib a main.dart je východiskovým bodom pri vykonávaní aplikácie.

Vo Flutter je všetko miniaplikácia. Obrázky, ikony a text v aplikácii Flutter sú všetky widgety. Dokonca aj prvky rozloženia, ako sú riadky, stĺpce a mriežky, ktoré usporiadajú, obmedzujú a zarovnávajú ďalšie widgety, sú samotné widgety.

Dobré je, že Flutter SDK vytvára interaktívne miniaplikácie v koreňovom adresári samotnej aplikácie. Aby to bolo trochu jednoduchšie, umožňuje to odstrániť a začať s holým minimálnym dizajnom (Hello World!).

Váš súbor main.dart by mal vyzerať asi takto:

Spustenie emulátora Android ho otvorí pomocou textového widgetu s pozdravom „Ahoj svet!“

Všimnite si tu zameraný widget. Budeme sa snažiť modifikovať telo MaterialApp tak, aby rozhranie bolo také, aké chceme. Pôvodná verzia je uvedená nižšie.

Prvky rozloženia (widgety) v službe Flutter je možné vo všeobecnosti rozdeliť do dvoch typov na základe toho, či obsahujú jeden widget alebo sú schopné držať celý rad widgetov. Kontajner, čalúnenie patria prvému, zatiaľ čo riadok, stĺpec atď.

Predstavte rozloženie riadkov s tromi deťmi typu Text widgety.

Predtým, ako začneme a navrhujeme komponenty, je vhodné vytvoriť nový widget, ktorý zvládne styling tak, aby sme sa riadili princípom DRY.

Vymeňte tri deti za vlastný widget definovaný neskôr v rovnakom súbore. Súbor main.dart sa teraz stane

Časovač teraz vyzerá trochu nevýrazne. Nie som veľmi dobrý v používateľských rozhraniach, ale umožňuje vyskúšať to najlepšie. Zabalte widget Text do kontajnera a ozdobte kontajner farbou pozadia spolu s čalúnením, aby ste vyplnili prvky.

Vložte tiež tlačidlo na vykonanie akcií na časovači pod tromi štýlovými textovými miniaplikáciami. Upravený kód vyzerá takto.

Tu prichádza naj integrálnejšia súčasť aplikácie. Štát bude držať aktuálnu hodnotu časovača a to, či je časovač aktívny (beží) alebo nie. Prišiel som s triedou TimerState, ktorá je zodpovedná za udržiavanie stavu a tiež sa stará o zostavenie stromu widgetov.

Stlačením tlačidla prepnete na izaktívnu premennú.

Dart prichádza s elegantným modulom pre asynchrónne operácie. Môžeme použiť jeho časovač triedy, ktoré nám pomôžu zvyšovať sekundy. Upravený TimerAppState je opísaný nižšie. Všimnite si, že sme upravili triedu Timer na TimerApp, aby sme zabránili nejednoznačnosti s triedou Timer v asynchrónnom module.

Aplikácia je teraz plne funkčná. Celý kód main.dart nájdete tu. Dúfam, že to objasní základy rámca Flutter.

FLUTTERFORUM: MIESTO, V KTORÝCH SA ZÁVÄZOK FLUTTER DEV

FlutterForum je miesto, kde sa vývojári flutterov stretávajú a zapájajú sa do rozhovorov a otázok.

navštívte stránku https://flutterforum.co

Ak sa vám tento tutoriál páčil, kliknite na tlačidlo a zdieľajte ho, aby ste ho pomohli ostatným nájsť! Neváhajte a zanechajte komentár nižšie.