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

Ú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:

Instalace frameworku Flutter v prostředí macOS: Díl první

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:

Homebrew

• 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:

Visual Studio Code - Code Editing. Redefined

• 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.