Noțiuni introductive cu pachetul GetX în aplicațiile Flutter

Flutter este una dintre cele mai rapide moduri de a construi aplicații native cu adevărat multiplatforme. Oferă funcții care permit dezvoltatorului să creeze o experiență de interfață cu adevărat frumoasă pentru utilizatorii lor.

Cu toate acestea, de cele mai multe ori pentru a realiza lucruri precum navigarea către ecrane, managementul de stat și alertele de afișare, sunt necesare o mulțime de planșe. Aceste standarde tind să încetinească eficiența dezvoltării dezvoltatorilor care încearcă să construiască funcții și să își îndeplinească termenele limită.

Luați, de exemplu, placa necesară pentru a naviga la un ecran într-o aplicație Flutter. Să presupunem că doriți să navigați la un ecran numit AboutScreen . va trebui sa scrii:

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

Ar fi mai eficient și mai ușor de dezvoltat pentru a face ceva de genul:

 Get.to(AboutScreen());

Când trebuie să navigați înapoi la pagina anterioară în Flutter, va trebui să scrieți:

 Navigator.pop(context);

Veți observa că depindem întotdeauna de proprietatea contextului pentru ceva la fel de banal precum navigarea între ecrane. Dacă, în schimb, putem face ceva de genul acesta:

 Get.back();

Exemplele de mai sus sunt câteva dintre modalitățile în care dezvoltarea aplicațiilor în Flutter poate fi îmbunătățită pentru a fi mai intuitivă și mai eficientă, cu mai puține standarde. Dacă preferați simplitatea și a fi eficient în construirea de funcții și idei, în Flutter, atunci pachetul Get vă va interesa.

Ce este GetX

Get sau GetX este un cadru rapid, stabil și foarte ușor pentru construirea de aplicații Flutter.

GetX este livrat din fabricație cu management al stării de înaltă performanță, injecție inteligentă a dependenței și management al rutei într-un mod simplist și practic.

GetX își propune să minimizeze standardele, oferind, de asemenea, o sintaxă simplă și intuitivă pentru ca dezvoltatorii să o utilizeze în timp ce își construiesc aplicațiile. La baza GetX sunt aceste 3 principii:

• Performanţă
  GetX se concentrează pe performanța aplicației dvs. prin implementarea caracteristicilor sale pentru a consuma cât mai puține resurse posibil.
• Productivitate
  GetX dorește ca dezvoltatorii să-și folosească funcțiile pentru a fi productivi cât mai repede posibil. Face acest lucru utilizând sintaxă și practici ușor de reținut. De exemplu, în general, dezvoltatorul ar trebui să fie preocupat să elimine controlerele din memorie, dar GetX of the box oferă un management inteligent care monitorizează controlerele din aplicația dvs. și le elimină atunci când nu sunt utilizate în mod implicit.
• Organizare
  GetX permite decuplarea Vizualizării, a logicii de prezentare, a logicii de afaceri, a injectării de dependențe și a navigării în aplicația dvs. Flutter. Nu aveți nevoie de context pentru a naviga între rute, așa că nu sunteți dependent de arborele widget pentru navigare. Nu aveți nevoie de context pentru a vă accesa controlerele/blocurile printr-un inheritedWidget , astfel încât să puteți decupla complet logica de prezentare și logica de afaceri de stratul de vizualizare. Nu trebuie să vă injectați clasele Controller/Modele/Blocs în arborele widget prin multifurnizori, deoarece acest GetX folosește propria sa funcție de injectare a dependenței, decuplând complet DI din vedere.

Caracteristicile GetX

GetX vine cu câteva funcții de care veți avea nevoie în dezvoltarea zilnică a aplicației în Flutter. Să ne uităm la ele:

Managementul Statului

Una dintre caracteristicile emblematice ale GetX este caracteristica intuitivă de gestionare a stării. Managementul de stat în GetX poate fi realizat cu puțină sau fără boilerplate.

Managementul rutei

GetX oferă API pentru navigarea în aplicația Flutter. Acest API este simplu și are nevoie de mai puțin cod.

Managementul Dependenței

GetX oferă o modalitate inteligentă de a gestiona dependențele din aplicația dvs. Flutter, cum ar fi controlerele de vizualizare. GetX va elimina orice controler care nu este utilizat în acest moment din memorie. Aceasta a fost o sarcină pe care, în calitate de dezvoltator, va trebui să o faceți manual, dar GetX face asta pentru dvs. automat din cutie.

