Introduzione al pacchetto GetX nelle applicazioni Flutter

Flutter è uno dei modi più veloci per creare applicazioni native veramente multipiattaforma. Fornisce funzionalità che consentono allo sviluppatore di creare un'esperienza dell'interfaccia utente davvero bella per i propri utenti.

Tuttavia, la maggior parte delle volte per ottenere cose come la navigazione su schermate, la gestione dello stato e gli avvisi di visualizzazione, sono necessari molti standard. Questi standard tendono a rallentare l'efficienza di sviluppo degli sviluppatori che cercano di creare funzionalità e rispettare le scadenze.

Prendi ad esempio il boilerplate necessario per passare a una schermata in un'applicazione Flutter. Supponiamo che tu voglia passare a una schermata chiamata AboutScreen . dovrai scrivere:

 Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );

Sarebbe più efficiente e adatto agli sviluppatori fare qualcosa come:

 Get.to(AboutScreen());

Quando dovrai tornare alla pagina precedente in Flutter dovrai scrivere:

 Navigator.pop(context);

Noterai che dipendiamo sempre dalla proprietà del contesto per qualcosa di così comune come la navigazione tra le schermate. E se invece potessimo fare qualcosa del genere:

 Get.back();

Gli esempi precedenti sono alcuni dei modi in cui lo sviluppo di applicazioni in Flutter può essere migliorato per essere più intuitivo ed efficiente con meno standard. Se prediligi la semplicità e l'efficienza nello sviluppo di funzionalità e idee, in Flutter il pacchetto Get ti interesserà.

Cos'è GetX

Get o GetX è un framework veloce, stabile e ultraleggero per la creazione di applicazioni Flutter.

GetX viene fornito pronto all'uso con gestione dello stato ad alte prestazioni, iniezione intelligente delle dipendenze e gestione del percorso in modo semplicistico e pratico.

GetX mira a ridurre al minimo gli standard fornendo allo stesso tempo una sintassi semplice e intuitiva che gli sviluppatori possono utilizzare durante la creazione delle loro applicazioni. Alla base di GetX ci sono questi 3 principi:

• Prestazione
  GetX si concentra sulle prestazioni della tua applicazione implementandone le funzionalità per consumare il minor numero di risorse possibile.
• Produttività
  GetX vuole che gli sviluppatori utilizzino le sue funzionalità per essere produttivi il più rapidamente possibile. Lo fa impiegando sintassi e pratiche facili da ricordare. Ad esempio, in genere, lo sviluppatore dovrebbe preoccuparsi di rimuovere i controller dalla memoria, ma GetX offre una gestione intelligente che monitora i controller nell'applicazione e li rimuove quando non vengono utilizzati per impostazione predefinita.
• Organizzazione
  GetX consente il disaccoppiamento della visualizzazione, della logica di presentazione, della logica aziendale, dell'inserimento delle dipendenze e della navigazione nell'applicazione Flutter. Non è necessario il contesto per navigare tra i percorsi, quindi non dipendi dall'albero dei widget per la navigazione. Non hai bisogno del contesto per accedere ai tuoi controller/blocchi tramite un inheritedWidget , quindi puoi disaccoppiare completamente la logica di presentazione e la logica aziendale dal tuo livello di visualizzazione. Non è necessario iniettare le classi Controllers/Models/Blocs nell'albero dei widget tramite multiprovider, poiché questo GetX utilizza la propria funzione di iniezione delle dipendenze, disaccoppiando completamente la DI dalla sua vista.

Caratteristiche di GetX

GetX viene fornito con un paio di funzionalità di cui avrai bisogno nello sviluppo quotidiano di app in Flutter. Diamo un'occhiata a loro:

Gestione dello Stato

Una delle funzionalità di punta di GetX è la sua funzionalità intuitiva di gestione dello stato. La gestione dello stato in GetX può essere ottenuta con poca o nessuna standardizzazione.

Gestione del percorso

GetX fornisce l'API per la navigazione all'interno dell'applicazione Flutter. Questa API è semplice e richiede meno codice.

Gestione delle dipendenze

GetX fornisce un modo intelligente per gestire le dipendenze nell'applicazione Flutter come i controller di visualizzazione. GetX rimuoverà dalla memoria qualsiasi controller non utilizzato al momento. Questo è stato un compito che tu come sviluppatore dovrai svolgere manualmente, ma GetX lo fa automaticamente per te.

