Cosa c'è di nuovo in Flutter 2?

L'anno scorso, ho scritto due articoli qui su Smashing Magazine sull'utilizzo di Flutter su piattaforme web e desktop. Il primo articolo era un'introduzione generale allo sviluppo web e desktop e si concentrava sulla creazione di un'interfaccia utente reattiva; il secondo articolo riguardava le sfide che potresti incontrare quando provi a sviluppare un'app Flutter che funziona su più piattaforme.

All'epoca, il supporto Flutter per piattaforme non mobili non era considerato stabile e pronto per la produzione dal team Flutter, ma ora le cose sono cambiate.

Flutter 2 è qui

Il 3 marzo, Google ha tenuto l'evento Flutter Engage, dove è stato lanciato Fluter 2.0. Questa versione è davvero una vera e propria versione 2.0, con molte modifiche che promettono di rendere Flutter davvero pronto per andare oltre lo sviluppo di app mobili.

Il cambiamento fondamentale per capire perché Flutter 2.0 è importante è che lo sviluppo web è ora ufficialmente parte del canale stabile e il supporto desktop seguirà presto anche sul canale stabile. In effetti, è attualmente abilitato in forma simile al candidato al rilascio come snapshot beta di rilascio anticipato nel canale stabile.

Nell'annuncio, Google non si è limitato a dare un'idea di come sarà il futuro di Flutter. Ci sono stati anche esempi concreti di come le grandi aziende stiano già lavorando sulle app Flutter per sostituire le loro app esistenti con quelle che funzionano meglio e consentono agli sviluppatori di essere più produttivi. Ad esempio, la più grande casa automobilistica del mondo, Toyota, costruirà ora il sistema di infotainment delle proprie auto utilizzando Flutter.

Un altro annuncio interessante, che mostra quanto velocemente Flutter stia migliorando come SDK multipiattaforma, è l'annuncio di Canonical che, oltre a sviluppare il loro nuovo programma di installazione di Ubuntu utilizzando Flutter, utilizzeranno anche Flutter come opzione predefinita per creare app desktop.

Hanno anche rilasciato una versione Flutter del tema Yaru di Ubuntu, che useremo più avanti nell'articolo per creare un'app desktop Flutter che sia perfettamente a suo agio nel desktop di Ubuntu, utilizzando anche alcune delle nuove funzionalità di Flutter. Puoi dare un'occhiata all'annuncio di Flutter 2 di Google per avere un quadro più completo.

Diamo un'occhiata ad alcune delle modifiche tecniche a Flutter che sono entrate nel canale stabile con la versione 2.0 e costruiamo un'app desktop di esempio molto semplice con Flutter prima di trarre alcune conclusioni su quali tipi di progetto specifici potremmo e non potremmo usare Flutter a partire da adesso.

Modifiche generali all'usabilità per dispositivi più grandi

Secondo l'annuncio, sono state apportate molte modifiche a Flutter per fornire un supporto migliore per i dispositivi che non sono dispositivi mobili.

Ad esempio, un ovvio esempio di qualcosa che era necessario per le app Web e desktop e che fino ad ora doveva essere eseguito utilizzando pacchetti di terze parti o implementandolo personalmente è una barra di scorrimento .

Ora c'è una barra di Scrollbar integrata che può adattarsi perfettamente alla tua app, osservando esattamente come dovrebbe apparire una barra di scorrimento nella piattaforma specifica: con o senza una traccia, con la possibilità di scorrere facendo clic sulla traccia, ad esempio, che è enorme se vuoi che i tuoi utenti si sentano come a casa fin dall'inizio quando usano la tua app Flutter. Puoi anche temarlo e personalizzarlo.

Sembra anche che a un certo punto Flutter mostrerà automaticamente le barre di scorrimento adatte quando il contenuto dell'app è scorrevole.

Nel frattempo, puoi semplicemente avvolgere qualsiasi vista scorrevole con il widget della barra di scorrimento di tua scelta e creare un ScrollController da aggiungere come controller sia per la barra di scorrimento che per il widget scorrevole (nel caso in cui non hai mai usato ScrollController , lo usi esattamente come un TextEditingController per un campo di TextField ). Puoi vedere un esempio dell'uso di una normale barra di scorrimento Materiale un po' più in basso in questo articolo nell'esempio dell'app desktop.

