Kompletny przewodnik po zarządzaniu stanem GetX we Flutterze — blog LogRocket (2023)

Co się stanie, gdy wciśniesz przycisk na centralce w swoim domu?

Zasadniczo zmieniasz stan przycisku z wyłączonego na włączony lub odwrotnie. To wyzwala elektryczność, która albo włącza żarówkę, albo ją wyłącza.

Źródło:obrazy animowane.org

Myśl z punktu widzenia programisty. Gdy żarówka się włącza, interfejs żarówki zmienia się ze stanu niepodświetlonego na stan podświetlony. Chociaż fizycznie nie widzimy, aby żarówka była odtwarzana lub przebudowywana, interfejs użytkownika zostałby zbudowany od podstaw, gdyby taka była sytuacja w oprogramowaniu mobilnym z reaktywnym zarządzaniem stanem.

Jeśli pochodzisz z frameworka Android lub iOS, musisz zacząć myśleć o tworzeniu aplikacji mobilnych z zupełnie nowej perspektywy. Android i iOS to imperatywne frameworki. Z drugiej strony Flutter jest strukturą deklaratywną. Oznacza to, że można budować interfejs użytkownika od podstaw zamiast modyfikować niewielką jego część, ponieważ Flutter skutecznie odbudowuje interfejs użytkownika, gdy widżet zmienia swój stan.

Deklaratywny styl programowania interfejsu użytkownika ma swoje zalety; raz piszesz kod dowolnego UI i opisujesz, jak powinien wyglądać w dowolnym stanie, i to wszystko! Jednak gdy zagłębisz się w programowanie Fluttera, będą chwile, kiedy będziesz musiał udostępniać swoje dane i stan między ekranami w całej aplikacji. Wtedy będziesz potrzebować doskonałej biblioteki zarządzania stanem, która pomoże Ci szybko i wydajnie tworzyć aplikacje.

Zarządzanie stanem jest złożonym tematem dyskusji we Flutterze. Jednak wiele bibliotek zarządzania stanem, takich jakDostawca, są dostępne, co zaleca większość programistów.

Ale…

Dzisiaj omówimy uproszczone rozwiązanie do zarządzania stanem do tworzenia aplikacji Flutter, które nie wymaga kontekstu dla większości swoich funkcji, znane jako GetX.

• Co to jest GetX?
• Trzy filary GetX
• Funkcje o wartości dodanej GetX
• Zacznijmy od zarządzania stanem GetX
  • Alternatywna metoda
  • Proste zarządzanie stanem
• Inne funkcje GetX

Co to jest GetX?

GetX to nie tylko biblioteka zarządzania stanem, ale mikroframework połączony z zarządzaniem trasami i wstrzykiwaniem zależności. Ma na celu zapewnienie najwyższej jakości środowiska programistycznego w wyjątkowo lekkim, ale potężnym rozwiązaniu dla Flutter. GetX ma trzy podstawowe zasady, na których jest zbudowany:

1. Wydajność: skoncentrowana na minimalnym zużyciu pamięci i zasobów
2. Produktywność: intuicyjne i wydajne narzędzie w połączeniu z prostotą i prostą składnią, które ostatecznie oszczędza czas programowania
3. Organizacja: oddzielenie logiki biznesowej od logiki widoku i prezentacji nie może być lepsze niż to. Nie potrzebujesz kontekstu, aby nawigować między trasami, ani stanowych widżetów

Trzy filary GetX

