Nelle lezioni precedenti, abbiamo iniziato a prendere familiarità con Flutter e con gli strumenti per sviluppare un’app con questo nuovo framework. In questa lezione, muoveremo i primi passi nella creazione di un nuovo progetto con Android Studio e ne analizzeremo la struttura.
Creazione di un nuovo progetto
Apriamo Android Studio e nella schermata principale clicchiamo su Start a new Flutter project per iniziare il wizard di creazione di un nuovo progetto di esempio per Flutter.
Figura 31. Schermata iniziale di Android Studio (click per ingrandire)
Nella schermata di creazione di un nuovo progetto, possiamo scegliere tra quattro differenti tipologie di progetto, definite come segue:
| Progetto | Descrizione |
|---|---|
| Flutter Application | è il progetto da utilizzare quando si desidera creare una nuova applicazione multipiattaforma destinata ad un utente finale |
| Flutter Plugin | questa tipologia di progetto deve essere utilizzata quando si desidera esporre determinate API di Android e/o iOS ad altri sviluppatori |
| Flutter Package | è il progetto da selezionare per scrivere un componente Dart, come ad esempio un Widget |
| Flutter Module | è una tipologia di progetto, recentemente introdotta, per creare un nuovo modulo basato su un template standard da integrare in una app Android |
Figura 32. Schermata di creazione di un nuovo progetto basato su Flutter (click per ingrandire)
L’obiettivo di questa guida è mostrare come muovere i primi passi con Flutter e imparare a sviluppare un’app cross-platform da zero. Pertanto, selezioniamo il progetto Flutter Application e clicchiamo su Next.
Configuriamo ora i parametri di base della nostra applicazione.
Aggiungiamo un nuovo nome al nostro progetto, che in questo caso si chiamerà flutter_tutorial_htmlit. A differenza dei framework con i quali siamo abituati a sviluppare, Flutter (o meglio Dart) richiede che il nome del package sia in minuscolo e le parole separate da un caratteri di underscore, come nel nostro caso. Se, erroneamente, dovessimo inserire un nome in maiuscolo, Android Studio ci notificherà l’errore impedendoci di continuare nella creazione del progetto.
Successivamente, se non è già definito dall’IDE stesso, selezioniamo il path in cui si trova la SDK di Flutter e la cartella in cui vogliamo creare il nostro nuovo progetto di Flutter.
Infine, se desideriamo, possiamo possiamo aggiungere una descrizione all’app.
Figura 33. Configurazione della nuova app Flutter (click per ingrandire)
Nota: se è la prima volta che usiamo Android Studio e Android, è consigliato installare anche la NDK offerta da Android che permette l’integrazione di codice scritto in C/C++ all’interno di un’app Android. In questo caso, invece, la libreria è utile come supporto alla profilazione nativa di un’app scritta in Flutter.
Per farlo, dalla schermata iniziale di Android Studio clicchiamo su Configure -> SDK Manager -> SDK Tool e selezioniamo la voce NDK. Clicchiamo su OK e aspettiamo l’installazione del pacchetto. Una volta installato, siamo pronti per riprendere con lo sviluppo della nostra app.
Figura 34. Schermata di gestione della SDK di Android per l’installazione della NDK (click per ingrandire)
Non resta che un ultimo passo da compiere, ossia impostare il nome dell’organizzazione e quindi del package dell’app. Di default il nome dell’organizzazione (o Company name) è example.com e di conseguenza il nome del nostro package è com.example.fluttertutorialhtmlit il che va bene ai fini di test e sperimentazione. Nel caso in cui volessimo rilasciare l’applicazione è caldamente consigliato cambiare questa informazione, in quanto il nome dell’organizzazione viene utilizzato come nome del pacchetto per Android e come ID bundle per iOS e, una volta che l’applicazione è stata rilasciata, non può più essere modificato. Aggiungiamo quindi il nome dell’organizzazione, che può anche essere il nostro nick da sviluppatori.
Come si può vedere dall’immagine precedente, è possibile aggiungere il supporto a Kotlin e Swift per le applicazioni Android e iOS. Queste opzioni andrebbero spuntate solo se volessimo scrivere nella nostra app del codice specifico per le piattaforme Android e iOS rispettivamente in Kotlin e Swift, poiché di default è possibile scrivere del codice ad-hoc usando Java e Objective-C.
Clicchiamo, infine, sul pulsante Finish e attendiamo la creazione del progetto.
Figura 35. Configurazione del nome del package (click per ingrandire)
Al termine della creazione del progetto verrà visualizzata una nuova schermata di Android Studio in cui sarà possibile interagire con il progetto stesso.
Figura 36. Nuovo progetto Flutter su Android Studio (click per ingrandire)
A questo punto, eseguiamo la nostra applicazione sul nostro emulatore o dispositivo, ottenendo il risultato in figura.
Figura 37. Esecuzione dell’applicazione sull’emulatore a) Android, b) iOS (click per ingrandire)
L’applicazione che vogliamo realizzare mostrerà quante volte premiamo il tasto +. Inoltre, è possibile osservare che in alto a destra c’è un banner di colore rosso scuro con la scritta bianca DEBUG. Questa etichetta serve a comunicare che l’applicazione non è pronta per la produzione e che stiamo usando una versione di prova. Più avanti in questa guida vedremo come rimuovere questo banner.
Creazione di un nuovo progetto Flutter da riga di comando
Flutter offre la possibilità di creare un nuovo progetto anche da riga di comando, senza dover necessariamente utilizzare un IDE di sviluppo come Android Studio.
Per farlo, basta eseguire da terminale il comando:
flutter create NOMEPROGETTOIn questo modo avvieremo il processo di creazione del progetto come mostrato in figura.
Figura 38. Creazione di un progetto Flutter da riga di comando (click per ingrandire)
Al termine della creazione, verrà eseguito in automatico il comando flutter doctor e verranno indicati i comandi per spostarci all’interno del progetto e per eseguire l’applicazione.
Figura 39. Completamento della creazione del progetto Flutter da riga di comando ed output del comando flutter doctor (click per ingrandire)
Assicuriamoci di avere un dispositivo connesso o un dispositivo virtuale (Android o iOS) disponibile. Per farlo, possiamo eseguire i comandi per visualizzare la lista degli emulatori e dei dispositivi disponibili, rispettivamente:
flutter emulatorsFigura 40. Lista di emulatori disponibili (click per ingrandire)
flutter devicesFigura 41. Lista di dispositivi disponibili (click per ingrandire)
A questo punto, immaginiamo di avere il nostro dispositivo Android connesso ed eseguiamo l’applicazione da riga di comando tramite il comando:
flutter runFigura 42. Output del comando flutter run quando eseguito su un dispositivo fisico Android (click per ingrandire)
Attraverso questo comando, verrà compilata e installata l’applicazione sul dispositivo e avremo accesso a diverse opzioni accessibili attraverso l’apertura del menu di aiuto tramite la digitazione della lettera h. Per interrompere l’esecuzione dell’app da terminale basterà digitare la lettera q.
La struttura di un progetto Flutter
Ora che abbiamo chiaro come utilizzare il terminale per creare ed eseguire un’app scritta in Flutter, siamo pronti per analizzare la struttura del progetto, mostrata di seguito:
Figura 43. Struttura del progetto Flutter (click per ingrandire)
Come si può notare, la struttura è alquanto chiara e semplice ed è suddivisa come segue.
| Cartella / File | Descrizione |
|---|---|
| android | Questa cartella contiene tutti i file e il codice specifici per Android e utilizzati dall’applicazione. In particolare, esplorando la cartella è facile notare la cartella java in cui aggiungere del codice specifico per Android, la cartella res per gestire tutte le risorse associate al progetto, e infine l’AndroidManifest. Per ulteriori dettagli sulla struttura di un progetto Android rimandiamo all'apposita lezione della guida ad Android di HTML.it |
| ios | Come per Android, questa cartella contiene il file e il codice relativo ad iOS utilizzati dall’applicazione. In particolare, di interesse sono la cartella Assets.xcassests che contiene le immagini e le icone usate per l’app, e il file Info.plist che contiene le informazioni e i permessi essenziali per l’app |
| lib | Questa è la cartella principale di qualsiasi applicazione Flutter e in cui andremo a scrivere i componenti e funzionalità necessarie allo sviluppo della nostra app |
| lib/main.dart | Quando viene creato un nuovo progetto, all’interno della cartella lib è presente solamente un unico file, main.dart, contenente il codice di base della nostra app. Questo file è, inoltre, il punto di ingresso della nostra app |
| test | Flutter, come Android ed iOS, permette di sviluppare un insieme di test da eseguire ai fini di Quality Assurance (QA) e di appurare che l’applicazione si comporti sempre come desiderato. Alla creazione di un nuovo progetto verrà creato all’interno di questa cartella un file di test, widget_test.dart, ovvero un semplice esempio di come scrivere il test per un Widget di Flutter |
Entrando nel dettaglio, è necessario comprendere che le cartelle android e ios non devono necessariamente essere utilizzate durante lo sviluppo di un’app Flutter, a meno che non si debba implementare qualche personalizzazione a livello di piattaforma che lo richieda.
Compresi questi concetti, nella prossima lezione vedremo come modificare la classe main.dart per visualizzare la scritta Hello Flutter e due funzionalità importantissime nello sviluppo di un’app Flutter.