Cambiamenti web svolazzanti

Flutter per il Web era già in una forma abbastanza utilizzabile, ma c'erano problemi di prestazioni e usabilità, il che significava che non si sentiva mai lucido come Flutter mobile. Con il rilascio di Flutter 2.0, sono stati apportati molti miglioramenti, soprattutto per quanto riguarda le prestazioni .

Il target della compilation, precedentemente molto sperimentale e difficile da usare per il rendering della tua app (con WebAssembly e Skia) è ora chiamato CanvasKit . È stato perfezionato per offrire un'esperienza coerente e performante quando si passa dall'esecuzione di un'app Flutter in modo nativo su dispositivi mobili all'esecuzione in un browser.

Ora, per impostazione predefinita, il rendering dell'app verrà eseguito utilizzando CanvasKit per gli utenti Web desktop e con il renderer HTML predefinito (che ha avuto anche miglioramenti, ma non è buono come CanvasKit) per gli utenti Web mobili.

Se hai provato a utilizzare Flutter per creare app Web, potresti aver notato che non era particolarmente intuitivo avere qualcosa di semplice come un collegamento ipertestuale. Ora almeno, puoi creare collegamenti ipertestuali un po' più come faresti quando usi HTML, usando la classe Link .

Questa in realtà non è un'aggiunta a Flutter stesso, ma una recente aggiunta al pacchetto url_launcher di Google. Puoi trovare una descrizione completa ed esempi di utilizzo della classe Link nel riferimento API ufficiale.

La selezione del testo è stata migliorata poiché ora il punto pivot corrisponde al punto in cui l'utente ha iniziato a selezionare il testo e non il bordo sinistro del SelectableText in questione. Inoltre, ora le opzioni Copia/Taglia/Incolla esistono e funzionano correttamente.

Tuttavia, la selezione del testo non è ancora di prim'ordine in quanto non è possibile selezionare il testo tra diversi widget SelectableText e il testo selezionabile non è ancora predefinito, ma parleremo di questo e di altri eccezionali inconvenienti web di Flutter (mancanza di supporto SEO , in primis) nella conclusione di questo articolo.

Modifiche al desktop svolazzanti

Quando ho scritto di sviluppo web e desktop con Flutter l'anno scorso, mi sono concentrato principalmente sulla creazione di app web con Flutter, dato che lo sviluppo desktop era ancora considerato molto sperimentale (nemmeno sul canale beta ). Ora, tuttavia, il supporto desktop Flutter seguirà presto il supporto Web e diventerà stabile.

Le prestazioni e la stabilità sono state notevolmente migliorate e i miglioramenti nell'usabilità generale per i dispositivi più grandi gestiti con mouse e tastiera che avvantaggiano così tanto le app Web significano anche che le app desktop Flutter sono ora più utilizzabili.

Mancano ancora strumenti per le app desktop e ci sono ancora molti bug in sospeso piuttosto gravi, quindi non provare a usarlo per il tuo prossimo progetto di app desktop destinato alla distribuzione pubblica.

Esempio di app desktop creata con Flutter

Il supporto per desktop Flutter è ora abbastanza stabile e utilizzabile, e sicuramente migliorerà in futuro tanto quanto Flutter nella sua interezza è migliorato fino ad ora, quindi proviamo a vederlo in azione ! Puoi scaricare l'intero esempio di codice su un repository GitHub.

L'app che costruiremo è la seguente app molto semplice. Abbiamo una barra di navigazione laterale insieme ad alcuni elementi di contenuto per ciascuna delle sezioni di navigazione.

La prima cosa da fare è capire le tue dipendenze .

Prima di tutto, devi avere abilitato lo sviluppo del desktop Flutter, usando il comando

 flutter config --enable-${OS_NAME}-desktop

dove sostituiresti ${OS_NAME} con il tuo sistema operativo desktop preferito, windows , linux o macos . Per questo esempio, userò Linux dato che useremo il tema Ubuntu.