1. Zarządzanie stanem: GetX ma dwóch menedżerów stanu. Jednym z nich jest prosty menedżer stanu używany zGetBuilderfunkcja, a druga to reaktywny menedżer stanu używany zGetxLubDziękuję. Omówimy to szczegółowo poniżej
2. Zarządzanie trasą: czy nawigacja między ekranami, wyświetlanieBary z przekąskami, wyskakujące okna dialogowe lub dodawanie dolnych arkuszy bez użyciakontekst, GetX Cię obejmuje. Nie będę pisać szczegółów na temat zarządzania trasami, ponieważ wykracza to poza zakres tego artykułu, ale rzeczywiście kilka przykładów, aby zorientować się, jak działa prostota składni GetX
3. Zarządzanie zależnościami: GetX ma proste, ale wydajne rozwiązanie do zarządzania zależnościami za pomocą kontrolerów. Za pomocą tylko jednego wiersza kodu można uzyskać do niego dostęp z poziomu widoku bez użycia odziedziczonego widżetu lub kontekstu. Zazwyczaj tworzysz instancję klasy w klasie, ale w GetX tworzysz instancję za pomocąDostawaćinstancja, która będzie dostępna w całej aplikacji

Funkcje o wartości dodanej GetX

GetX ma kilka świetnych funkcji od razu po wyjęciu z pudełka, dzięki czemu tworzenie aplikacji mobilnych we Flutterze jest jeszcze łatwiejsze bez żadnego standardowego kodu:

1. Internacjonalizacja: tłumaczenia z mapami klucz-wartość, obsługa różnych języków, używanie tłumaczeń z liczbą pojedynczą, mnogą i parametrami. Zmiana ustawień regionalnych aplikacji przy użyciu tylkoDostawaćsłowo w całej aplikacji
2. Walidacja: walidacja adresu e-mail i hasła jest również objęta usługą GetX. Teraz nie musisz instalować osobnego pakietu weryfikacyjnego
3. Przechowywanie: GetX zapewnia również szybkie i bardzo lekkie synchroniczne tworzenie kopii zapasowych pamięci klucz-wartość danych w całości zapisanych w Dart, które łatwo integruje się z podstawowym pakietem GetX
4. Motywy: przełączanie między jasnymi i ciemnymi motywami jest proste dzięki GetX
5. Responsywny widok: jeśli tworzysz aplikację dla różnych rozmiarów ekranu, po prostu musisz ją rozszerzyćGetView, i możesz szybko opracować swój interfejs, który będzie responsywny dla komputerów stacjonarnych, tabletów, telefonów i zegarków

Zacznijmy od zarządzania stanem GetX

Zrobię to krok po kroku, co zawsze lubię robić, i postaram się być opisowy i wyjaśnić proces tak szczegółowo, jak to możliwe.

Krok 1: Utwórz nową aplikację

Utwórz zupełnie nową aplikację w preferowanym środowisku IDE. Najpierw usuń wszystkie początkowe komentarze, wybierając opcję znajdź i zamień w plikuEdytowaćmenu i wpisz to:\/\/.*. Spowoduje to zaznaczenie komentarzy Fluttera w kodzie startowym i możesz po prostu nacisnąć przycisk usuwania.

Krok 2: Dodaj wymagane zależności

Dodaj te zależności w swoimpubspec.yamlplik:

get: ^4.6.1 //YAMLget_storage: ^2.0.3 //YAML

Uruchom to polecenie:

trzepoczący pub pobierz // YAML

Zanim przejdę do kroku 3, pozwól mi wyjaśnić, co tutaj robimy. Stworzyłem małą aplikację demonstrującą podstawowe funkcjonalności GetX. Aplikacja dotyczy sklepu, w którym użytkownik może:

1. zmienić nazwę sklepu
2. dodaj nazwy obserwujących
3. dodaj liczbę obserwujących
4. zmienić status sklepu z otwartego na zamknięty i odwrotnie
5. dodaj recenzje do sklepu
6. zmień motyw sklepu z jasnego na ciemny

Wszystko powyższe wyjaśnizarządzanie państwem, zarządzanie zależnościami, zarządzanie trasami, przechowywanie i motywy.

Tutaj bardziej koncentrujemy się na zarządzaniu stanem i zależnościami. Trasa, pamięć i motywy służą wyłącznie estetyce aplikacji.

Możesz czytać razem iprzetestuj aplikację za pomocą tego linku.

