Un editor per Flutter: Android Studio o Visual Studio Code ?

Negli articoli precedenti abbiamo visto come installare l'ambiente Flutter sia su Windows sia su macOS e come configurare degli emulatori per testare le applicazioni. Per l'SDK di Android abbiamo installato Android Studio e per l'SDK di iOS (solo su Mac) abbiamo installato Xcode.

Ci resta da scegliere e configurare un editor per poter iniziare a lavorare (quanto vedremo da ora in poi sarà sostanzialmente valido sia per ambiente Windows, sia per ambiente macOS). 

Fondamentalmente è possibile sviluppare applicazioni Flutter usando un semplice editore di testi e i tool da linea di comando forniti dall'SDK, ma è preferibile utilizzare comunque un IDE specifico per sfruttare al meglio ad esempio, il completamento automatico del codice, il controllo della sintassi o il supporto al debug, giusto per indicare le cose più ovvie.

Tra quelli possibili, vedremo Android Studio, che abbiamo già installato, e Visual Studio Code.

Android Studio

Per completare la configurazione di Android Studio, sulla pagina di benvenuto dell'applicazione, accediamo alla sezione Plugin e installiamo un plugin essenziale: Flutter (e Dart quando richiesto).

In alternativa, per Windows dal menu File, Settings, Plugins, sezione Marketplace, mentre per macOs, Preferences, Plugins.   

Vi consiglio anche di installare il plugin Android Drawable Preview, che vi permette di modificare agevolmente le icone associate all'app.   

Per verificare il corretto funzionamento, terminata l'installazione, riavviamo Android Studio e salvo intoppi, nella pagina di benvenuto troverete un pulsante New Flutter Project  con cui avviare il processo guidato di creazione.

Accertatevi che il percorso indicato per l'SDK di Flutter sia corretto, quindi Next, date un nome al progetto (ad es. myapp), eventualmente una breve descrizione e terminate il processo di creazione.

Non resta che attendere il completamento della creazione dei file e delle cartelle necessarie. La procedura crea un semplice progetto di esempio, già pronto per la compilazione.

Lanciamo l'applicazione da Android Studio

Terminato il processo di creazione, prestiamo attenzione alla barra di esecuzione presente nella parte superiore:

Nel primo selettore, scegliamo l'emulatore su cui testare l'app (se non è presente, allora occorre procedere alla creazione come abbiamo visto negli articoli precedenti) e facciamo girare l'applicazione cliccando sull'icona run o in alternativa dal menu Run, Run.

Visual Studio Code

Visual Studio Code è un editore molto leggero, ricco di comode funzionalità per chi scrive codice, messo a disposizione in modo gratuito da Microsoft. Scarichiamo l'ultima versione, per Windows o macOS, da qui Visual Studio Code e procediamo all'installazione.

Per completare la configurazione di VS Code, dal menu Visualizza, Estensioni, installiamo il plugin essenziale: Flutter (che installa anche Dart automaticamente).

Per verificare il corretto funzionamento, terminata l'installazione, lanciamo la palette dei comandi (menu Visualizza, Riquadro comandi, o in alternativa CTRL+MAIUSC+P su Windows oppure COMMAND+SHIFT+P su macOS) e digitiamo Flutter: Run Flutter Doctor verificando che il diagnostico non rilevi problemi.

Proviamo a creare la nostra prima applicazione, di nuovo dal Riquadro comandi selezioniamo Flutter: New Project, scegliamo il tipo Application

indichiamo il percorso in cui creare la cartella del progetto, assegniamo un nome all'applicazione (ad es. myapp) e confermiamo. 

Lanciamo l'applicazione da Visual Studio Code

Terminato il processo di creazione, prestiamo attenzione alla barra di stato dell'editor, 

dove è presente il selettore dell'emulatore (nel mio caso sono su un macOS e mi suggerisce l'iPhone 13) su cui è possibile cliccare per sceglierne uno diverso. Se in ambiente macOS risulta No Devices, dal terminale lanciare il comando 

 open -a simulator

per avviare l'emulatore. Facciamo girare l'applicazione dal menu Esegui, Avvia Debug o in alternativa con il tasto F5.

I comandi da terminale

Un alternativa ad usare le funzioni rese disponibili dai plugin di Android Studio e di VS Code è quella di usare il terminale, avviando una serie di comandi. 

Per creare un nuovo progetto, è sufficiente posizionarsi nella cartella in cui si vuole creare la struttura e lanciare da terminale i comandi

 flutter create myapp

cd myapp

e lanciare l'esecuzione con 

 flutter run

Il risultato

Se avete usato uno dei sistemi che ho indicato per creare e lanciare l'app, dovreste vedere sull'emulatore una schermata simile a questa 

(provate a cliccare sul tasto + in basso a destra).

Un personale confronto

Personalmente trovo Android Studio più completo e di più facile utilizzo perché tutte le funzioni e i comandi sono facilmente disponibili, compresi alcuni tool di sviluppo, di benchmark e di debugging che in Visual Studio Code vengono lanciati come applicazioni esterne.

Tuttavia Android Studio consuma molte risorse e può risultate un po' lento su computer che non hanno le giuste caratteristiche o la giusta dotazione di RAM.

Visual Studio Code dal suo canto invece è molto leggero (è persino possibile utilizzarlo in versione portable) e copre tutte le esigenze di sviluppo anche grazie ai numerosi plugin disponibili e può essere l'editore unico da utilizzare per tutti i linguaggi su cui si sta lavorando.

A voi la scelta, io per i prossimi articoli cercherò di usare l'uno o l'altro anche per capirne meglio le differenze e le puculiarità.