Internaționalizarea

GetX oferă i18n din cutie, permițându-vă să scrieți aplicații cu suport pentru diverse limbi.

Validare

GetX oferă metode de validare pentru efectuarea validării intrărilor în aplicațiile dvs. Flutter. Acest lucru este destul de convenabil, deoarece nu ar fi nevoie să instalați un pachet de validare separat.

Depozitare

GetX oferă o valoare cheie-valoare rapidă, suplimentară și sincronă în memorie, care face copii de rezervă ale datelor pe disc la fiecare operațiune. Este scris în întregime în Dart și se integrează ușor cu pachetul de bază GetX.

Noțiuni introductive cu GetX

Acum că ați văzut ce este GetX și caracteristicile și beneficiile pe care le oferă, să vedem cum să îl configurați în aplicația dvs. Vom construi o aplicație demonstrativă pentru a vedea majoritatea caracteristicilor pe care le-am menționat în acțiune. Să începem.

Creați o nouă aplicație Flutter

Vom începe prin a crea o nouă aplicație Flutter prin Flutter CLI. Presupun că mașina dvs. este deja configurată pentru dezvoltarea aplicațiilor cu Flutter. Deci alergăm:

 flutter create getx_demo

Aceasta va genera codul de bază necesar pentru o aplicație Flutter. Apoi, deschideți proiectul pe care tocmai l-ați creat în editorul dorit (vom folosi VS Code pentru acest articol). Apoi vom rula proiectul pentru a ne asigura că funcționează bine (asigurați-vă că aveți fie un dispozitiv conectat, fie un emulator/simulator care rulează).

Când aplicația rulează, veți vedea aplicația de contor implicită pe care Flutter o oferă atunci când creați o nouă aplicație Flutter. Ceea ce vom face este să implementăm aceeași aplicație de contor, dar cu GetX pentru a gestiona starea aplicației (care este variabila de numărare).

Vom începe cu ștergerea main.dart și lăsând doar acest fragment de cod:

 # 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'), ); } }

Până acum, aplicația noastră ar fi fost defectă, deoarece nu mai există widget MyHomePage . Să reparăm asta. Cu GetX, nu avem nevoie de widget-uri cu state și, de asemenea, interfața noastră de utilizare poate fi separată clar de logica noastră de afaceri. Deci vom crea două directoare în interiorul lib/ . Aceste directoare sunt:

Să creăm un widget MyHomePage în interiorul views/ . Numele fișierului va fi my_home_page.dart . După ce îl creați, adăugați următorul fragment de cod la acesta:

 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), ), ); } }

Acum avem widget-ul MyHomePage , să-l importăm în main.dart . Adăugați declarația de import în partea de sus a main.dart sub import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

Acum fișierul main.dart ar trebui să arate astfel:

 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'), ); } }

Când salvați aplicația acum, toate erorile ar fi trebuit remediate și aplicația va rula. Dar veți observa când veți apăsa din nou butonul, contorul nu va fi actualizat. Dacă vă uitați la codul views/my_home_page.dart , veți vedea că doar codificăm 0 ca valoare a widget-ului Text și trecem null la handler-ul onPressed al butonului. Să introducem GetX în amestec pentru a face din nou aplicația funcțională.

Instalarea GetX

Mergeți la pagina de instalare pentru GetX pe pub.dev și veți vedea linia de cod de copiat pentru a fi plasată în fișierul dvs. pubspec.yml pentru a instala GetX. În momentul scrierii acestui articol, versiunea actuală a GetX este 3.23.1. Deci vom copia linia:

 get: ^3.23.1

Și apoi lipiți-l în secțiunea dependencies a fișierului nostru pubspec.yml . Când salvați fișierul, get ar trebui să fie instalat automat pentru dvs. Sau puteți rula manual în terminalul dvs.

 flutter pub get

Secțiunea de dependențe a fișierului dvs. pubspec.yml ar trebui să arate astfel:

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

Am menționat că GetX vă permite să separați interfața de utilizare a aplicației dvs. de logică. Face acest lucru furnizând o clasă GetxController pe care o puteți moșteni pentru a crea clase de controler pentru vizualizările aplicației dvs. Pentru aplicația noastră actuală, avem o singură vizualizare, așa că vom crea un controler pentru acea vizualizare. Mergeți la directorul controllers/ și creați un fișier numit my_home_page_controller.dart . Aceasta va menține controlerul pentru vizualizarea MyHomePage .

