Pierwsze kroki z pakietem GetX w aplikacjach Flutter

Flutter to jeden z najszybszych sposobów tworzenia prawdziwie wieloplatformowych aplikacji natywnych. Zapewnia funkcje umożliwiające programiście zbudowanie naprawdę pięknego interfejsu użytkownika dla swoich użytkowników.

Jednak w większości przypadków, aby osiągnąć takie rzeczy, jak nawigacja do ekranów, zarządzanie stanem i wyświetlanie alertów, potrzeba wielu szablonów. Te schematy zwykle spowalniają wydajność programistów, którzy starają się budować funkcje i dotrzymywać terminów.

Weźmy na przykład schemat potrzebny do przejścia do ekranu w aplikacji Flutter. Załóżmy, że chcesz przejść do ekranu o nazwie AboutScreen . będziesz musiał napisać:

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

Bardziej wydajne i przyjazne dla programistów byłoby zrobienie czegoś takiego:

 Get.to(AboutScreen());

Kiedy będziesz musiał wrócić do poprzedniej strony we Flutterze, będziesz musiał napisać:

 Navigator.pop(context);

Zauważysz, że zawsze jesteśmy zależni od właściwości kontekstu w przypadku czegoś tak powszechnego, jak nawigacja między ekranami. A jeśli zamiast tego możemy zrobić coś takiego:

 Get.back();

Powyższe przykłady to niektóre ze sposobów, w jakie można ulepszyć tworzenie aplikacji we Flutter, aby było bardziej intuicyjne i wydajne przy mniejszej liczbie szablonów. Jeśli preferujesz prostotę i efektywność w budowaniu funkcji i pomysłów, we Flutterze zainteresuje Cię pakiet Get.

Co to jest GetX?

Get or GetX to szybka, stabilna, bardzo lekka platforma do tworzenia aplikacji Flutter.

GetX jest dostarczany po wyjęciu z pudełka z wydajnym zarządzaniem stanem, inteligentnym wstrzykiwaniem zależności i zarządzaniem trasami w prosty i praktyczny sposób.

GetX ma na celu zminimalizowanie szablonów, zapewniając jednocześnie prostą i intuicyjną składnię dla programistów do wykorzystania podczas tworzenia aplikacji. U podstaw GetX są te 3 zasady:

• Występ
  GetX koncentruje się na wydajności Twojej aplikacji, wdrażając jej funkcje, aby zużywać jak najmniej zasobów.
• Wydajność
  GetX chce, aby programiści korzystali z jego funkcji tak szybko, jak to możliwe. Czyni to poprzez zastosowanie łatwej do zapamiętania składni i praktyk. Na przykład, ogólnie programista powinien być zainteresowany usunięciem kontrolerów z pamięci, ale GetX po wyjęciu z pudełka zapewnia inteligentne zarządzanie, które monitoruje kontrolery w aplikacji i usuwa je, gdy nie są używane domyślnie.
• Organizacja
  GetX umożliwia oddzielenie widoku, logiki prezentacji, logiki biznesowej, wstrzykiwania zależności i nawigacji w aplikacji Flutter. Nie potrzebujesz kontekstu, aby nawigować między trasami, więc nie jesteś zależny od drzewa widżetów do nawigacji. Nie potrzebujesz kontekstu, aby uzyskać dostęp do kontrolerów/bloków za pośrednictwem inheritedWidget , dzięki czemu możesz całkowicie oddzielić logikę prezentacji i logikę biznesową od warstwy widoku. Nie musisz wstrzykiwać klas Controllers/Models/Blocs do drzewa widżetów za pośrednictwem wielu dostawców, ponieważ GetX używa własnej funkcji wstrzykiwania zależności, całkowicie oddzielając DI od jego widoku.

Cechy GetX

GetX zawiera kilka funkcji, których będziesz potrzebować w codziennym tworzeniu aplikacji we Flutterze. Spójrzmy na nie:

Zarządzanie państwowe

Jedną z flagowych funkcji GetX jest intuicyjna funkcja zarządzania stanem. Zarządzanie stanem w GetX można osiągnąć przy niewielkim lub żadnym schemacie.

Zarządzanie trasami

GetX zapewnia API do nawigacji w aplikacji Flutter. Ten interfejs API jest prosty i wymaga mniej kodu.

Zarządzanie zależnościami

GetX zapewnia inteligentny sposób zarządzania zależnościami w aplikacji Flutter, takimi jak kontrolery widoku. GetX usunie z pamięci każdy kontroler, który nie jest aktualnie używany. To było zadanie, które jako programista będziesz musiał wykonać ręcznie, ale GetX robi to za Ciebie automatycznie po wyjęciu z pudełka.

