Come creare applicazioni per cellulari e desktop con Flutter

Flutter è un framework UI open-source creato da Google per creare applicazioni di alta qualità per cellulari, web e desktop da un’unica base di codice. Vediamo insieme come creare applicazioni con Flutter usando un editor di testo o un ambiente di sviluppo integrato (IDE) combinato con gli strumenti da riga di comando di Flutter.

Ambiente di sviluppo integrato (IDE) per Flutter

Si possono costruire applicazioni con Flutter utilizzando qualsiasi editor di testo o IDE combinato con gli strumenti da riga di comando di Flutter. Il team di Flutter raccomanda l’uso di un editor che supporta un’estensione o un plugin Flutter, come VS Code e Android Studio. Questi plugin forniscono completamento del codice, evidenziazione della sintassi, assistenza all’editing dei widget, supporto all’esecuzione e al debug, e altro ancora.

È possibile aggiungere un plugin supportato per Visual Studio Code, Android Studio o IntelliJ IDEA Community, Educational e Ultimate editions. Il plugin Flutter funziona solo con Android Studio e le edizioni di IntelliJ IDEA elencate.

Segui queste procedure per aggiungere il plugin Flutter a VS Code, Android Studio o IntelliJ:

1. Apri l’IDE e cerca “Flutter” nel marketplace dei plugin.
2. Scegli il plugin Flutter e clicca su “Install“.
3. Dopo l’installazione, riavvia l’IDE per attivare il plugin.

Se si sceglie un altro IDE, si può saltare alla prossima fase: Test drive.

Creare l’App

Per creare la tua prima applicazione Flutter, segui questi passaggi:

1. Avvia View > Command Palette.
2. Digita “flutter”, e seleziona Flutter: New Project.
3. Seleziona Application.
4. Crea o seleziona la directory parent per la nuova cartella del progetto.
5. Inserisci un nome per il progetto, come my_app, e premi Enter.
6. Aspetta che la creazione del progetto sia completata e che il file main.dart appaia.

I comandi sopra creano una directory del progetto Flutter chiamata my_app che contiene una semplice app demo che utilizza i Material Components.

Avviare l’App

Per avviare l’applicazione Flutter, segui questi passaggi:

1. Trova la barra di stato di VS Code (la barra blu in fondo alla finestra).
2. Seleziona un dispositivo dall’area Device Selector. Per ulteriori dettagli, consulta Quickly switching between Flutter devices.
3. Avvia Run > Start Debugging o premi F5.
4. Aspetta che l’app si avvii – il progresso viene stampato nella vista Debug Console.

Dopo che la compilazione dell’app è completata, vedrai l’app di partenza sul tuo dispositivo.

Prova il hot reload

Flutter offre un ciclo di sviluppo veloce con Stateful Hot Reload , la possibilità di ricaricare il codice di un’app in esecuzione senza riavviare o perdere lo stato dell’app. Fai una modifica al codice sorgente dell’app, informa il tuo IDE o strumento da riga di comando che vuoi fare un hot reload, e vedi la modifica nel tuo simulatore, emulatore o dispositivo.

Profilo o esecuzione in modalità release

Fino ad ora hai eseguito la tua app in modalità debug. La modalità debug sacrifica le prestazioni per funzionalità utili allo sviluppatore come il hot reload e il debug passo-passo. Non è insolito vedere prestazioni lente e animazioni scattanti in modalità debug. Una volta che sei pronto per analizzare le prestazioni o rilasciare la tua app, vorrai utilizzare le modalità di compilazione “profilo” o “release” di Flutter.

Prima App Flutter

Ora sei pronto per iniziare il codelab “Prima App Flutter“. In circa un’ora e mezza, imparerai le basi di Flutter creando un’app che funziona su mobile, desktop e web.

Widget Flutter

I widget Flutter sono costruiti utilizzando un framework moderno che trae ispirazione da React. L’idea centrale è che costruisci la tua UI con i widget. I widget descrivono come dovrebbe essere la loro vista data la loro configurazione e stato attuali. Quando lo stato di un widget cambia, il widget ricostruisce la sua descrizione, che il framework confronta con la descrizione precedente per determinare le modifiche minime necessarie nell’albero di rendering sottostante per passare da uno stato al successivo.

Widget di base

Flutter viene fornito con un insieme di potenti widget di base, di cui i seguenti sono comunemente utilizzati:

Assicurati di avere un’entrata uses-material-design: true nella sezione flutter del tuo file pubspec.yaml. Ti permette di utilizzare il set predefinito di Material icons. È generalmente una buona idea includere questa riga se stai utilizzando la libreria Materials.

Gestione degli input

La maggior parte delle applicazioni include una qualche forma di interazione dell’utente con il sistema. Il primo passo nella costruzione di un’applicazione interattiva è rilevare i gesti di input.

Cambiare i widget in risposta all’input

Finora, in questa pagina sono stati utilizzati solo widget senza stato. I widget senza stato ricevono argomenti dal loro widget genitore, che memorizzano nelle variabili membro final.

Riassumiamo il tutto

Quello che segue è un esempio più completo che riunisce questi concetti: Un’applicazione di shopping ipotetica mostra vari prodotti offerti in vendita e mantiene un carrello della spesa per gli acquisti previsti. Inizia definendo la classe di presentazione, ShoppingListItem:

Il widget ShoppingListItem segue un modello comune per i widget senza stato. Memorizza i valori che riceve nel suo costruttore nelle variabili membro final, che poi utilizza durante la sua funzione build(). Ad esempio, il booleano inCart alterna tra due aspetti visivi: uno che utilizza il colore primario dal tema corrente, e un altro che utilizza il grigio.

Quando l’utente tocca l’elemento della lista, il widget non modifica direttamente il suo valore inCart. Invece, il widget chiama la funzione onCartChanged che ha ricevuto dal suo widget genitore. Questo modello ti permette di memorizzare lo stato più in alto nella gerarchia dei widget, il che fa sì che lo stato persista per periodi di tempo più lunghi.

Ecco un esempio di widget genitore che memorizza lo stato modificabile:

La classe ShoppingList estende StatefulWidget, il che significa che questo widget memorizza lo stato modificabile. Quando il widget ShoppingList viene inserito per la prima volta nell’albero, il framework chiama la funzione createState() per creare una nuova istanza di _ShoppingListState da associare a quella posizione nell’albero.

Quando il genitore di questo widget ricostruisce, il genitore crea una nuova istanza di ShoppingList, ma il framework riutilizza l’istanza di _ShoppingListState che è già nell’albero invece di chiamare di nuovo createState.

Per accedere alle proprietà dell’attuale ShoppingList, il _ShoppingListState può utilizzare la sua proprietà widget.