Creare un’app Flutter usando VS Code

Prima di VS Code ho provato molti IDE (Integrated Development Environment, ambiente di sviluppo integrato) tra cui il famoso Eclipse (nato per Java), PHP Storm, Android Studio (per app Android), Xcode (per app iOS e tutto il mondo MacOS), Atom. Ma devo dire che Microsoft, per una volta… ha fatto un buon lavoro (avrà i suoi buoni motivi e io penso di sapere il perché…) e Visual Studio Code, o VS Code o spesso anche solo Code, è un ottimo strumento per sviluppare in qualsiasi linguaggio di programmazione e per qualsiasi scopo.

Nel nostro caso vediamo come usarlo per creare un progetto Flutter e nello specifico per un’app Android e iOS (come si sa Flutter può essere usato anche per sviluppare app web, Windows e Linux).

Flutter

Questo articolo non copre l’installazione dell’ambiente SDK (Software Development Kit, kit di sviluppo del software) di Flutter, lo dò per scontato. Invece ti suggerisco di installare su VS Code l’estensione specifica per Flutter chiamata appunto “Flutter” perché installerà anche il supporto al linguaggio Dart che viene adoperato dall’ambiente Flutter per scrivere le app. Quindi: Flutter è un ambiente cross-platform come si diceva sopra, Dart è il linguaggio di programmazione che si usa in Flutter (Dart è derivato dal Java, ma ha delle particolarità che lo differenziano da esso e lo rendono molto più web friendly).

Progetto

Passiamo alla creazione del progetto. Di default, VS Code crea un progetto per tutte le piattaforme che può gestire, ma noi vogliamo limitare solo la gestione di iOS e Android, quindi dobbiamo andare nelle impostazioni di VS Code (Cmd + ,) e cercare flutter platforms

Se non ci sono elementi (come è normale che sia se non lo abbiamo mai fatto) aggiungiamone 2: “ios”, “android”. E’ importante che siano scritti minuscoli perché fa la differenza.

Adesso sempre da VS Code facciamo Ctrl/Cmd + Shift + P e digitiamo Flutter: New Project

Per un’app scegliamo la prima voce Application e indichiamo la cartella che deve contenerla (la cartella con il nome dell’app la crea il sistema al passo successivo, quindi in questa fase basta selezionare la cartella genitore). Infine diamo un nome all’app.

Tra le cartelle che vengono create a noi interessa sapere che:

• la cartella “android” è specifica dell’ambiente per l’app che girerà su un dispositivo Android, quindi tutte le impostazioni di Kotlin, del Manifest, i permessi, gradle, ecc tipiche di un’app Android;
• la cartella “ios” è l’analoga di quella sopra ma per l’ambiente iOS, quindi Swift, Info.plist, ecc.
• quella in cui svilupperemo la nostra app è “lib”. Qui va tutto il codice .dart

Adesso puoi iniziare scrivere il codice della tua app, ed essendo un IDE, hai a disposizione anche lo strumento di esecuzione su emulatori, sui dispositivi reali, debug, ecc.