Návod na instalaci frameworku Flutter v prostředí macOS: Díl druhý (Android)

Roman Cinis
5 min readAug 18, 2019

Úvod

Tento textový a video návod (ve formátu krok za krokem), je pokračováním prvního dílu, který se nachází tady:

A pomůže hlavně úplným začátečníkům, jenž chtějí začít, například s mobilním vývojem, nainstalovat si na svůj Macintosh – sadu pro vývoj softwaru „Flutter“. Instalace SDK a IDE nijak nesouvisí s Flutterem (a programovacím jazykem Dart), takže pokud si přejete jenom to rychle zprovoznit a hodit to za hlavu – jste na správném místě. V tomto díle konkretně nastavíme Android Studio (nezbytný pro realizaci na tuto platformu) a VS Code. Návod se budu snažit udržovat v aktuálním stavu, ale nemohu to zaručit, kdyby něco – kontaktujte mě, třeba tady, v komentářích. Současně se čtením návodu můžete sledovat i video, ve kterém jsou všechny kroky návodu znázorněny, tady:

Instalace Homebrew

  • V prohlížeči si otevřete webovou stránku:
  • Tam si zkopírujte tento kód:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • Spusťte Terminál (přes LaunchPad či Spotlight), vyhledáním slova:
terminal
  • Zkopírovaný kód vložíme do terminálu a potvrdíme.
  • To bude chtít heslo, při zadávaní nebude vidět, tak že ho opatrně zadejte a potvrďte. Tím zahájíte instalaci, která chvilku potrvá.
  • My zatím můžeme stáhnout Visual Studio Code, a to tak, že ve webovém prohlížeči otevřeme stránku:
  • A zmáčkneme tlačítko „Download for Mac“.
  • Až skončí instalace Homebrew v terminálu, vložte do okna terminálu, postupně, následující příkazy:
brew install — HEAD usbmuxd
brew link usbmuxd
brew install — HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