Umiędzynarodowienie

GetX dostarcza i18n po wyjęciu z pudełka, pozwalając na pisanie aplikacji z obsługą różnych języków.

Walidacja

GetX zapewnia metody walidacji do przeprowadzania walidacji danych wejściowych w aplikacjach Flutter. Jest to dość wygodne, ponieważ nie trzeba instalować osobnego pakietu weryfikacyjnego.

Przechowywanie

GetX zapewnia szybką, dodatkową lekką i synchroniczną parę klucz-wartość w pamięci, która podczas każdej operacji tworzy kopię zapasową danych na dysku. Jest napisany w całości w Dart i łatwo integruje się z podstawowym pakietem GetX.

Pierwsze kroki z GetX

Teraz, gdy już wiesz, czym jest GetX oraz jakie funkcje i korzyści zapewnia, zobaczmy, jak skonfigurować go w Twojej aplikacji. Zbudujemy aplikację demonstracyjną, aby zobaczyć w akcji większość wymienionych funkcji. Zacznijmy.

Stwórz zupełnie nową aplikację Flutter

Zaczniemy od stworzenia zupełnie nowej aplikacji Flutter za pomocą Flutter CLI. Zakładam, że twoja maszyna jest już skonfigurowana do tworzenia aplikacji za pomocą Fluttera. Więc biegamy:

 flutter create getx_demo

Spowoduje to wygenerowanie podstawowego kodu potrzebnego do aplikacji Flutter. Następnie otwórz projekt, który właśnie utworzyłeś w wybranym przez siebie edytorze (w tym artykule będziemy używać VS Code). Następnie uruchomimy projekt, aby upewnić się, że działa poprawnie (upewnij się, że masz podłączone urządzenie lub uruchomiony emulator/symulator).

Po uruchomieniu aplikacji zobaczysz domyślną aplikację licznika, którą Flutter tworzy szkielet podczas tworzenia nowej aplikacji Flutter. To, co zamierzamy zrobić, to zaimplementować tę samą aplikację licznika, ale z GetX do zarządzania stanem aplikacji (co jest zmienną count).

Zaczniemy od wyczyszczenia main.dart i pozostawienia tylko tego fragmentu kodu:

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

Do tej pory nasza aplikacja byłaby zepsuta, ponieważ nie ma już widżetu MyHomePage . Naprawmy to. Dzięki GetX nie potrzebujemy widżetów stanowych, a nasz interfejs użytkownika można wyraźnie oddzielić od naszej logiki biznesowej. Stworzymy więc dwa katalogi wewnątrz lib/ . Te katalogi to:

Stwórzmy widżet MyHomePage wewnątrz views/ . Nazwa pliku to my_home_page.dart . Po utworzeniu dodaj do niego następujący fragment kodu:

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

Teraz mamy widżet MyHomePage , zaimportujmy go do main.dart . Dodaj deklarację importu na górze main.dart poniżej import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

Teraz twój plik main.dart powinien wyglądać tak:

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

Gdy zapiszesz teraz swoją aplikację, wszystkie błędy powinny zostać naprawione i aplikacja będzie działać. Ale zauważysz, że po ponownym kliknięciu przycisku licznik nie zostanie zaktualizowany. Jeśli spojrzysz na kod views/my_home_page.dart , zobaczysz, że na stałe kodujemy 0 jako wartość widżetu Text i przekazujemy null do modułu obsługi onPressed przycisku. Dodajmy GetX do miksu, aby aplikacja znów działała.

Instalowanie GetX

Udaj się na stronę instalacji GetX na pub.dev, a zobaczysz wiersz kodu, który należy skopiować i umieścić w pliku pubspec.yml , aby zainstalować GetX. W chwili pisania tego artykułu aktualna wersja GetX to 3.23.1. Więc skopiujemy linię:

 get: ^3.23.1

A następnie wklej go w sekcji dependencies naszego pliku pubspec.yml . Po zapisaniu pliku get powinno zostać automatycznie zainstalowane. Możesz też uruchomić ręcznie w swoim terminalu.

 flutter pub get

Sekcja zależności w pliku pubspec.yml powinna wyglądać tak:

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

Wspomnieliśmy, że GetX pozwala oddzielić interfejs użytkownika aplikacji od logiki. Robi to, udostępniając klasę GetxController , którą można dziedziczyć, aby tworzyć klasy kontrolerów dla widoków aplikacji. W naszej obecnej aplikacji mamy jeden widok, więc utworzymy kontroler dla tego widoku. Udaj się do katalogu controllers/ i utwórz plik o nazwie my_home_page_controller.dart . To utrzyma kontroler dla widoku MyHomePage .