După ce ați creat fișierul, importați mai întâi pachetul GetX adăugând acesta în partea de sus a fișierului:

 import 'package:get/get.dart';

Apoi veți crea o clasă numită MyHomePageController în interiorul acesteia și veți extinde clasa GetxController . Iată cum ar trebui să arate fișierul:

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

haideți să adăugăm starea de numărare la clasa pe care am creat-o.

 final count = 0;

În GetX, pentru a face o variabilă observabilă - asta înseamnă că atunci când se schimbă, alte părți ale aplicației noastre, în funcție de aceasta, vor fi notificate. Pentru a face acest lucru trebuie pur și simplu să adăugăm .obs la inițializarea variabilei. Deci, pentru variabila noastră de count de mai sus, vom adăuga .obs la 0 . Deci, declarația de mai sus va arăta acum astfel:

 final count = 0.obs;

Acesta este modul în care arată fișierul nostru controler în acest moment:

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

Pentru a încheia lucrurile cu MyHomePageController vom implementa metoda de increment . Acesta este fragmentul pentru a face asta:

 increment() => count.value++;

Veți observa că trebuie să adăugăm .value la variabila de numărare pentru a o incrementa. Am făcut acest lucru deoarece adăugarea .obs la o variabilă o face o variabilă observabilă și pentru a obține valoarea unei variabile observabile, faceți acest lucru din proprietatea value .

Deci am terminat cu controlerul. Acum, când valoarea numărului se schimbă, orice parte a aplicației noastre care o folosește va fi actualizată automat.

Acum ne vom îndrepta către vizualizarea noastră și o vom anunța despre controlerul pe care tocmai l-am creat. Vom face acest lucru prin instanțierea clasei de controler folosind caracteristica de gestionare a dependențelor GetX. Acest lucru va asigura că controlerul nostru nu va fi în memorie atunci când nu mai este necesar.

În views/my_home_page.dart importați pachetul Get și, de asemenea, controlerul pe care l-ați creat astfel:

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

Apoi, în interiorul clasei MyHomePage vom instanția MyHomePageController :

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

Acum avem o instanță a MyHomePageController , putem folosi variabila de stare, precum și metoda. Deci, începând cu starea, în GetX pentru a marca o parte a interfeței de utilizare pentru a fi reconstruită atunci când o variabilă de stare se schimbă, veți încheia acea parte cu widget-ul Obx . GetX oferă alte modalități de a face acest lucru, dar această metodă este mult mai simplă și mai curată.

Pentru aplicația noastră de numărare, dorim ca widgetul Text să fie actualizat cu numărul curent. Deci, vom împacheta widget-ul Text cu widget-ul Obx astfel:

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

În continuare, vom înlocui șirul static 0 cu variabila count din MyHomePageController astfel:

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

În cele din urmă, vom apela metoda increment atunci când floatingActionButton este apăsat astfel:

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

Deci, în general, fișierul nostru de vizualizare MyHomePage ar trebui să arate acum astfel:

 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), ), ); } }

Când salvați aplicația sau o rulați din nou, aplicația de contor ar trebui să funcționeze ca atunci când am creat prima aplicație.

Cred că ați văzut cât de intuitivă este gestionarea stării cu GetX, nu a trebuit să scriem prea multe, iar această simplitate va fi mai evidentă pe măsură ce aplicația dvs. devine complexă. Veți observa, de asemenea, vizualizarea noastră nu deține sau menține nicio stare, așa că poate fi un widget fără stat. La rândul său, creierul vederii este acum o clasă de controler care va deține starea pentru vizualizare și metode.

Navigare în GetX

Am văzut managementul de stat în GetX. Să ne uităm acum la modul în care GetX acceptă Navigarea în cadrul aplicației dvs. Pentru a activa funcția de navigare a GetX, trebuie să faceți o singură modificare în main.dart și anume să transformați widgetul MaterialApp într-un widget GetMaterialApp . Să facem asta importând mai întâi Get în partea de sus a main.dart

 import 'package:get/get.dart';

Apoi facem modificarea în MaterialApp , astfel încât fișierul nostru main.dart să arate acum astfel:

 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'), ); } }

