Preskočiť na obsah
flutter.sk
← Späť na prehľad

Začíname s Flutterom: Časť 1

Flutter dnes dokáže z jedného projektu vytvoriť aplikáciu pre mobil, web aj desktop. V tejto prvej časti si bez marketingových skratiek vysvetlíme, čo Flutter je, odkiaľ sa vzal a ako si pripravíte počítač na prvú aplikáciu.

Cieľ tejto časti: porozumieť základnej myšlienke Flutter SDK, nainštalovať nástroje, spustiť flutter doctor a vytvoriť skúšobný projekt.

Čo je Flutter

Flutter je open source UI framework od Googlu na tvorbu aplikácií pre Android, iOS, web, Windows, macOS a Linux. Rozhranie aj väčšinu aplikačnej logiky píšete v jazyku Dart a zdieľate ich medzi platformami.

To neznamená, že každý projekt zdieľa úplne všetko. Fotoaparát, notifikácie, platby alebo špecifické správanie systému môžu potrebovať platformový kód. Flutter však umožňuje, aby spoločná časť aplikácie zostala na jednom mieste.

Tri veci, ktoré si zapamätajte

  • Všetko skladáte z widgetov. Text, tlačidlo, odsadenie aj celá obrazovka sú malé stavebné bloky.
  • Flutter vykresľuje vlastné rozhranie. Neobalí každý prvok do natívneho Android alebo iOS ovládacieho prvku, ale vytvorí scénu a tú prevedie na pixely.
  • Vývoj je rýchly. Stateful hot reload zobrazí väčšinu zmien v bežiacej debug aplikácii bez úplného reštartu.

Jednoduchá mentálna pomôcka: Flutter je framework a sada nástrojov. Dart je jazyk, runtime a kompilátorová platforma, na ktorej Flutter stojí.

Ako sa kód zmení na pixely

Vaša Dart aplikácia skladá widgety. Flutter framework z nich vytvorí scénu, engine ju vykreslí a platformový embedder zabezpečí okno, vstup, prístupnosť aj spojenie s operačným systémom. Vďaka tomuto vrstveniu má Flutter kontrolu nad vzhľadom, no stále vie komunikovať s natívnymi službami zariadenia.

Presnosť namiesto mýtu: Impeller dnes vykresľuje podporované natívne platformy, ale nie je správne tvrdiť, že všade úplne nahradil Skiu. Dostupnosť renderera závisí od platformy a jej verzie.

Ako Flutter vznikol

Príbeh sa začal v roku 2014 ako experiment Googlu s kódovým názvom Sky. Eric Seidel ho 29. apríla 2015 verejne predstavil na Dart Developer Summite v prednáške „Sky: An Experiment Writing Dart for Mobile". Sky skúmal, ako rýchlo a plynulo sa dá mobilné rozhranie vytvárať priamo v Darte.

Aj vizuálna identita sa postupne vyvíjala. Najstarší samostatný súbor loga, ktorý sme našli vo verziovanej histórii oficiálneho webu Flutter, pribudol 1. augusta 2016. Netvrdíme, že išlo o úplne prvé logo Flutteru. Vieme však doložiť, že práve tento obrázok vtedy používal oficiálny web.

Porovnanie loga Flutteru používaného na oficiálnom webe v auguste 2016 so súčasným oficiálnym logom.

Obrázok: logo z histórie oficiálneho webu Flutter v auguste 2016 a súčasné oficiálne logo.

Míľniky bez omáčky

  1. 2014: vzniká experiment Sky.
  2. 2015: Sky sa prvýkrát verejne ukazuje vývojárom.
  3. 2017: Google na I/O predstavuje Flutter pod dnešným názvom a vydáva skorú alpha verziu.
  4. 4. december 2018: Flutter 1.0 prináša prvú stabilnú verziu pre iOS a Android.
  5. 2021: Flutter 2 stabilizuje podporu webu.
  6. 2022: Flutter 3 dopĺňa stabilnú podporu Windows, macOS a Linuxu.
  7. Dnes: Flutter je produkčný multiplatformový framework. Aktuálna dokumentácia v čase úpravy článku pokrýva Flutter 3.44.7.
Oficiálna časová os Flutteru od experimentálnej éry cez Flutter 1.0, web a desktop až po produkčnú éru.

Oficiálna časová os Flutter tímu. Na menšom displeji si obrázok otvorte v plnej veľkosti.

Prečo Flutter používa Dart

Dart pokrýva dve veľmi rozdielne potreby. Počas vývoja podporuje JIT a inkrementálnu kompiláciu, vďaka čomu funguje hot reload. Pri vydaní natívnej aplikácie sa kód kompiluje AOT do strojového kódu. Webový cieľ sa kompiluje do JavaScriptu alebo WebAssembly.