Po utworzeniu pliku najpierw zaimportuj pakiet GetX, dodając to na górze pliku:

 import 'package:get/get.dart';

Następnie utworzysz w nim klasę o nazwie MyHomePageController i rozszerzysz klasę GetxController . Tak powinien wyglądać plik:

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

dodajmy stan licznika do utworzonej przez nas klasy.

 final count = 0;

W GetX, aby zmienna była obserwowalna — oznacza to, że gdy się zmieni, inne części naszej aplikacji zależne od niej zostaną powiadomione. Aby to zrobić, wystarczy dodać .obs do inicjalizacji zmiennej. Więc dla naszej powyższej zmiennej count , dodamy .obs do 0 . Więc powyższa deklaracja będzie teraz wyglądać tak:

 final count = 0.obs;

Tak wygląda obecnie nasz plik kontrolera:

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

Aby zakończyć wszystko za pomocą MyHomePageController , zaimplementujemy metodę increment . Oto fragment kodu, który to umożliwia:

 increment() => count.value++;

Zauważysz, że musieliśmy dodać .value do zmiennej count, aby ją zwiększyć. Zrobiliśmy to, ponieważ dodanie .obs do zmiennej czyni ją zmienną obserwowalną i aby uzyskać wartość zmiennej obserwowalnej, robisz to z właściwości value .

Więc skończyliśmy z kontrolerem. Teraz, gdy zmieni się wartość licznika, każda część naszej aplikacji korzystająca z niego zostanie automatycznie zaktualizowana.

Przejdziemy teraz do naszego widoku i poinformujemy go o kontrolerze, który właśnie stworzyliśmy. Zrobimy to poprzez utworzenie instancji klasy kontrolera za pomocą funkcji zarządzania zależnościami GetX. Zapewni to, że nasz kontroler nie będzie w pamięci, gdy nie będzie już potrzebny.

W views/my_home_page.dart zaimportuj pakiet Get, a także utworzony przez siebie kontroler:

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

Następnie w klasie MyHomePage utworzymy instancję MyHomePageController :

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

Teraz mamy instancję MyHomePageController , możemy użyć zmiennej state oraz metody. Tak więc zaczynając od stanu, w GetX, aby oznaczyć część interfejsu użytkownika do przebudowania, gdy zmieni się zmienna stanu, otoczysz tę część widżetem Obx . GetX zapewnia inne sposoby na zrobienie tego, ale ta metoda jest znacznie prostsza i czystsza.

W naszej aplikacji zliczania chcemy, aby widżet Tekst był aktualizowany o aktualną liczbę. Owiniemy więc widżet tekstowy widżetem Obx w następujący sposób:

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

Następnie zastąpimy ciąg statyczny 0 zmienną count z MyHomePageController w następujący sposób:

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

Na koniec wywołamy metodę increment, gdy zostanie naciśnięty floatingActionButton w następujący sposób:

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

Ogólnie rzecz biorąc, nasz plik widoku MyHomePage powinien teraz wyglądać tak:

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

Po zapisaniu aplikacji lub jej ponownym uruchomieniu aplikacja licznika powinna działać tak, jak podczas tworzenia aplikacji po raz pierwszy.

Wierzę, że widziałeś, jak intuicyjne jest zarządzanie stanami w GetX, nie musieliśmy pisać dużo schematów, a ta prostota stanie się bardziej oczywista, gdy Twoja aplikacja stanie się skomplikowana. Zauważysz również, że nasz widok nie utrzymuje ani nie utrzymuje żadnego stanu, więc może to być widżet bezstanowy. Mózg widoku z kolei jest teraz klasą kontrolera, która będzie przechowywać stan widoku i metod.

Nawigacja w GetX

Widzieliśmy zarządzanie stanem w GetX. Przyjrzyjmy się teraz, jak GetX obsługuje nawigację w Twojej aplikacji. Aby aktywować funkcję nawigacji GetX, wystarczy wprowadzić jedną zmianę w main.dart , która polega na przekształceniu widżetu MaterialApp w widżet GetMaterialApp . Zróbmy to, najpierw importując Get na górę main.dart

 import 'package:get/get.dart';

Następnie wprowadzamy zmianę do MaterialApp , aby nasz plik main.dart wyglądał teraz tak:

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

