Návod na instalaci frameworku Flutter v prostředí macOS: Díl první (iOS)

Roman Cinis
4 min readAug 14, 2019

Úvod

Tento textový a video návod (ve formátu krok za krokem), pomůže ú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ě. Dart (jazyk, který se v tomto frameworku plouživá), je velmi vstřícný pro nováčky, ale znalost anglického jazyka je tu, bohužel nezbytnou podmínkou, jelikož výukové podklady jsou až na pár výjimek v tuto chvílí (rok 2019) komplet v angličtině. Taky se předpokládá minimální počítačová gramotnost (znalost klávesových zkratek typu ⌘ C a ⌘ V, práce v příkazovém řádku apod.). 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, tu:

Proč zrovna macOS?

Tento operační systém Apple je nezbytnou podmínkou pro vývoj na iOS (operační systém, jenž běží na iPhonech) a jelikož jste sáhli po Flutteru – zřejmě máte chuť vyvíjet jak na Android tak i iOS. Android takové restrikce nemá, tak že se bez macOS neobejdete, ať se k tomu dostanete jakoukoliv cestou. Tak že můžeme začít pěkně od nuly.

Instalace Flutter SDK

  • Stáhneme si prvně instalační soubory Xcode, přes App Store. Spusťte ho z Docku a vyhledejte slovo:
xcode
  • Zahajte stahování a ve webovém prohlížeči přejděte na stránku:

a tu nezavírejte, budete ji potřebovat po celou dobu instalace.

  • Na stránce, hned pod požadavky na hardware, najdete tlačítko pro stažení aktuální stabilní verze SDK Flutter, klepnete na ni a zahájíte stahovaní.
  • Během stahovaní ve Finderu přejděte do domovské složky (v menu nahoře Otevřít > Domov).
  • Tam si vytvořte složku novou, s názvem například „Development“.
  • Až se zip s SDK stáhne – rozbalte ho a obsah (složku “flutter”), zkopírujte dovnitř této, nově vytvořené, složky.
  • Spusťte Terminál (přes LaunchPad či Spotlight), vyhledáním slova:
terminal
  • Do terminálu zadejte příkaz (tyto a další se potvrzují klávesou return):
cd
  • Jenž přesměruje vás na domovskou stránku, a vypišme si její obsah příkazem:
ls -a
  • Měli by jste v seznamu vidět svojí nově vytvořenou složku a taky absenci souboru:
.bash_profile
  • V tomto případě soubor .bash_profile (jenž by měl obsahovat cestu proměnného prostředí Flutter SDK) vytvoříme příkazem do terminálu:
touch .bash_profile
  • Existenci tohoto souboru lze ověřit opět příkazem:
ls -a
  • Teď proměnné prostředí budeme editovat a doplňovat příkazem:
sudo nano .bash_profile
  • To bude chtít heslo, při zadávaní nebude vidět, tak že buďte opatrní a potvrďte.
  • Spusťte TextEdit (přes LaunchPad či Spotlight), vyhledaním slova:
textedit
  • Do něj vložte tento text:
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
  • Poté spusťte nové okno Terminálu (pravým tlačítkem na ikonku v Docku > Nové okno).
  • Do tohoto nového okna přetáhnete složku „bin“, která je uvnitř složky „flutter“, tak aby jste viděli její lokaci na disku.
  • Adresu složky „bin“ si z okna terminálu označte a zkopírujte do schránky (⌘ C) a vložte (⌘ V) do TextEdit, místo textu:
[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin
  • V TextEditu, posléze celý text začínající slovem “export” končící “bin” ”, zkopírujte do schránky (⌘ C) a vložte (⌘ V) . Hotovo, zmáčkněte na klávesnici kombinaci ⌃X pak písmenko:
y

a potvrďte přes klávesu Return. Instalace Flutter SDK je dokončena.

Instalace Xcode a jeho nástrojů příkazového řádku

  • Opět do terminálu zadejte příkaz pro návrat domu:
cd
  • Pak obnovíme terminálové okno příkazem:
source $HOME/.bash_profile
  • Zkontrolujte, že obsah souboru .bash_profile je ten který jste zadali příkazem:
echo $PATH
  • Pokud se schoduje, zkontrolujeme funkčnost SDK příkazem:
flutter --version
  • Pakliže se již Xcode a jeho nástroje příkazového řádku neinstalovali – budete požádaní o instalaci GITu. Odpovězte kladně.
  • Dočkejte se instalace během které, například, můžete začít stahovat instalační soubor pro Android Studio (které je nezbytné pro mobilní vývoj v operačním systému od Google) na tomto webu:
  • Ale vraťme se k Xcode, to si tedy spusťte a potvrďte licenční ujednaní. Poté zadejte heslo a potvrďte.
  • Dočkejte se dokončení instalace Xcode a zadejte příkaz do terminálu:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  • Opět zadejte neviditelné heslo a potvrďte.
  • Zkontrolujte stav licenčních ujednání příkazem:
sudo xcodebuild -license
  • Mačkejte mezerník dokud se nedostanete na konec a potvrďte ujednaní příkazem:
agree
  • Spusťte simulátor iPhone (přes např. Spotlight) vyhledáním slova:
simulator
  • Počkejte než naběhne a v terminálu zadejte příkaz pro vytvoření testové aplikace:
flutter create test
  • Po dokončení příkazu napište další příkaz kterým se dostanete do složky s testovací aplikaci:
cd test
  • A na závěr této části zkontrolujeme funkčnost simulátoru a testovací aplikaci příkazem:
flutter run

Závěr

Vše by mělo fungovat a tímto již máte hotové nastavení Flutter SDK pro vývoj v rámci ekosystému Apple a můžete začít kódovat svoje první „Hello World“. Vzhledem k tomu, že jste si vybrali Dart a ne Swift – předpokládám, že budete chtít realizovat svoje výtvory i na Android platformě. Jak se nastavuje Android Studio a jeho SDK, společně s výborným Visual Studio Code, si ukážeme v druhém díle tohoto návodu, který najdte tady:

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