Instalace Android Studio a VS Code

  • Chvilku to potrvá, proto mezitím můžeme spustit instalaci Android Studio (ten jsme si stáhli v minulém díle, ale pokud ho ještě nemáte – je k dispozici na adrese https://developer.android.com/studio/). Ve složce „Stahování“ spusťte soubor s názvem začínajícím na „android-studio-ide-“ a končícím na „-mac.dmg“.
  • Po dokončení rozbalovaní přetáhněte zelenou ikonku „Android Studio“ do složky „Applications“. A odtud si to taky spusťte.
  • Pokud vyleze bezpečnostní oznámení o souboru staženém z Internetu, jednoduše potvrďte tlačítkem „Otevřít“. V případě, že takovou volbu nemáte – je potřeba změnit nastavení systému takto:

Otevřte si „Předvolby systému“ (skrze Dock, nebo LaunchPad), a přesuňte se do sekce „Zabezpečení a soukromí“. V levé dolní části okna opět klikněte na ikonu zámku a autorizujte se. V sekci „Povolit aplikace stažené z“ se nově objeví další možnost, která vás informuje o zablokování instalace, popřípadě o zablokování otevírání aplikace. Teď už stačí jenom kliknout na možnost „Přesto otevřít“.

  • Pokračujeme v instalaci Android Studio – zvolte volbu „Do not import settings“ a potvrďte.
  • Povolte nebo odkmitněte sdíleni telemetrie do společnosti Google.
  • Dále pokračujte opakovaným mačkáním tlačítka „Next“ a na konec „Finish“.
  • Samotné nastavení Android Studio teď chvíli potrvá, ale vy již pravděpodobně budete mít stažené Visual Studio Code. Ze složky „Stahování“ to přetáhněte opět, do složky „Aplikace“ a odtud spusťte.
  • Pokud opět vyleze bezpečnostní oznámení o souboru staženém z Internetu, jednoduše potvrďte tlačítkem „Otevřít“.
  • Po otevření přejdete do sekce „Extenstions“ (ikonka čtyř čtverečků, pod ikonkou brouka).
  • Vyhledejte si tam „flutter“ a hned u prvního záznamu zvolte „Install“. VS Code je připraven.

Nastavení Android Studio

  • Po skončení instalace v okně Android Studio zvolte v rozpalovacím menu (dole vpravo) volbu „Plugins“.
  • Najděte plugin „Flutter“, rozklepněte ho a nainstalujte tlačítkem „Install“.
  • Potvrďte instalaci tohoto pluginu třetích stran tlačítkem „Accept“.
  • Povolte instalaci závislého pluginu (Dart) tlačítkem „Yes“.
  • Po strážení zmáčkněte tlačítko „Restart IDE“ a restart potvrďte.
  • Po restartu opět v rozpalovacím menu dole vlevo zvolte SDK Manager.
  • Zvolte tam dodatečné platformy, např. starší verze Android či verzi vašeho fyzického Android zařízení (pokud vlastníte). Potvrďte opakovaným zmačknutím tlačítka OK.
  • Akceptujte licenční ujednání a pokračujte tlačítkem „Next“.
  • Po instalaci znovu spusťte Android Studio a na konec do třetice zvolte v rozpalovacím menu volbu AVD Manager.
  • Zmáčkněte tlačítko „+ Create Virtual Device“.
  • Vyberte vyhovující zařízení a pokračujte tlačítkem „Next“.
  • Stáhněte si potřebný obraz disku systému (doporučují se verze x86, protože tu nebude nutná emulace ARM, tj. Budou tu kladeny nižší nároky na váš hardware).
  • Přepněte se do terminálu a zadejte příkaz:
flutter doctor
  • Doktor se postěžuje na špatné zdraví licenčních ujednaní, projdeme si je všechny příkazem:
flutter doctor --android-licenses
  • Každé z nich potvrdíme zadaním do terminálu písmenka:
y

A následným potvrzením přes klávesu Return, učiníme tak, dokud všechny ujednaní nebudou schválený.

  • Znovu vyslechneme doktora, abychom se ujistili, že nám pouze chybí nějaké zařízení na kterém naše aplikace můžeme testovat – zadáním do terminálu příkazu:
flutter doctor
  • Ale my virtuální zařízení máme, a nejen jedno. Zkusíme tedy iPhone – ve Spotlightu vyhledejte a spusťte skrze klíčové slovo:
simulator
  • Po naběhnutí simulátoru iPhone (5s a novější) již flutter doctor prohlásí, že naše sestava je zdravá a můžeme vyvijet na obě platformy bez problému. My ale ještě vyzkoušíme funkčnost Android emulátoru, který by měl již být stažen. Vraťte se proto do Android Studia a zmáčkněte tlačítko „Next“ a následně „Finish“.
  • Emulátor spusťte v následujícím okně trojúhelníčkem vpravo. V dalších oknech vše potvrďte tlačítky „OK“.
  • Po naběhnutí systému v emulátoru přepněte se do terminálu a spusťte testovou (předpokládám, že jste stejně jako já, neopouštěli vámi vytvořenou aplikaci ve složce „test“, pokud ano – podívejte se do prvního dílu jak testovací aplikaci v terminálu vytvořit a přesunout se do jejího umístění) aplikaci příkazem:
flutter run

Kódovaní v Visual Studio Code

Vřele doporučují tento lehký a svižný editor kódu. Můžeme vyzkoušet psání kódu v něm následovným postupem:

  • Spusťte Visual Studio Code z Docku, Spotlightu, LaunchPadu či jakýmkoliv jiným způsobem.
  • Po otevření znovu přejdete do sekce „Extenstions“ (ikonka čtyř čtverečků, pod ikonkou brouka).
  • Vyhledejte si tam plugin „dart-import“ (ten vám ušetří ruční vyhledávaní závislosti ve váších flutter výtvorech) a zvolte u něj „Install“.
  • Zvolte ikonku se dvěma složkami, hned nahoře vlevo a zmáčkněte tlačítko „Open Folder“.
  • Zvolte složku testovací aplikace, kterou jsme vytvářeli v prvním díle a zmáčkněte „Otevřít“.
  • V menu vlevo rozbalte šipku u složky „lib“ a klepnete na soubor:
main.dart
  • Vše je připraveno k testu, kromě zařízení. Zkusíme tedy opět iPhone – ve Spotlightu vyhledejte a spusťte skrze klíčové slovo:
simulator
  • Po naběhnutí simulátoru iPhone (5s a novější) ve Visual Studio Code zvolte v menu vlevo ikonku brouka a zmáčkněte zelený obrys trojúhelníka nahoře vlevo. Nebo ještě jednodušeji zmáčkněte na klávesnici tlačítko F5. Naběhne testovací aplikace.
  • Zkuste upravit kód, například změnit barvu „blue“ na „red“. A změnu uložte kombinaci kláves ⌘ S.
  • Změna se okamžitě projeví v emulátoru, je to, jak říkávali staří Slované, „killer feature“ která se jmenuje „hot reload“.

Závěr

Vše je hotové, teď už je to jenom na Vás. Svoji výtvory můžete rovnou začít dělat v souboru main.dart této testovací aplikace v libovolném IDE, jenž máte nainstalované v tuto chvíli.

Post Scriptum

V budoucnu mám v plánu nahrávat videa o Flutteru, například o instalací na Windows (ale bez Android Studio, protože budu chtít zachovat velmi lehkou sestavu, jenom pro samotné kódovaní) apod. Takové věci jako připojení fyzických zařízeni, se nevztahují přímo k frameworku Flutter a proto věřím, že návodů na toto téma, je beztak dost, ale zbude-li mi chvilka – taky to mám v plánu nahrát.

Roman Cinis
Roman Cinis

Written by Roman Cinis

I'm a multiple-time Google-awarded Flutter/Dart developer, with a great love for interactive animations and good UX. Big Rive fan.

No responses yet

Write a response