Acum aplicația noastră a fost configurată pentru a sprijini navigarea GetX. Pentru a testa acest lucru, vom crea o altă vizualizare în directorul views/ . Vom apela acest lucru pe about_page.dart și va conține următorul cod:

 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.', ), ), ], ), ), ); } }

Vom merge apoi la MyHomePage și vom adăuga un buton care, atunci când este apăsat, ne va naviga la AboutPage . Ca astfel. Butonul ar trebui să fie sub widget-ul Obx. Iată-l:

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

De asemenea, va trebui să importam pagina AboutPage deasupra fișierului MyHomePage :

 import './about_page.dart';

Pentru a-i spune lui GetX să navigheze la AboutPage , tot ce avem nevoie este o linie de cod care este:

 Get.to(AboutPage());

Să adăugăm asta la apelul onPressed al widget-ului FlatButton astfel:

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

Când salvați aplicația acum, veți putea naviga la pagina AboutPage .

De asemenea, puteți alege să înlocuiți vizualizarea MyHomePage cu AboutPage , astfel încât utilizatorul să nu poată naviga înapoi la pagina anterioară apăsând butonul înapoi a dispozitivului. Acest lucru este util pentru ecrane precum ecranele de conectare. Pentru a face acest lucru, înlocuiți conținutul handler- onPressed cu codul de mai jos:

 Get.off(AboutPage());

Aceasta va afișa vizualizarea MyHomePage și o va înlocui cu AboutPage .

Acum că putem naviga la AboutPage , cred că nu va fi atât de rău să ne putem întoarce la MyHomePage pentru a face acest lucru, vom adăuga un buton în AboutPage după widget-ul Padding și în handlerul său onPressed vom efectua un apel. la Get.back() pentru a naviga înapoi la MyHomePage :

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

Bar de zi

În Flutter, în mod convențional, pentru a afișa un Snackbar, va trebui să scrieți ceva de genul acesta:

 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);

Puteți observa că încă depindem de proprietatea context . Să vedem cum putem realiza acest lucru în GetX. Accesați vizualizarea MyHomePage și adăugați un alt widget FlatButton sub ultimul buton pe care l-am adăugat. Iată fragmentul pentru buton:

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

Să afișăm mesajul „Yay! Minunat GetX Snackbar'. În interiorul funcției de gestionare onPressed, adăugați linia de cod de mai jos:

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

Rulați aplicația și când faceți clic pe „Butonul Afișați Snackbar” veți vedea un snackbar în partea de sus a aplicației dvs.!

Vedeți cum am redus numărul de linii necesare pentru a afișa un snackbar într-o aplicație Flutter? Să facem mai multe personalizări pe Snackbar; Să-l facem să apară în partea de jos a aplicației. Schimbați codul în acesta:

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

Salvați și rulați aplicația, iar Snackbar va apărea acum în partea de jos a aplicației. Ce zici să schimbăm culoarea de fundal a Snackbar-ului, deoarece este în acest moment transparent. O vom schimba într-o culoare amberAccent din clasa Colors din Flutter. Actualizați codul la acesta:

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

În general, codul butonului ar trebui să arate astfel:

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

Dialog

GetX oferă o metodă simplă pentru a crea AlertDialog în Flutter. Să-l vedem în acțiune. Creați un alt buton sub cel anterior:

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

Să sunăm pe GetX pentru a afișa un dialog de alertă:

 Get.defaultDialog();

Aceasta va afișa un dialog implicit de alertă care poate fi respins prin atingerea în afara casei de dialog. Puteți vedea cum într-o linie de cod avem un dialog de alertă funcțional. Să o personalizăm puțin. Să schimbăm titlul și mesajul:

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

Salvați și rulați aplicația și veți vedea modificările atunci când apăsați butonul „Afișați Dialog de alertă”. Putem adăuga butoane de confirmare și anulare astfel:

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

Există o mulțime de moduri de a personaliza dialogul GetX, iar API-ul este destul de intuitiv și simplu.

Concluzie

GetX a fost creat pentru a îmbunătăți productivitatea dezvoltatorilor Flutter pe măsură ce ei dezvoltă funcții. În loc să fie nevoit să caute boilerplate necesare pentru a face lucruri precum managementul stării, managementul navigației și multe altele, GetX oferă un API intuitiv simplu pentru a realiza aceste activități fără a sacrifica performanța. Acest articol vă prezintă GetX și cum să începeți să îl utilizați în aplicațiile dvs. Flutter.

• Puteți găsi demo aici →