Flutter je otevřená platforma pro vývoj mobilních aplikací, která používá jeden kód k vytváření aplikací pro iOS a Android. Poskytuje vývojářům nástroje a knihovny pro vytvoření krásného a interaktivního uživatelského rozhraní.
Pokud chcete začít vyvíjet aplikace pomocí flutteru, jedním z nejoblíbenějších integrovaných vývojových prostředí je Visual Studio Code (VS Code). VS Code je bezplatný zdrojový kódový editor, který nabízí prostředky pro pohodlný vývoj projektů Flutter.
V tomto článku se podíváme na kroky k vytvoření projektu Flutter ve VS Code. Naučíme se nainstalovat a nakonfigurovat potřebné nástroje a také vytvoříme nový projekt a spustíme jej v simulátoru nebo emulátoru zařízení.
Krok 1: Instalace flutter SDK
Prvním krokem bude instalace sady nástrojů a knihoven flutter SDK, které vám umožňují vyvíjet aplikace pomocí flutteru. SDK si můžete stáhnout z oficiálních stránek Flutter a postupovat podle pokynů pro váš operační systém. Instalace konzolových nástrojů je také součástí instalačního procesu flutter SDK.
Krok 2: Instalace Visual Studio Code
Po instalaci flutter SDK si budete muset stáhnout a nainstalovat Visual Studio Code, pokud jej ještě nemáte. Tento editor najdete na oficiálních stránkách Visual Studio Code. Po instalaci budete moci spustit VS Code a nakonfigurovat jej tak, aby fungoval s flutterem.
Krok 3: Instalace rozšíření Flutter a Dart
Po instalaci VS Code budete muset nainstalovat rozšíření Flutter a Dart k vytvoření a vývoji projektu Flutter. Můžete je nainstalovat tak, že přejdete na kartu "Rozšíření" (rozšíření) v postranním panelu VS Code a vyhledáte tato rozšíření. Nainstalujte obě rozšíření a restartujte VS kód pro aplikaci změn.
Instalace VS Code a flutter SDK
K vytvoření a vývoji projektů Flutter budete potřebovat dva hlavní nástroje: VS Code a flutter SDK.
VS Code je bezplatné integrované vývojové prostředí (IDE) vyvinuté a podporované společností Microsoft. Poskytuje mnoho funkcí a funkcí, které vývojářům pomáhají psát kód efektivněji a produktivněji.
Flutter SDK je sada nástrojů a knihoven vyvinutých společností Google, které vám umožňují vytvářet mobilní aplikace napříč platformami. Poskytuje vývojáři všechny potřebné nástroje pro vytváření, sestavování a spouštění aplikací Flutter.
Zde je návod, jak nainstalovat VS Code a flutter SDK:
- Nainstalujte VS Code: Stáhněte si instalační soubor pro váš operační systém z oficiálních stránek https://code.visualstudio.com / a postupujte podle pokynů instalátoru.
- Nainstalujte flutter SDK: Stáhněte si instalační soubor pro váš operační systém z oficiálních stránek Flutter https://flutter..dev / docs/get-started / install a postupujte podle pokynů instalátoru. Po instalaci flutter SDK je nutné přidat cestu ke složce s flutter binární soubory do proměnné prostředí PATH. To vám umožní používat nástroje Flutter z příkazového řádku.
Gratuluji, úspěšně jste nainstalovali VS Code a flutter SDK a nyní můžete začít vytvářet a vyvíjet své flutter projekty ve VS Code!
Vytvoření a konfigurace nového projektu ve VS Code
K vytvoření projektu Flutter ve VS Code budete muset provést několik jednoduchých kroků:
- Otevřete VS Code a nainstalujte potřebná rozšíření pro práci s flutterem. Chcete-li to provést, klikněte na ikonu rozšíření (rozšíření) v postranním panelu vlevo a do vyhledávacího pole zadejte "Flutter". Vyhledejte rozšíření Flutter a nainstalujte jej.
- Po instalaci rozšíření přejděte k vytvoření nového projektu. Chcete-li to provést, klikněte na ikonu Terminal (terminál) v horní navigační nabídce a vyberte "New Terminal" (nový terminál). V terminálu, který se otevře, zadejte příkaz "flutter create název_projektu" a stiskněte Enter. Místo" název_projektu " zadejte název, který chcete pro svůj nový projekt použít.
- Po dokončení provádění příkazu, VS Code vytvoří nový adresář s názvem vašeho projektu a spustí proces stahování potřebných závislostí a pluginů.
- Po dokončení procesu otevřete nový adresář projektu ve VS Code kliknutím na ikonu "Open Folder" (otevřít složku) v horní navigační nabídce a výběrem adresáře vašeho projektu.
- Po otevření projektu se ujistěte, že je Flutter SDK správně uveden v souboru "settings.json " uvnitř katalogu projektu. Chcete-li to provést, otevřete soubor "settings.json " a ujistěte se, že cesta k flutter SDK je uvedena jako "flutter.sdk": "cesta_k_sdk". Pokud cesta není zadána, přidejte ji ručně.
- Nyní můžete začít vyvíjet svou aplikaci Flutter ve VS Code. Ke spuštění aplikace na emulátoru nebo fyzickém zařízení použijte klávesovou zkratku " Ctrl + F5 "nebo v horní navigační nabídce vyberte" Debug "(ladění) a klikněte na ikonu" Start Debugging " (začít ladění).
Nyní máte plně vyladěný a připravený projekt Flutter ve VS Code. Nezapomeňte uložit své změny a pravidelně provádět commity v Git, abyste se mohli v případě potřeby vrátit k předchozímu stavu projektu. Šťastný vývoj!
Spuštění a testování projektu Flutter ve VS Code
Jakmile vytvoříte projekt Flutter ve VS Code, je čas jej spustit a otestovat. VS Code má několik způsobů, jak spustit flutter projekt, z nichž každý má své vlastní vlastnosti.
Prvním způsobem je spuštění přes terminál. Otevřete terminál ve VS Code, přejděte do adresáře projektu a spusťte příkaz "flutter run". Tím se spustí Projekt na emulátoru nebo fyzickém zařízení připojeném k počítači. Pokud je vše správně nakonfigurováno, uvidíte, jak se vaše aplikace Flutter spouští a zobrazuje na obrazovce.
Druhým způsobem je spuštění prostřednictvím příkazu Run ve VS Code. Stisknutím kombinace kláves " Ctrl + Shift + D "otevřete panel" Run and Debug "a poté klikněte na tlačítko" Run " vedle názvu vašeho projektu Flutter. Tím se také spustí vaše aplikace na emulátoru nebo zařízení. Rozdíl je v tom, že při spuštění přes VS Code budete moci používat další funkce, jako je ladění, správa stopových bodů atd.
Třetím způsobem je spuštění pomocí spouštěče. VS Code má spouštěč, který vám umožňuje přístup k různým scénářům spuštění vašeho projektu. Stiskněte kombinaci kláves "Ctrl + Shift + P", zadejte" Flutter: launch Emulator "nebo" Flutter: launch Device " a vyberte vhodnou možnost spuštění. Připojený emulátor nebo zařízení se automaticky spustí a vaše aplikace se zobrazí na obrazovce.