Krok 3: Zaktualizuj plikAplikacja materiałowaWidżet

Po dodaniu zależności pierwszą rzeczą, którą musisz zrobić, to zmienić plikAplikacja materiałowawidżet doGetMaterialAppw Twoimrzutka głównaplik. Daje to dostęp do wszystkich właściwości GetX w całej aplikacji.

Krok 4: Dodaj kontroler GetX

Ustaliliśmy już, że GetX oddziela interfejs użytkownika od logiki biznesowej. Tutaj do gry wkracza GetX Controller.

Zawsze możesz utworzyć więcej niż jeden kontroler w swojej aplikacji. Klasa kontrolera GetX kontroluje stan interfejsu użytkownika, gdy dołączasz do niego pojedynczy widżetObserwatortak, że odbudowuje się tylko wtedy, gdy następuje zmiana stanu tego konkretnego widżetu.

Dodajemy nowy plik Dart, aby utworzyć naszą klasę kontrolera,StoreController, która rozciąga sięGetxController:

klasa StoreController rozszerza GetxController {}

Następnie dodajemy kilka zmiennych i inicjalizujemy je wartościami domyślnymi.

Zwykle dodalibyśmy te zmienne w następujący sposób:

final storeName = 'Gęsty potrząśnięcie';

Ale kiedy używamy GetX, musimy sprawić, by zmienne były obserwowalne przez dodanieobsna końcu wartości. Następnie, gdy zmienna ulegnie zmianie, inne części aplikacji, które są od niej zależne, zostaną o tym powiadomione. Więc teraz nasza zainicjowana wartość będzie wyglądać tak:

final storeName = 'Gruby potrząśnięcie'.obs;

Pozostałe zmienne są podane poniżej:

// Ciąg do zmiany nazwy sklepu final storeName = 'Thick Shake'.obs;// int do zwiększenia liczby obserwujących final followerCount = 0.obs;// bool do wyświetlenia statusu sklepu open lub closefinal storeStatus = true.obs; // Lista nazw obserwujących sklep final followerList = [].obs;// Mapa nazw i ich recenzji dla Storefinal review = [].obs;// kontrolery edycji tekstu final storeNameEditingController = TextEditingController();final reviewEditingController = TextEditingController();final followerController = TextEditingController();final reviewNameController = TextEditingController();

Następnie tworzymy trzy metody zmiany nazwy, zwiększenia liczby obserwujących oraz zmiany statusu sklepu:

updateStoreName(Nazwa Ciągu) { storeName(name);}updateFollowerCount() { followerCount(followerCount.value + 1);} unieważnić storeStatus(bool isOpen) { storeStatus(is Open);}

Krok 5: Wstrzyknięcie zależności

W kategoriach laika dodajemykontrolerclass, którą właśnie utworzyliśmy, do naszegopoglądklasa. Istnieją trzy sposoby tworzenia instancji.

1. Rozciągnięcie całościpoglądklasa zGetViewi wstrzykując naszeStoreControllerz tym:

   klasa Home rozszerza GetView{}

2. Tworzenie instancjisklepKontrolerlubię to:

   final storeController = Get.put(StoreContoller())

3. W przypadku opcji trzeciej zacznij od utworzenia nowegoStoreBindingklasa i implementacjaWiązania. Wewnątrz jego domyślnych zależności musiszleniwyPuttheStoreControllerużywającGet.lazyPut(). Po drugie, musisz dodać klasę wiążącą wewnątrz plikupoczątkowe wiązanienieruchomość wGetMaterialWidget.

W końcu zamiastGet.Putjak wspomniano powyżej, teraz możesz użyćPobierz.znajdźa GetX znajdzie dla ciebie kontroler, gdy utworzysz instancję w dowolnej ze swoich klas:

klasa StoreBinding implementuje powiązania {// domyślna zależność @override void dependencies() { Get.lazyPut(() => StoreController(); }}

@overrideWidget build (kontekst BuildContext) { return GetMaterialApp (debugShowCheckedModeBanner: false, tytuł: „GetX Store”, initialBinding: StoreBinding (),}

class UpdateStoreName extends StatelessWidget { UpdateStoreName({Key? key}): super(key: key);//Getx znajdzie twój kontroler. final storeController = Get.find();

W projekcie jest dużo kodu i plików Dart. Piszę tylko o trzech metodach, które wymieniłem powyżej. Reszta kodu będzie dostępna na Git. Link zostanie podany na końcu tego artykułu. Po drugie, ty też możeszwypróbuj aplikację za pośrednictwem łącza internetowego.

Krok 6: Utwórz instancję kontrolera

Ponieważ rozszerzyliśmy nasząDomzobacz zGetViewi utworzył klasę wiążącą doleniwyPutnasz kontroler w nim, którego teraz użyjemyPobierz.znajdźaby utworzyć instancję naszego kontrolera w naszych klasach.

Najpierw dodajemy nowy bezstanowy widżet,Aktualizuj nazwę magazynu. Utwórz instancję naszegokontrolertaka klasa:

final storeController = Get.find();

RoundedInput(hintText: "Store Name", kontroler: storeController.storeNameEditingController,),const SizedBox(height: 20),ElevatedButton( onPressed: () { storeController.updateStoreName( storeController.storeNameEditingController.text); Get.snackbar( 'Zaktualizowany' , 'Nazwa sklepu została zaktualizowana na ''${storeController.storeNameEditingController.text}', snackPosition: SnackPosition.BOTTOM); }, child: const Padding( dopełnienie: EdgeInsets.all(10.0), child: Text('Update' , styl: TextStyle(rozmiar czcionki: 20,0), ), ),

Pozwól, że wyjaśnię powyższy kod:Zaokrąglone wejściejest po prostu zwyczajemPole tekstowe, i dodajemy aTextEditingControllerdlaPole tekstoweza pomocą naszegosklepKontroler. Dzwonimy również doaktualizacjaStoreName()metoda w ten sam sposób wewnątrz plikuwciśniętyzPrzycisk Podwyższony. A potem pokazujemy aBatonikjako potwierdzenie, że nazwa sklepu została zaktualizowana.

Poniżej kod doDodaj liczbę obserwującychIStan magazynu. Ponownie oba są bezstanowymi widżetami, a metoda implementacjisklepKontrolera wywołanie naszego kontrolera jest podobne:

class AddFollowerCount extends StatelessWidget { AddFollowerCount({Klucz? klucz}): super(klucz: klucz); final storeController = Get.find(); @override Widget build(BuildContextcontext) { return Scaffold( appBar: AppBar(title: const Text("Dodaj liczbę obserwujących")), floatActionButton: FloatingActionButton( onPressed: () {storeController.updateFollowerCount(); }, child: const Icon (Icons.add), ), body: Container( padding: const EdgeInsets.all(24), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text („Dodałeś tylu obserwujących do Twój sklep”, textAlign: TextAlign.center, style: TextStyle(fontSize: 28), ), const SizedBox( height: 40.0, ), Obx( () => Text( storeController.followerCount.value.toString(), style: const TextStyle(rozmiar czcionki: 48), ), ) ], ), ), ); }}

klasa StoreStatus extends StatelessWidget { StoreStatus({Klucz? klucz}): super(klucz: klucz); //final storeController = Get.put(StoreController()); final storeController = Get.find(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("Test Status Toggle")), body: Container( padding: const EdgeInsets.all(24), child: Center( child: Column ( mainAxisAlignment: MainAxisAlignment.center, dzieci: [ const Text("Czy sklep jest otwarty?", style: TextStyle(fontSize: 22), ), const SizedBox(height: 16), Obx( () => Switch( onChanged: (wartość) => storeController.storeStatus(value), activeColor: Colors.green, value: storeController.storeStatus.value, ), ) ], ), ), ), ); }}

Krok 7:DziękujęWidżet (obserwator)

Przejdźmy teraz do części, w której wprowadzona wartość nazwy naszego sklepu, zwiększona liczba obserwujących i status sklepu zostaną pokazane za pomocą naszegosklepKontroler.

NaszDomwidok jest rozszerzony oGetView, więc nie musimy tworzyć instancji naszegosklepKontrolerTutaj. Zamiast tego możemy po prostu użyć domyślnego kontrolera GetX. Proszę spojrzeć na kod podany poniżej, aby uzyskać jasny obraz i zrozumieć różnicę między krokiem 6 a krokiem 7.

Pewnie zauważyłeś, że tzwTekstwidżet wewnątrzElastycznywidżet jest opakowany w plikDziękujęwidżet, w którym nazwaliśmy również naszkontroler. Pamiętaj, jak dodaliśmy(.obs)do naszych zmiennych? Teraz, gdy chcemy zobaczyć zmianę tej obserwowalnej zmiennej, musimy otoczyć widżetDziękuję, znany również jakoObserwator, podobnie do tego, co musiałeś zauważyć w powyższym kodzie.

Zawijanie widżetu za pomocąDziękujęodbuduje tylko ten konkretny widżet, a nie całą klasę, gdy zmieni się stan. Oto jakie to proste:

class Home extends GetView { Home({Klucz? klucz}): super(klucz: klucz); @override Kompilacja widżetu (kontekst kompilacji) { return Scaffold( backgroundColor: AppColors.spaceCadet, appBar: AppBar(title: const Text("GetX Store")), szuflada: const SideDrawer(), body: Container(wypełnienie: const EdgeInsets .all(10), child: SingleChildScrollView( child: Column( children: [ MainCard( title: "Store Info", body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Flexible( child: Text('Store Name:', style: TextStyle(fontSize: 20),), fit: FlexFit.tight,), const SizedBox(width: 20.0), // Wrapped with Obx, aby obserwować zmiany w storeName // zmienna wywołana przy użyciu StoreController.Obx( () => Flexible( child: Text( controller.storeName.value.toString(), style: const TextStyle( fontSize: 22, fontWeight: FontWeight.bold) ), fit : FlexFit.tight, ),), ],), const SizedBox(height: 20.0), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Flexible( child: Text('Store Followers:', style: TextStyle(fontSize : 20),), fit: FlexFit.tight, ), const SizedBox(width: 20.0), // Wrapped with Ox, aby obserwować zmiany w zmiennej followerCount // po wywołaniu za pomocą StoreController. Obx( () => Flexible( child: Text( controller.followerCount.value.toString(), textAlign: TextAlign.start, style: const TextStyle( fontSize: 22, fontWeight: FontWeight.bold), ), fit: FlexFit. ciasno,),),], ), const SizedBox(height: 20.0), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Flexible( child: Text('Status:', style: TextStyle(fontSize: 20), ), fit: FlexFit.tight,), const SizedBox(width: 20.0), // Wrapped with Ox, aby obserwować zmiany w storeStatus // zmiennej wywołanej przy użyciu StoreController. Obx( () => Flexible( child: Text( controller.storeStatus.value ? 'Open': 'Closed', textAlign: TextAlign.start, style: TextStyle( color: controller.storeStatus.value? Colors.green.shade700: Colors.red, fontSize: 22, fontWeight: FontWeight. pogrubiony),), dopasowanie: FlexFit.tight, ), ), ], ), ], ), ),

Celowo zaznaczyłem tzwkontroleryIDziękujęzrozumieć różnicę między domyślnym widżetem stanowym dostarczanym przez Flutter a wykorzystaniem GetX do zarządzania stanem widoku lub całej aplikacji.

Gdybyśmy używali stanowego widżetu, musielibyśmy użyćsetState()metodę za każdym razem, gdy chcieliśmy zobaczyć zmiany. Musielibyśmy się też pozbyćkontroleryręcznie. Zamiast tego unikamy całego kodu standardowego i po prostu opakowujemy nasz widżetDziękuję, a reszta załatwiona.

Gdybyśmy mieli podsumować wszystkie powyższe, można by to zrobić tylko w dwóch krokach:

1. Dodaćobsdo Twojej zmiennej
2. Owiń swój widżet za pomocąDziękuję

Alternatywna metoda

Cóż, nie jest to jedyny sposób, aby to zrobić. Na przykład, jeśli sprawisz, że zmienne będą obserwowalne, możesz również opakować widżetGetXbezpośrednio zamiastDziękuję. Jednak funkcjonalność pozostaje taka sama. W ten sposób nie trzeba tworzyć instancjisklepKontrolerzanim będzie można go wywołać. Proszę spojrzeć na poniższy kod:

// Opakowane z GetX w celu obserwowania zmian w zmiennej//storeStatus po wywołaniu przy użyciu StoreController.GetX( builder: (sController) => Flexible( child: Text( sController.storeStatus.value ? 'Open' : 'Closed', textAlign: TextAlign.start, style: TextStyle( color: sController.storeStatus.value ? Colors.green.shade700 : Colors.red, fontSize: 22, fontWeight: FontWeight.bold), ), fit: FlexFit. obcisły, ),),

N.B., zmieniłemstan magazynuzDziękujęDoGetXi korzystaKontrolerodbudynekfunkcjonować.

Zawijanie widżetów za pomocąDziękujęLubGetXjest znane jako reaktywne zarządzanie stanem.

Proste zarządzanie stanem

Zobaczmy przykład prostego zarządzania stanem. Po pierwsze, zaletą korzystania z prostego zarządzania stanem jest to, że nie trzeba zmieniać swojegoWidżet materiałuDoGetMaterialWidget. Po drugie, możesz łączyć inne biblioteki zarządzania stanem z prostym zarządzaniem stanem.

N.B., jeśli nie zmienisz swojegoWidżet materiału DoGetMaterialWidget, nie będziesz mógł korzystać z innych funkcji GetX, takich jak zarządzanie trasami.

Dla prostego zarządzania stanem:

1. musisz użyć tzwGetBuilderfunkcjonować
2. nie potrzebujeszzauważalnyzmienne
3. musisz zadzwonić doaktualizacja()funkcja w twojej metodzie

Stworzyłem nową zmienną w naszymStoreController. Ale tym razem nie dodałem(obs)na końcu zmiennej. Oznacza to, że teraz nie jest obserwowalny.

Ale nadal potrzebuję, aby mój widok był aktualizowany, gdy liczba sklepów wzrośnie, więc muszę zadzwonićaktualizacja()function wewnątrz mojej nowo utworzonej metody. Sprawdź poniższy kod:

// zmienna nie jest obserwowalnaint storeFollowerCount = 0;void incrementStoreFollowers() { storeFollowerCount++;//funkcja aktualizacji wymaga wywołania update();}

Teraz w naszymDomzobacz, że się zmieniłemDziękujęDoGetBuilderdoTekstwidżet, który wyświetla liczbę obserwujących:

GetBuilder( builder: (newController) => Flexible( child: Text( newController.storeFollowerCount.toString(), textAlign: TextAlign.start, style: const TextStyle( fontSize: 22, fontWeight: FontWeight.bold), ), krój: FlexFit.tight, ),),

Ponieważ zawijamy naszą liczbę obserwującychGetBuilderw naszymDomwidok, musimy również wprowadzić zmiany wDodaj liczbę obserwującychPlik darta.

1. Dodaj to wewnątrzwciśniętyfunkcja wfajprzycisk:

   storeController.incrementStoreFollowers();

   1. ZawińTekstwidżet zGetBuilderjak również, aby wyświetlał liczbę obserwujących:

      GetBuilder( builder: (newController) => Text( 'Z GetBuilder: ${newController.storeFollowerCount.toString()}', textAlign: TextAlign.start, style: const TextStyle( fontSize: 22, fontWeight: FontWeight.bold ), ),),

Jest jeszcze jedna różnica między używaniemDziękujęLubGetXi za pomocąGetBuilder. Podczas używaniaDziękujęLubGetX, musisz dodać wartość po wywołaniu metody przy użyciu metodyStoreController. Ale podczas używaniaGetBuilder, nie trzeba dodawać do niego parametru wartości. Proszę spojrzeć na różnicę poniżej:

// parametr wartości do dodania za pomocą Obx lub GetXcontroller.storeName.value.toString(),// parametr wartości nie jest potrzebny za pomocą GetBuildernewController.storeFollowerCount.toString(),

To wszystko, jeśli chodzi o zarządzanie różnymi stanami zapewniane przez GetX. Ponadto, zgodnie z obietnicą, piszę trochę o zarządzaniu trasami i innych funkcjach pakietu GetX. Dlatego potrzebny jest cały nowy artykuł, aby szczegółowo o tym wszystkim napisać.

Inne funkcje GetX

Zarządzanie trasami

Tradycyjnie, gdy użytkownik chce przejść z jednego ekranu do drugiego za pomocą kliknięcia przycisku, kod wyglądałby tak:

Navigator.push(context, MaterialPageRoute(konstruktor: (context)=> Home()));

Ale w GetX są dosłownie tylko dwa słowa:

Dostać się do domu());

Gdy chcesz wrócić do poprzedniego ekranu:

Navigator.pop(kontekst);

Nie ma absolutnie potrzeby kontekstu, gdy używasz GetX:

Cofnąć się();

Jeśli masz otwarte okno dialogowe lub szufladę i chcesz przejść do innego ekranu podczas zamykania szuflady lub okna dialogowego, możesz to zrobić na dwa sposoby z domyślną nawigacją Flutter:

1. Zamknij szufladę lub okno dialogowe, a następnie nawiguj w następujący sposób:

   Navigator.pop(kontekst);Navigator.push(kontekst, MaterialPageRoute(konstruktor: (kontekst)=> SecondScreen()));

2. Jeśli masz wygenerowane nazwane trasy:

   Navigator.popAndPushNamed(kontekst, '/sekunda');

Dzięki GetX znacznie łatwiej jest generować nazwane trasy i nawigować między ekranami podczas zamykania otwartych okien dialogowych lub szuflad:

// dla nazwanych trasGet.toNamed('/second'),// aby zamknąć, a następnie przejdź do nazwanej trasyGet.offAndToNamed('/second'),

Funkcje o wartości dodanej

1. Bary z przekąskami

   Get.snackbar( 'title', 'message', snackPosition: SnackPosition.BOTTOM,colorText: Colors.white,backgroundColor: Colors.black,borderColor: Colors.white);

2. Dialogi

   Get.defaultDialog( radius: 10.0, contentPadding: const EdgeInsets.all(20.0), title: 'title', middleText: 'content', textConfirm: 'Ok', potwierdź: OutlinedButton.icon( onPressed: () => Get. back(), ikona: const Icon( Icons.check, color: Colors.blue, ), label: const Text('Okay', style: TextStyle(color: Colors.blue), ), ), anuluj: OutlinedButton.icon ( onPressed: (){}, ikona: Icon(), label: Text(),),);

3. Arkusze dolne

   Get.bottomSheet( Container( height: 150, color: AppColors.spaceBlue, child: Center( child: Text( 'Licznik osiągnął ${obxCount.value.toString()}'), style: const TextStyle(fontSize: 28.0, color : Kolory.biały), )),));

Patrząc na powyższy kod, możesz łatwo zrozumieć, jak łatwo jest wyświetlać i dostosowywać paski przekąsek, okna dialogowe i dolne arkusze.

Cóż, to wierzchołek góry lodowej. Z biblioteką GetX można zrobić o wiele więcej. Zanim zakończę mój artykuł, ostatni przykład to przełączanie między jasnymi i ciemnymi motywami.

Przełączanie z jasnych na ciemne motywy i odwrotnie

Najpierw stworzyłem tzwKontroler motywupodobny do naszegoStoreController. Wewnątrz mojego kontrolera używamGetStoragefunkcja zapisywania zmienionego motywu:

klasa ThemeController rozszerza GetxController { final _box = GetStorage(); final _key = 'jestDarkMode'; ThemeMode pobierz motyw => _loadTheme() ? ThemeMode.dark : ThemeMode.light; bool _loadTheme() => _box.read(_key) ?? FAŁSZ; void saveTheme(bool isDarkMode) => _box.write(_key, isDarkMode); void changeTheme(motyw ThemeData) => Get.changeTheme(motyw); void changeThemeMode(ThemeMode themeMode) => Get.changeThemeMode(themeMode);}

W środkuGetMaterialAppwidżet, dla którego dodałem właściwościtematIciemny schematjak również zainicjowanyKontroler motywui dodał to samo doTryb motywunieruchomość:

klasa MojaAplikacja rozszerza StatelessWidget { MojaAplikacja({Klucz? klucz}): super(klucz: klucz); final themeController = Get.put(ThemeController()); @override Widget build (kontekst BuildContext) { return GetMaterialApp (debugShowCheckedModeBanner: false, title: „GetX Store”, initialBinding: StoreBinding(), motyw: Themes.lightTheme, darkTheme: Themes.darkTheme, themeMode: themeController.theme,}}

Dalej w naszymDomekran wpasek aplikacji, dodałem ikonę, która przełącza motyw między jasnym a ciemnym. Wystarczy spojrzeć na poniższy kod:

class Home extends GetView { Home({Klucz? klucz}): super(klucz: klucz); final themeController = Get.find(); @override Widget build(BuildContext context) { return Scaffold(backgroundColor: AppColors.spaceCadet, appBar: AppBar(title: const Text("GetX Store"), akcje: [IconButton( onPressed: () { if (Get.isDarkMode) { themeController.changeTheme(Themes.lightTheme); themeController.saveTheme(false); } else {themeController.changeTheme(Themes.darkTheme); themeController.saveTheme(true); }}, ikona: Get.isDarkMode ? const Icon(Icons.light_mode_outlined ) : const Icon(Icons.dark_mode_outlined),),], ),

I to wszystko. Teraz możesz łatwo przełączać się między jasnymi i ciemnymi motywami.

Wniosek

Czy po przeczytaniu całego artykułu zastanawiasz się, dlaczego twórca tej biblioteki nadał jej nazwę GetX? Moim skromnym zdaniem ludzie często wydają rozkaz mówiąc: „Do dzieła!” lub „Zróbmy to!”

Jednak x jest nieznaną zmienną, ale w tym przypadku jest to naprawdę wszystko.

Możesz załatwić wszystko z GetX.

To wszystko na teraz i dziękuję za przeczytanie. Jeśli masz jakieś sugestie, poprawki lub opinie, zostaw komentarz poniżej.

Zostawiam poniżej linki do kodu źródłowego aplikacji, którą wyjaśniłem w tym artykule oraz dodatkową kontr-aplikację dla podstaw. Możesz sklonować repozytorium Git i samemu poeksperymentować z kodem. Istnieją również łącza do PWA do wypróbowania aplikacji bez żadnych instalacji.

Linki do kodu źródłowego na GitHub

Link do sklepu GetX:https://github.com/timelessfusionapps/getx_store

Link licznika GetX:https://github.com/timelessfusionapps/getx_counter

Łącza do aplikacji internetowej

Link do sklepu GetX:https://getx-store.web.app/#/

Aplikacja licznika GetX:https://getx-counter.web.app/#/