Internazionalizzazione

GetX fornisce i18n pronto all'uso che ti consente di scrivere applicazioni con supporto per varie lingue.

Convalida

GetX fornisce metodi di convalida per eseguire la convalida dell'input nelle applicazioni Flutter. Questo è abbastanza conveniente in quanto non è necessario installare un pacchetto di convalida separato.

Conservazione

GetX fornisce un valore-chiave veloce, extra leggero e sincrono in memoria, che esegue il backup dei dati su disco ad ogni operazione. È scritto interamente in Dart e si integra facilmente con il pacchetto principale di GetX.

Iniziare con GetX

Ora che hai visto cos'è GetX e le funzionalità e i vantaggi che offre, vediamo come configurarlo nella tua applicazione. Creeremo un'app demo per vedere la maggior parte delle funzionalità che abbiamo menzionato in azione. Iniziamo.

Crea una nuovissima applicazione Flutter

Inizieremo creando una nuovissima applicazione Flutter tramite Flutter CLI. Presumo che la tua macchina sia già configurata per lo sviluppo di applicazioni con Flutter. Quindi corriamo:

 flutter create getx_demo

Questo genererà il codice di base necessario per un'applicazione Flutter. Quindi, apri il progetto che hai appena creato nell'editor di tua scelta (usare VS Code per questo articolo). Quindi eseguiremo il progetto per assicurarci che funzioni correttamente (assicurati di avere un dispositivo collegato o un emulatore/simulatore in esecuzione).

Quando l'applicazione viene eseguita, vedrai l'applicazione contatore predefinita che Flutter impalca per te quando crei una nuova applicazione Flutter. Quello che faremo è implementare la stessa applicazione contatore ma con GetX per gestire lo stato dell'app (che è la variabile di conteggio).

Inizieremo cancellando main.dart e lasciando solo questo frammento di codice:

 # main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Ormai la nostra applicazione sarebbe stata interrotta poiché non esiste più il widget MyHomePage . Risolviamolo. Con GetX, non abbiamo bisogno di widget con stato e anche la nostra interfaccia utente può essere chiaramente separata dalla nostra logica di business. Quindi creeremo due directory all'interno di lib/ . Queste directory sono:

Creiamo il widget MyHomePage all'interno delle views/ . Il nome del file sarà my_home_page.dart . Dopo averlo creato, aggiungi il seguente snippet di codice:

 import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Ora abbiamo il widget MyHomePage , importiamolo in main.dart . Aggiungi la dichiarazione import all'inizio di main.dart sotto import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

Ora il tuo file main.dart dovrebbe assomigliare a questo:

 import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Quando salvi l'applicazione ora, tutti gli errori dovrebbero essere stati corretti e l'app verrà eseguita. Ma noterai quando fai nuovamente clic sul pulsante, il contatore non verrà aggiornato. Se guardi il codice views/my_home_page.dart , vedrai che stiamo solo codificando 0 come valore del widget Text e passando null al gestore onPressed del pulsante. Introduciamo GetX nel mix per ripristinare la funzionalità dell'applicazione.

Installazione di GetX

Vai alla pagina di installazione di GetX su pub.dev e vedrai la riga di codice da copiare da inserire nel tuo file pubspec.yml per installare GetX. Al momento della stesura di questo articolo, la versione corrente di GetX è 3.23.1. Quindi copieremo la riga:

 get: ^3.23.1

E poi incollalo nella sezione delle dependencies del nostro file pubspec.yml . Quando salvi il file, get dovrebbe essere installato automaticamente per te. Oppure puoi eseguire manualmente nel tuo terminale.

 flutter pub get

La sezione delle dipendenze del tuo file pubspec.yml dovrebbe assomigliare a questa:

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

Abbiamo accennato al fatto che GetX ti consente di separare l'interfaccia utente della tua applicazione dalla logica. Lo fa fornendo una classe GetxController che puoi ereditare per creare classi controller per le viste della tua applicazione. Per la nostra app attuale, abbiamo una vista, quindi creeremo un controller per quella vista. Vai alla directory controllers/ e crea un file chiamato my_home_page_controller.dart . Questo manterrà il controller per la visualizzazione MyHomePage .