Ci sono anche altre dipendenze necessarie per creare app native per ogni piattaforma, ad esempio su Windows hai bisogno di Visual Studio 2019, su macOS hai bisogno di Xcode e CocoaPods e puoi trovare un elenco aggiornato delle dipendenze Linux sul sito ufficiale di Flutter.

Quindi crea un progetto Flutter, eseguendo:

 flutter create flutter_ubuntu_desktop_example

Quindi, dobbiamo ottenere il tema stesso (l'unica dipendenza della nostra app) aggiungendo yaru alle dependencies della tua app in pubspec.yaml (nella radice dell'albero dei sorgenti):

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

Quindi, passiamo a lib/main.dart , dove risiede il codice della nostra app.

Per prima cosa importiamo le cose di cui abbiamo bisogno. In questo caso, importeremo solo la normale libreria Flutter Material Design e il tema Yaru (useremo solo il tema della luce per questo esempio, quindi show solo quell'oggetto nel pacchetto Yaru):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

Invece di avere una classe app separata, chiameremo i costruttori MaterialApp direttamente in main quando runApp , quindi è qui che impostiamo il tema dell'app, che sarà il tema Yaru, più specificamente il tema leggero chiamato yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

La HomePage sarà uno StatefulWidget , contenente i dati che mostreremo dato che è immutabile (ricorda, i widget sono sempre immutabili, la mutabilità è gestita nello State di uno StatefulWidget ):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

HomePageState è il punto in cui definiamo l'interfaccia utente e il comportamento dell'app. Prima di tutto, diamo un'occhiata all'albero dei widget che vogliamo costruire (esclusi gli elementi dell'elenco e della griglia e i widget di spaziatura):

Limiteremo la Column a sinistra (quella che mostra i controlli per i widget da mostrare sul lato destro dell'app) a una certa larghezza (400 pixel per esempio) usando un Container , mentre il GridView a destra dovrebbe essere Expanded per riempire la vista.

Sul lato sinistro di Row (all'interno di Column ), ListView dovrebbe espandersi per riempire lo spazio verticale sotto la Row di pulsanti in alto. All'interno della Row in alto, dobbiamo anche espandere il TextButton (il pulsante di ripristino) per riempire lo spazio a destra del chevron sinistro e destro IconButton s.

L' HomePageState risultante che fa tutto ciò, insieme alla logica necessaria per mostrare le cose giuste a destra a seconda di ciò che l'utente seleziona a sinistra, è il seguente:

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

e abbiamo finito!

Quindi crei la tua app con

 flutter build ${OS_NAME}

dove ${OS_NAME} è il nome del tuo sistema operativo, lo stesso che hai usato in precedenza per abilitare lo sviluppo desktop Flutter usando flutter config .

Il binario compilato per eseguire la tua app sarà

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

su Linux e

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

su Windows, puoi eseguirlo e otterrai l'app che ti ho mostrato all'inizio di questa sezione.

Su macOS, devi aprire macos/Runner.xcworkspace in Xcode e quindi utilizzare Xcode per creare ed eseguire la tua app.

Altre modifiche al flutter

Ci sono state anche alcune modifiche che influiscono anche sullo sviluppo mobile con Flutter, e qui c'è solo una breve selezione di alcune di esse.

Una funzionalità che molti di noi, sviluppatori di Flutter, desideravano è un migliore supporto per gli annunci Admob e ora è finalmente inclusa nel pacchetto google_mobile_ads ufficiale. Un altro è autocomplete ; c'è un widget materiale Autocomplete per esso, così come un widget RawAutocomplete più personalizzabile.

L'aggiunta del Link di cui abbiamo parlato nella sezione sullo sviluppo web si applica effettivamente a tutte le piattaforme , anche se i suoi effetti saranno maggiormente avvertiti da chi lavora sui progetti web Flutter.

Recenti modifiche alla lingua di Dart

È importante essere consapevoli delle modifiche apportate al linguaggio Dart che influiscono sullo sviluppo dell'app Flutter.

In particolare, Dart 2.12 ha portato il supporto all'interoperabilità del linguaggio C (descritto in dettaglio e con istruzioni per le diverse piattaforme sul sito ufficiale di Flutter); inoltre, la null-safety suono è stata aggiunta al canale di rilascio Dart stabile.

null-safety

La modifica più grande che è stata apportata a Dart è l'introduzione della null-safety del suono che sta ottenendo sempre più supporto da pacchetti di terze parti, nonché librerie e pacchetti sviluppati da Google.

La sicurezza nulla offre ottimizzazioni del compilatore e riduce la possibilità di errori di runtime, quindi, anche se in questo momento è facoltativo supportarlo, è importante iniziare almeno a capire come rendere la tua app sicura per i valori nulli.

Al momento, tuttavia, questa potrebbe non essere un'opzione per te in quanto non tutti i pacchetti Pub sono completamente null-safe e ciò significa che se hai bisogno di uno di quei pacchetti per la tua app non sarai in grado di sfruttare i vantaggi su sicurezza nulla.

Rendere null-safe

Se hai mai lavorato con Kotlin, l'approccio di Dart alla sicurezza nulla ti sarà in qualche modo familiare. Dai un'occhiata alla guida ufficiale di Dart su di esso per una guida più completa alla null-safety di Dart.

Tutti i tipi con cui hai familiarità ( String , int , Object , List , le tue classi, ecc.) Ora non possono essere annullati: il loro valore non può mai essere null .

Ciò significa che una funzione che ha un tipo restituito non nullable deve sempre restituire un valore , altrimenti riceverai un errore di compilazione e dovrai sempre inizializzare variabili non nullable, a meno che non sia una variabile locale a cui viene assegnato un valore prima è mai usato.

Se vuoi che una variabile sia nullable, devi aggiungere un punto interrogativo alla fine del nome del tipo, ad esempio quando si dichiara un intero come questo:

 int? a = 1

In qualsiasi momento, puoi impostarlo su null e il compilatore non piangerà per questo.

Ora, cosa succede se si dispone di un valore nullable e lo si utilizza per qualcosa che richiede un valore non nullable? Per farlo, puoi semplicemente controllare che non sia nullo:

 void function(int? a) { if(a != null) { // a is an int here } }

Se sai con certezza al 100% che una variabile esiste e non è nulla, puoi semplicemente usare ! operatore, in questo modo:

 String unSafeCode(String? s) => s!;

Traendo conclusioni: cosa possiamo fare con Flutter 2?

Poiché Flutter continua a evolversi, ci sono sempre più cose che possiamo fare con esso, ma non è ancora ragionevole affermare che Flutter possa essere utilizzato per qualsiasi progetto di sviluppo di app di qualsiasi tipo.

Sul lato mobile, è improbabile che ti imbatti in qualcosa in cui Flutter non è eccezionale perché è stato supportato sin dall'inizio ed è stato perfezionato. La maggior parte delle cose di cui avrai bisogno sono già lì.

D'altra parte, Web e desktop non sono ancora del tutto disponibili.

Il desktop è ancora un po' difettoso e le app di Windows (che sono una parte importante dello sviluppo del desktop) richiedono ancora molto lavoro prima di avere un bell'aspetto. La situazione è migliore su Linux e macOS solo in una certa misura.

Il web è in un posto molto migliore del desktop . Puoi creare app Web decenti, ma sei ancora per lo più limitato alle applicazioni a pagina singola e alle app Web progressive. Non vogliamo ancora usarlo per app incentrate sui contenuti in cui sono necessari indicizzazione e SEO.

Le app incentrate sui contenuti probabilmente non saranno così eccezionali perché la selezione del testo non è ancora di prim'ordine, come abbiamo visto nella sezione sullo stato attuale di Flutter per il Web.

Se hai bisogno della versione web della tua app Flutter, però, Flutter per il web probabilmente andrà bene, soprattutto perché ci sono già un'enorme quantità di pacchetti compatibili con il web in giro e l'elenco è in continua crescita.

Risorse addizionali

• Keynote (Flutter Engage), YouTube
• Novità di Flutter 2, Flutter, Medium
• Comprendere null safety , Dart.dev
• Sviluppo Web e desktop reattivo con Flutter, Smashing Magazine
• Risolvere problemi comuni multipiattaforma quando si lavora con Flutter, Smashing Magazine