Flutter è un vero e proprio kit di sviluppo software (SDK) creato da Google per realizzare velocemente applicazioni iOS e Android. È relativamente giovane se si pensa che la prima versione stabile dell’SDK è stata presentata a Dicembre 2018. Flutter si basa sul linguaggio di programmazione Dart, anch’esso sviluppato da Google. Il valore aggiunto di Flutter, oltre a permettere lo sviluppo cross-platform, si può apprezzare in termini di performance e strumenti a supporto dello sviluppo.
Prestazioni
Flutter segue l’architettura di sviluppo reattivo (Reactive Development Architecture). Il principale punto distintivo della programmazione reattiva e che aggiorna automaticamente i contenuti dell’interfaccia utente quando si aggiornano i valori delle variabili nel codice. Anche React Native segue anche questo principio, ma utilizza un intermediario JavaScript per accedere ai widget OEM (Original Equipment Manufacturer), ossia i componenti grafici di interfaccia utente previsti dal sistema operativo sottostante (pulsanti, barre di navigazione, liste e blocchi di testo). Poiché l’app, per accedere ogni volta ai widget, deve passare per questo intermediario (“bridge”), si hanno problemi di prestazioni. Flutter, tuttavia, omette del tutto questo bridge perchè renderizza direttamente i componenti grafici grazie alla libreria grafica Skia, come vedremo tra poco.
Dart, il linguaggio su cui si basa Flutter, è un linguaggio di programmazione orientato agli oggetti che utilizza tecniche di compilazione Ahead-of-Time (AOT) e compila nel codice nativo senza il bridge aggiuntivo. Ciò accelera notevolmente il tempo di avvio dell’app. Il codice Dart (incluso l’SDK) è compilato in anticipo (AOT: Ahead-of-Time) in una libreria ARM in codice nativo. Questa libreria viene poi inclusa in un progetto Android/iOS dal nome “Runner” che viene incorporato rispettivamente nel pacchetto apk/ipa. Una volta avviata, l’app carica la libreria Flutter. Qualsiasi rendering, input o gestione degli eventi (come click, scroll, swipe, ecc.) sono delegati al codice dell’app ed al motore di Flutter. Flutter non utilizza i componenti grafiche dei sistemi nativi (come accade invece con React Native e Ionic), ma fornisce un insieme di widgets autonomamente gestiti e renderizzati dal motore grafico Skia. Se venissero utilizzati i widget OEM, la qualità e le prestazioni delle app Flutter sarebbero limitate dalla qualità dei widget nativi. Ed è per questo che Flutter gestisce ogni singolo pixel del display, che permette di ottenere un alto livello di personalizzazione, vista la moderna tendenza alla cura del design con interfacce utente sempre più ricche di animazioni e grafica all’avanguardia. Utilizzando un unico linguaggio di programmazione, un singolo framework e un singolo set di librerie per tutta l’interfaccia utente (indipendentemente dal fatto che l’interfaccia utente sia diversa per ogni piattaforma mobile o sostanzialmente coerente), si punta anche a ridurre i costi di sviluppo e manutenzione delle app ed è più facile pubblicare contemporaneamente app per iOS e Android.
In termini di prestazioni, Flutter è progettato per aiutare gli sviluppatori a raggiungere facilmente una frequenza di aggiornamento costante a 60 fotogrammi al secondo (FPS). Questo perché le app di Flutter vengono eseguite tramite codice compilato in modo nativo senza nessun interprete di mezzo.
Tool di sviluppo
Flutter è stato pensato per essere developer-friendly. Di seguito alcuni strumenti che permettono una programmazione più comoda e rapida.
L’Hot Reload permette di apprezzare le modifiche al codice in tempo reale. Se si riscontra un errore durante l’esecuzione di un programma, in Flutter, si potrebbe sistemare subito, continuando da dove si e stati interrotti, senza riavviare il tutto. Il ricaricamento rapido aumenta la produttività dei programmatori e consente di sperimentare senza lunghi ritardi. Anche Xamarin e React Native hanno gli equivalenti di questa funzione.
Flutter mette a disposizione degli sviluppatori una vasta gamma di Widget pronti all’uso che possono coprire i casi d’uso più diffusi in un’applicazione e che possono essere combinati tra loro per garantire la massima personalizzazione.
Sebbene Flutter sia ancora relativamente giovane, la libreria di pacchetti disponibile su Dart Pub sta crescendo a passi da gigante ogni giorno grazie a una popolazione sempre crescente di sviluppatori che contribuisce attivamente.
Widget
Flutter ha un modello di oggetto coerente e unificato: il widget. In precedenza abbiamo accennato al fatto che Flutter utilizza i widget già pronti. Si potrebbe anche dire che Flutter stesso è un widget. Uno degli aspetti rivoluzionari del prodotto è il modo in cui aiuta a creare un’interfaccia utente utilizzando questi elementi.
Un widget può definire ad esempio:
un elemento strutturale (come un pulsante o un menu)
un elemento stilistico (come un font o una combinazione di colori)
un aspetto del layout (come il padding, margin, ecc.)
I widget possono essere combinati tra di loro per creare layout più complessi e si può scegliere di utilizzare i widget a qualsiasi livello di personalizzazione, da quelli predefiniti a quelli di più basso livello per crearne di personalizzati.
L’organizzazione dei widget in Flutter è ad albero, struttura molto utile per il rendering, ma che può comportare un’eccessiva complicazione durante la creazione dell’interfaccia grafica. Infatti, dato che un widget è sia un elemento strutturale che stilistico, possono essere necessari fino a 10 livelli di codice per creare un oggetto di base.
I widget descrivono come e cosa dovrebbe apparire nell’interfaccia in base alla loro configurazione e al loro stato corrente.
Esistono due tipi di widget:
gli Stateless Widget, una volta creati, non subiranno alcuna variazione e non modificheranno il proprio comportamento nemmeno in base a eventi o azioni dell’utente. Alcuni esempi di questi widget sono i widget di testo, i contenitori, ecc.
gli Stateful Widget, contrariamente agli stateless, sono dinamici: permettono di cambiare il loro contenuto nel tempo in base alle azioni o agli eventi scaturiti dall’utente e non sono relativi a un qualche stato immutabile passato all’inizializzazione dell’oggetto. Questi widget sono pertanto utili quando la porzione dell’interfaccia utente che si sta realizzando può cambiare in modo dinamico.
Quando lo stato di un stateful widget cambia, il widget ricostruisce la sua rappresentazione, il framework gestisce l’aggiornamento di esso rispetto al suo stato precedente e determina le modifiche da renderizzare nell’interfaccia a schermo. Il fatto che Flutter abbia i propri widget offre un grande vantaggio: Flutter fornisce già widget che seguono perfettamente le linee guida del Material Design di Google (Material Design widgets) e lo stile iOS di Apple (Cupertino widgets). La personalizzazione dell’interfaccia utente, che di solito richiede più tempo nello sviluppo multipiattaforma, richiede un tempo minore con Flutter. Avendo un solo codice sorgente è facile creare interfacce utente che si adattano alla piattaforma corrente: infatti basta effettuare un controllo, all’interno del codice, per definire quale pacchetto di widget utilizzare. Si passa così dai widget stile Android a quelli stile iOS con un semplice condizionale if.
Conclusione
Flutter è un linguaggio giovane e dinamico che sta crescendo molto rapidamente e con lui cresce anche la community di sviluppatori che lo adottano e che sviluppano e mettono a disposizione librerie a supporto dello sviluppo. Ci sono tuttavia ancora dei limiti: il fatto che non sia adottato nessun linguaggio di templating (html, xml, etc.) per gli elementi della UI, ma che quest’ultimi siano definiti e generati via codice, rende molto disordinata la stesura del codice e molto difficile la sua lettura.