Dopo aver creato il file, importa prima il pacchetto GetX aggiungendo questo nella parte superiore del file:

 import 'package:get/get.dart';

Quindi creerai una classe chiamata MyHomePageController al suo interno ed estenderai la classe GetxController . Ecco come dovrebbe apparire il file:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController {}

aggiungiamo lo stato di conteggio alla classe che abbiamo creato.

 final count = 0;

In GetX, per rendere osservabile una variabile, ciò significa che quando cambia, altre parti della nostra applicazione a seconda di essa verranno notificate. Per fare ciò dobbiamo semplicemente aggiungere .obs all'inizializzazione della variabile. Quindi, per la nostra variabile di count sopra, aggiungeremo .obs a 0 . Quindi la dichiarazione di cui sopra ora sarà simile a questa:

 final count = 0.obs;

Ecco come appare al momento il nostro file controller:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; }

Per concludere le cose con MyHomePageController implementeremo il metodo di increment . Questo è lo snippet per farlo:

 increment() => count.value++;

Noterai che dovevamo aggiungere .value alla variabile count per incrementarla. L'abbiamo fatto perché l'aggiunta di .obs a una variabile la rende una variabile osservabile e per ottenere il valore di una variabile osservabile, lo si fa dalla proprietà value .

Quindi abbiamo finito con il controller. Ora, quando il valore del conteggio cambia, qualsiasi parte della nostra applicazione che lo utilizza verrà aggiornata automaticamente.

Ora andremo alla nostra vista e gli faremo sapere del controller che abbiamo appena creato. Lo faremo istanziando la classe controller usando la funzione di gestione delle dipendenze di GetX. Ciò garantirà che il nostro controller non sia in memoria quando non è più necessario.

In views/my_home_page.dart importa il pacchetto Get e anche il controller che hai creato in questo modo:

 import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

Quindi all'interno della classe MyHomePage istanziare il MyHomePageController :

 final MyHomePageController controller = Get.put(MyHomePageController());

Ora abbiamo un'istanza di MyHomePageController , possiamo usare la variabile di stato così come il metodo. Quindi, a partire dallo stato, in GetX per contrassegnare una parte dell'interfaccia utente da ricostruire quando una variabile di stato cambia, avvolgerai quella parte con il widget Obx . GetX fornisce altri modi per farlo, ma questo metodo è molto più semplice e pulito.

Per la nostra applicazione di conteggio, vogliamo che il widget Testo venga aggiornato con il conteggio corrente. Quindi avvolgeremo il widget di testo con il widget Obx in questo modo:

 Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

Successivamente, sostituiremo la stringa statica 0 con la variabile count da MyHomePageController in questo modo:

 Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

Infine, chiameremo il metodo di incremento quando il floatingActionButton viene premuto in questo modo:

 floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

Quindi, nel complesso, il nostro file di visualizzazione MyHomePage ora dovrebbe assomigliare a questo:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Quando salvi l'applicazione o la esegui nuovamente, l'app contatore dovrebbe funzionare come quando abbiamo creato l'applicazione per la prima volta.

Credo che tu abbia visto quanto sia intuitiva la gestione dello stato con GetX, non abbiamo dovuto scrivere molto standard e questa semplicità sarà più ovvia man mano che la tua applicazione diventa complessa. Noterai anche che la nostra vista non mantiene o mantiene alcuno stato, quindi può essere un widget senza stato. Il cervello della vista a sua volta è ora una classe controller che manterrà lo stato per la vista e i metodi.

Navigazione in GetX

Abbiamo visto la gestione dello stato in GetX. Diamo ora un'occhiata a come GetX supporta la navigazione all'interno della tua applicazione. Per attivare la funzione di navigazione di GetX, devi solo apportare una modifica in main.dart che è trasformare il widget MaterialApp in un widget GetMaterialApp . Facciamolo importando prima Get nella parte superiore di main.dart

 import 'package:get/get.dart';

Quindi apportiamo la modifica a MaterialApp in modo che il nostro file main.dart ora assomigli a questo:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Ora la nostra app è stata configurata per supportare la navigazione GetX. Per testarlo creeremo un'altra vista nella directory views/ . Lo chiameremo about_page.dart e conterrà il seguente codice:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } }

Andremo quindi su MyHomePage e aggiungeremo un pulsante che, se premuto, ci porterà alla AboutPage . Così. Il pulsante dovrebbe essere sotto il widget Obx. Ecco qui:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

Dovremo anche importare AboutPage in cima al file MyHomePage :

 import './about_page.dart';

Per dire a GetX di passare a AboutPage tutto ciò di cui abbiamo bisogno è una riga di codice che è:

 Get.to(AboutPage());

Aggiungiamolo alla richiamata onPressed del widget FlatButton in questo modo:

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

Quando salvi la tua applicazione ora, sarai ora in grado di passare alla AboutPage .

Puoi anche scegliere di sostituire la visualizzazione MyHomePage con AboutPage in modo che l'utente non possa tornare alla pagina precedente premendo il pulsante Indietro del dispositivo. Questo è utile per schermate come le schermate di accesso. Per fare ciò, sostituire il contenuto del gestore onPressed con il codice seguente:

 Get.off(AboutPage());

Questo aprirà la vista MyHomePage e la sostituirà con AboutPage .

Ora che possiamo navigare su AboutPage , penso che non sarà così male poter tornare a MyHomePage per farlo aggiungeremo un pulsante in AboutPage dopo il widget Padding e nel suo gestore onPressed faremo una chiamata a Get.back() per tornare alla MyHomePage :

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )

Snack bar

In Flutter convenzionalmente per mostrare uno Snackbar, dovrai scrivere qualcosa del genere:

 final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

Puoi osservare che dipendiamo ancora dalla proprietà del context . Vediamo come possiamo raggiungere questo obiettivo in GetX. Vai nella vista MyHomePage e aggiungi un altro widget FlatButton sotto l'ultimo pulsante che abbiamo aggiunto. Ecco lo snippet del pulsante:

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

Mostriamo il messaggio 'Yay! Fantastico Snackbar GetX'. All'interno della funzione del gestore onPressed aggiungi la seguente riga di codice:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

Esegui la tua applicazione e quando fai clic sul pulsante "Mostra Snackbar" vedrai uno snackbar in cima alla tua applicazione!

Vedi come abbiamo ridotto il numero di righe necessarie per mostrare uno snack bar in un'applicazione Flutter? Facciamo qualche personalizzazione in più sulla Snackbar; Facciamolo apparire nella parte inferiore dell'app. Cambia il codice in questo:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

Salva ed esegui la tua applicazione e la Snackbar apparirà nella parte inferiore dell'applicazione. Che ne dici di cambiare il colore di sfondo della Snackbar in quanto al momento è trasparente. Lo cambieremo in un colore amberAccent dalla classe Colors in Flutter. Aggiorna il codice a questo:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

Nel complesso, il codice del pulsante dovrebbe assomigliare a questo:

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

Dialogo

GetX fornisce un metodo semplice per creare AlertDialog in Flutter. Vediamolo in azione. Crea un altro pulsante sotto il precedente:

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

Chiamiamo GetX per visualizzare una finestra di avviso:

 Get.defaultDialog();

Ciò mostrerà una finestra di dialogo di avviso predefinita che può essere ignorata toccando all'esterno della finestra di dialogo. Puoi vedere come in una riga di codice abbiamo una finestra di avviso funzionante. Personalizziamolo un po'. Cambiamo il titolo e il messaggio:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

Salva ed esegui la tua app e vedrai le modifiche quando premi il pulsante "Mostra finestra di dialogo di avviso". Possiamo aggiungere i pulsanti di conferma e Annulla in questo modo:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

Esistono molti modi per personalizzare la finestra di dialogo GetX e l'API è abbastanza intuitiva e semplice.

Conclusione

GetX è stato creato per migliorare la produttività degli sviluppatori Flutter mentre creano funzionalità. Invece di dover cercare il boilerplate necessario per eseguire operazioni come la gestione dello stato, la gestione della navigazione e altro, GetX fornisce un'API semplice e intuitiva per realizzare queste attività senza sacrificare le prestazioni. Questo articolo ti presenta GetX e come iniziare a usarlo nelle tue applicazioni Flutter.

• Puoi trovare la demo qui →