Ak poznáte TypeScript, Javu, C# alebo Kotlin, syntax vám bude povedomá. Nemusíte sa však učiť celý jazyk vopred. V ďalšej časti seriálu prejdeme presne tú časť Dartu, ktorú potrebujete na prvé Flutter obrazovky.

Hot reload funguje v debug režime. Zvyčajne zachová stav aplikácie, ale znovu nespustí main() ani initState(). Ak potrebujete znovu inicializovať aplikáciu, použite hot restart.

Pripravíme si prostredie

Najprv si vyberte jediný cieľ, na ktorom chcete prvú aplikáciu spustiť. Pre najrýchlejší začiatok stačí Chrome. Android emulátor, iPhone aj desktop môžete doplniť neskôr.

Najjednoduchšia cesta: Visual Studio Code

Oficiálna dokumentácia odporúča rýchlu inštaláciu cez VS Code alebo iný editor založený na Code OSS. Postup je krátky:

  1. Nainštalujte Git a Visual Studio Code.
  2. Vo VS Code nainštalujte rozšírenie Flutter. Rozšírenie Dart sa pridá automaticky.
  3. Otvorte paletu príkazov cez Ctrl+Shift+P alebo Cmd+Shift+P.
  4. Vyberte Flutter: New Project. Ak SDK ešte nemáte, zvoľte Download SDK.
  5. Uložte SDK do zapisovateľnej cesty bez medzier a špeciálnych znakov, napríklad C:\Users\Jano\develop\flutter alebo ~/develop/flutter.
  6. Po dokončení zatvorte a znovu otvorte terminál aj editor.

Ak chcete SDK nainštalovať ručne

Windows

Stiahnite stabilný ZIP z archívu Flutter SDK, rozbaľte ho napríklad do %USERPROFILE%\develop a pridajte %USERPROFILE%\develop\flutter\bin do používateľskej premennej Path. Nepoužívajte chránený priečinok Program Files.

flutter --version
dart --version

macOS

Vyberte balík pre Apple Silicon alebo Intel, rozbaľte ho do ~/develop a pridajte ~/develop/flutter/bin do PATH. Pre iOS vývoj budete potrebovať plný Xcode; nástroje príkazového riadku nainštalujete takto:

xcode-select --install

Linux

Stiahnite tar.xz balík, rozbaľte ho do ~/develop a pridajte ~/develop/flutter/bin do PATH. Ak chcete zostavovať linuxové desktopové aplikácie na Ubuntu alebo Debiane, nainštalujte aj aktuálne systémové závislosti:

sudo apt-get update -y
sudo apt-get install -y clang cmake ninja-build pkg-config libgtk-3-dev libstdc++-12-dev

Poznámka: staršie návody uvádzali balík libglu1-mesa. Riaďte sa aktuálnym zoznamom v oficiálnej dokumentácii pre svoju distribúciu.

Android a iOS sú samostatné ciele

  • Android: nainštalujte Android Studio, Android SDK a emulátor. Licencie potom potvrďte príkazom flutter doctor --android-licenses.
  • iOS: potrebujete macOS, Xcode a pri distribúcii aj Apple Developer účet. Na Windows ani Linuxe iOS aplikáciu lokálne nezostavíte.

Kontrola: flutter doctor

Nech ste zvolili ktorúkoľvek cestu, na záver spustite:

flutter doctor

Príkaz skontroluje SDK, nástroje aj dostupné zariadenia. Nemusíte mať zelené úplne všetko. Potrebujete zelený Flutter a aspoň jeden cieľ, na ktorom chcete aplikáciu spustiť. Chýbajúci Xcode na Windows nie je chyba, ak práve neriešite iOS.

Ukážka terminálu s príkazom flutter doctor a zelenými kontrolami nainštalovaných nástrojov.

Ukážka úspešnej kontroly. Presný zoznam riadkov sa bude líšiť podľa systému a nainštalovaných cieľov.

Prvý test za tri príkazy

V termináli vytvorte projekt, prejdite doň a spustite ho:

flutter create ahoj_svet
cd ahoj_svet
flutter run

Ak máte viac zariadení, Flutter vám ponúkne výber. V Chrome alebo v okne aplikácie sa zobrazí ukážková obrazovka. Otvorte lib/main.dart, zmeňte niektorý text a súbor uložte. Zmena by sa mala objaviť cez hot reload.

Hotovo znamená

  • príkaz flutter --version funguje,
  • flutter doctor vidí Flutter a aspoň jeden cieľ,
  • projekt ahoj_svet sa spustí,
  • po úprave textu vidíte hot reload.

Čo nás čaká nabudúce

V druhej časti sa pustíme do Dartu. Premenné, funkcie, triedy, null safety a kolekcie si ukážeme priamo na malých príkladoch, ktoré neskôr použijeme vo Flutter widgetoch.

Zdroje a ďalšie čítanie

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.

← Späť na prehľad

Táto stránka používa cookies na zlepšenie vášho zážitku. Nastavenia