Teraz nasza aplikacja została skonfigurowana do obsługi nawigacji GetX. Aby to przetestować, utworzymy inny widok w katalogu views/ . Nazwiemy to na about_page.dart i będzie zawierało następujący kod:

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

Następnie przejdziemy do MyHomePage i dodamy przycisk, który po naciśnięciu przeniesie nas do AboutPage . Tak jak. Przycisk powinien znajdować się pod widżetem Obx. Oto on:

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

Będziemy również musieli zaimportować stronę AboutPage na plik MyHomePage :

 import './about_page.dart';

Aby powiedzieć GetX, aby przeszedł do strony AboutPage , potrzebujemy tylko jednej linii kodu, która jest:

 Get.to(AboutPage());

Dodajmy to do wywołania zwrotnego onPressed widżetu FlatButton w następujący sposób:

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

Po zapisaniu aplikacji teraz będziesz mógł przejść do strony AboutPage .

Możesz również zamienić widok MyHomePage na AboutPage , aby użytkownik nie mógł wrócić do poprzedniej strony, naciskając przycisk Wstecz urządzenia. Jest to przydatne w przypadku ekranów takich jak ekrany logowania. W tym celu zastąp zawartość handlera onPressed poniższym kodem:

 Get.off(AboutPage());

Spowoduje to wyświetlenie widoku MyHomePage i zastąpienie go AboutPage .

Teraz, gdy możemy przejść do AboutPage , myślę, że nie będzie tak źle, aby móc wrócić do MyHomePage , aby to zrobić, dodamy przycisk w AboutPage po widżecie Padding i w jego obsłudze onPressed połączenie do Get.back() , aby przejść z powrotem do MyHomePage :

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

Batonik

We Flutterze konwencjonalnie, aby pokazać Snackbar, będziesz musiał napisać coś takiego:

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

Możesz zauważyć, że wciąż jesteśmy uzależnieni od właściwości context . Zobaczmy, jak możemy to osiągnąć w GetX. Przejdź do widoku MyHomePage i dodaj kolejny widżet FlatButton poniżej ostatniego przycisku, który dodaliśmy. Oto fragment kodu przycisku:

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

Wyświetlmy komunikat „Yay! Niesamowity pasek przekąskowy GetX”. Wewnątrz funkcji obsługi onPressed dodaj poniższy wiersz kodu:

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

Uruchom swoją aplikację, a po kliknięciu przycisku „Pokaż pasek przekąsek” zobaczysz pasek przekąskowy u góry aplikacji!

Widzisz, jak zmniejszyliśmy liczbę linii potrzebnych do pokazania batona w aplikacji Flutter? Zróbmy trochę więcej dostosowań na Snackbar; Sprawmy, by pojawił się na dole aplikacji. Zmień kod na następujący:

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

Zapisz i uruchom aplikację, a pasek przekąsek pojawi się teraz na dole aplikacji. Co powiesz na zmianę koloru tła paska przekąsek, ponieważ jest on w tej chwili przezroczysty. Zmienimy go na kolor amberAccent z klasy Colors we Flutterze. Zaktualizuj kod do tego:

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

Ogólnie kod przycisku powinien wyglądać tak:

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

Dialog

GetX zapewnia prostą metodę tworzenia AlertDialog w Flutter. Zobaczmy to w akcji. Utwórz kolejny przycisk poniżej poprzedniego:

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

Zadzwońmy GetX, aby wyświetlić okno dialogowe alertu:

 Get.defaultDialog();

Spowoduje to wyświetlenie domyślnego okna alertów, które można zamknąć, dotykając poza oknem dialogowym. Możesz zobaczyć, jak w jednym wierszu kodu mamy działające okno dialogowe alertu. Dostosujmy to trochę. Zmieńmy tytuł i przesłanie:

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

Zapisz i uruchom swoją aplikację, a zobaczysz zmiany po naciśnięciu przycisku „Pokaż okno alertów”. Możemy dodać przyciski Potwierdź i Anuluj w następujący sposób:

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

Istnieje wiele sposobów na dostosowanie okna dialogowego GetX, a interfejs API jest dość intuicyjny i prosty.

Wniosek

GetX został stworzony, aby poprawić produktywność programistów Flutter podczas tworzenia funkcji. Zamiast szukać szablonów potrzebnych do wykonywania takich czynności, jak zarządzanie stanem, zarządzanie nawigacją i nie tylko, GetX zapewnia prosty intuicyjny interfejs API do wykonywania tych czynności bez poświęcania wydajności. Ten artykuł przedstawia GetX i jak zacząć używać go w aplikacjach Fluttera.

• Demo znajdziesz tutaj →