- GetX jest bardzo lekką i potężną biblioteką do Flattera. Łączy wysoką wydajność menadżera stanu, inteligętne dodawanie dependencies i zarządzanie routami w szybki i praktyczny sposób.
- GetX nie jest dla wszystkich, skupia się na jak najmniejszej konsumpcji zasobów (wydajności) ([zobacz benchmarki](https://github.com/jonataslaw/benchmarks)), używaniu łatwej skłani (produktywności) i daniu możliwości pełnego rozbicia View na z logiki biznesowej (organizacja).
- GetX która da Ci supermoce i zwiększy produktywność w tworzeniu projektu. Oszczędzi godziny zarówno początkującym jak i ekspoertom.
- Nawiguj bez podawania `context`, używaj open `dialogs`, `snackbarów` oraz `bottomsheetów` z każdego miejsca w kodzie. Zarządzaj stanami i dodawaj dependencies w prosty i praktyczny sposób!
- Get jest bezpieczny, stabilny i aktualny. Oprócz tego oferuje szeroki zakres API, które nie są zawarte w standardowym frameworku.
- GetX nie jest przytłaczający. Ma wiele funkcjonalności pozwalajacych na rozpoczęcie programowania bez martwienia się o nic, ale wszystkie te funkcjonalności są w osobnych kontenerach będących dodane dopiero po ich użyciu. Jeśli tylko używasz menadżera stanu, tylko on będzie kompilowany. Jeśli używasz routów, lecz nic z menadżera stanu on nie będzie kompilowany. Możesz skompilować repozytorium benchmark i zobaczysz że używa tylko menadżera stanu. Aplikacje używajace Get są mniejsze niz inne ponieważ wszystkie rozwiązania GetX sa projektowane dla lekkości i wydajności. Jest to też zasługa Flutterowego AOT, które jest niesamowite i eliminuje nieużywane zasoby jak żaden inny framework.
**GetX zwiększa stwoja produktywność, lecz mozesz to jeszcze przyspieszyć instalując rozszerzenie [GetX extension](https://marketplace.visualstudio.com/items?itemName=get-snippets.get-snippets) do swojego VSCode**. Jeszcze nie dostępne w innych IDE.
# Instalacja
Dodaj Get do swojego pliku pubspec.yaml:
```yaml
dependencies:
get:
```
Gry jest bardzo lekką i potężną biblioteką do Flattera, która da Ci supermoce i zwiększy produktywność w tworzeniu projektu. Nawiguj bez podawania kontekstu, używaj open dialogów, snackbarów oraz bottomsheetów z każdego miejsca w kodzie. Zarządzaj stanami i dodawaj dependencies w prosty i praktyczny sposób! Get jest bezpieczny, stabilny i aktualny. Oprócz tego oferuje szeroki zakres API, które nie są zawarte w standardowym frameworku.
## Wprowadzenie
Konwencjonalna nawigacja we Flutterze posiada dużo niepotrzebnej obudowy wokół siebie. Takiej jak podawanie kontekstu. Do tego open dialogi oraz używanie snackbarów, co jest nudne i nużące. Ta biblioteką zmieni sposób w jaki pracujesz z Frameworkiem i oszczędzi Ci czas stracony na pisaniu niepotrzebnego kodu zwiększy to produktywność i zapewniając najnowsze podejście w temacie zarządzania stanami, ścieżkami i dependencies.
-**[Użycie](#wprowadzenie)**
-**[Nawigacja bez named routes](#nawigój-bez-named-routes)**
-**[SnackBars](#snackbars)**
-**[Dialogi](#dialogi)**
-**[BottomSheets]()**
-**[Prosty Menadżer Stanów]()**
-**[Reaktywny Menadżer Stanów]()**
-**[Przypisania]()**
-**[Workery]()**
-**[Nawigacja z named routes]()**
-**[Przekazywanie danych do named routes]()**
-**[Dynamiczne linki URL]()**
-**[Oprogramowanie pośrednie]()**
-**[Opcjonalne ustawienia globalne]()**
-**[Zagnieżdżone nawigatory]()**
-**[Inne zaawansowane API i manualne konfigurację]()**
Zaimportuj Get do plików w których chcesz go użyć:
Możesz uczestniczyć w rozwoju projektu na różny sposób:
- Pomagając w tłumaczeniu readme na inne języki.
- Dodając dokumentację do readme ( nawet nie połowa funkcji została jeszcze opisana).
- Pisząc artykuły i nagrywając filmy uczące użycia biblioteki Get (będą zamieszczone w readme, a w przyszłości na naszej Wiki).
- Oferując PR-y dla kodu i testów.
- Dodając nowe funkcje.
```dart
import'package:get/get.dart';
```
Każda współpraca jest mile widziana!
# Counter App z GetX
Przykładowa aplikaja tworzona domyślnie podczas kreacji nowego projektu we Flaterze ma ponad 100 lini kodu (z komentarzami). By pokazać siłę Get pokarzę jak zrobić "licznik" ze zmienianą stan z każdym kliknięciem, zmianą stron i udostępniajac stan pomiędzy ekranami. Wszystko w zorganizowany sposób dzieląc buissnes logic z view w zaledwie 26 LINI KODU WŁĄCZAJĄC W TO KOMENTARZE.
-Krok 1:
Dodaj "Get" przed MaterialApp, zamieniając je na GetMaterialApp
- Note: nie jest to modyfikaja MaterialApp, ponieważ GetMaterialApp nie jest zmodyfikowanym MaterialApp z Fluttera, jest tylko zkonfigurowanym Widgetem mającym domyślnie MaterialApp jako dziecko. Możesz to konfigurować ręcznie, ale nie jest to konieczne. GetMaterialApp jest niezbędne dla działania routów, snackbarów, bootomsheetów, internacjonalizacji, dialogów i wysokopoziomowych api powiązanych z routami i nieobecnościa kontekstu. Nie jest to jednak wymagane do używania zarzadzania stanem i dependencies.
-Krok 2:
Tworzymy klasę business logic i umieszczmy w niej wszystkie zmienne, metody oraz kontrolery. Możesz zmienić zmienna=ą na obserwowalną używajac prostego ".obs"
```dart
class Controller extends GetxController{
var count = 0.obs;
increment() => count.value++;
}
```
- Krok 3:
Tworzymy View. Użyj StatelessWidget oszczędzajac przy tym RAM. Z Get nie będzie Ci potrzebny StatefullWidget.
```dart
class Home extends StatelessWidget {
// Instantiate your class using Get.put() to make it available for all "child" routes there.
final Controller c = Get.put(Controller());
@override
Widget build(context) => Scaffold(
// Use Obx(()=> to update Text() whenever count is changed.
Jest to prosty projekt, ale już na jego przykładzie widać potęgę Get. Wzraz ze wzrostem rozmiaru aplikacji ta różnica tylko się powieksza.
Get był projektowany dla pracy z zespołem, ale równie dobrze sprawdza się w indywidualnej pracy.
Zawsze dotrzymuj deadlinów i dostarczaj swoje rozwiązania na czas bez straty na wydajności. Get nie jest dla wszystkich jak już wspominałem, ale jeśli identyfikujesz się z powyższym zdaniem Get jest dla ciebie.
# Trzy filary
## Menadżer stanu
Obecnie istnieje kilka menadżeów dla Fluttera. Jednak większość z nich wymaga używania ChangeNotifier, po to aby zaktualizować widżety, co nie sprawdza się pod kątem wydajności w średnich i dużych aplikacach. Możesz sprawdzić w oficjalnej dokumentacji, że ChangeNotifier powinien być używany z maksimum dwoma listinerami (https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html), będąc praktycznie bezużytecznym w średnich i duzych projektach.
Get nie jest ani lepszy, ani gorszy od innych menadżerów stanów, ale powinieneś rozpatrzyć te punkty jak i poniższe, aby wybrać między użyciem Get w czystej formie (Vanilla), albo używaniem go wraz z innym menadżerem.
Definitywnie Get nie jest przeciwnikiem żadnego innego menadżera, ponieważ jest on mikroframeworkiem, nie tylko menadżerem stanu. Może być użyty samodzielnie, lub w koegzystencji.
Get ma bardzo lekki i prosty menadżer stanu (napisany w tylko 95 lini kodu), który nie używa ChangeNotifier. Sprosta on wymaganiom szczególnie nowych we Flutterze i nie sprawi problemu nawer w dużych aplikacjach.
### Reaktywny menadżer stanu
Reaktywne programowanie możee dotrącać niektórych, ponieważ powszechnie jest uważane za skomplikowane. GetX zamienia to w coś prostego:
- Nie musisz tworzyć Strw=eamControllerów,
- Nie musisz tworzyć StreamBuildera dla każdej zmiennej,
- Nie ma potrzeby tworzenia klasy dla kżdego stanu,
- Nie musisz tworzyć Get dla inicjalnej zmiennej
Wyobraź sobie, że masz zmienną i za każdym razem jak zmienisz ją chcesz żeby wszystkie widżety używające jej automatycznie się zmieniły
Przykładowa zmienna:
```dart
var name = 'Jonatas Borges';
```
By zamienić ją na obserwowalną dodaj ".obx" na końcu:
```dart
var name = 'Jonatas Borges'.obs;
```
I w UI, kiedy chcesz go zaktualizować przy modyfikacji zmiennej po prostu dodaj to:
```dart
Obx (() => Text (controller.name));
```
To wszystko. *Proste*, co nie?
### Bardziej szczegółowo o menadżerze stanu
**Zobacz bardziej szczegółowe wytłumaczenie menadz=żera sranu [tutaj](./docs/en_US/state_menagment.md). Znajdują się tam przykłady jak o różnice między prostym menadżerem stanu oraz reaktywnym**
### Video tłumaczące użycie menadżera stanu
Amateur COder nagrał o tym niezwykły film:
Link: [Complete GetX State Management](https://www.youtube.com/watch?v=CNpXbeI_slw)
## Zarządzanie routami
Jeśli chcesz używać routes/snackbars/dialogs/bottomsheets z GetX możesz to robić bez contextu.
Zamień MaterialApp na GetMaterialApp
```dart
GetMaterialApp( // Before: MaterialApp(
home: MyHome(),
)
```
## Nawiguj bez named routes
By nawigować do nowego ekranu:
```dart
...
...
@@ -70,7 +223,7 @@ By nawigować do następnego routa i otrzymać, lub uaktualnić dane zaraz po ty
```dart
var data = await Get.to(Payment());
```
w innym ekranie wyślij dane z poprzedniego routa:
w innym ekranie wyślij dane z poprzedniego routa:featury
```dart
Get.back(result: 'sucess');
...
...
@@ -79,166 +232,296 @@ I użyj następujące np.:
```dart
if(data == 'sucess') madeAnything();
```
Zobacz, ze do żadnej z tych operacji nie potrzebowałeś contextu. Jest to jedna z głównych zalet GetX oszczędzającego na niepotrzebnej ogudowie z kod i dającego możliwość uzywania tych metod w klasie kontrolera.
Nie chcesz się uczyć naszej składni?
Wystarczy, że zmienisz 'Nawigator' (upercase) na 'navigator' (lowercase), a będziesz mieć wszystkie funkcjonalności standardowej nawigacji, bez konieczności używania kontekstu.
Przykład:
### Więcej o routach
**Get używa named routes i także oferuje niskopoziomową obsługę routów! Zobacz bardziej szczegółową dokumentacje [tutaj](./docs/en_US/route_management.md)**
Get ma prosty i potężny menadżer dependencies. Pozwala on na otrzymanie tych samych klas jak twoje Bloc lub Kontroler piszac jedną linię kodu bez Provider context i inheritedWidget:
```dart
Controller controller = Get.put(Controller()); // Rather Controller controller = Controller();
```
// Standardowa nawigacja we Flatterze
Navigator.of(context).push(
context,
MaterialPageRoute(
builder:(BuildContextcontext){
returnHomePage();
},
),
);
- Note: Jeśli używasz menadżera stanu Get zwróć uwafę na binding api, które pozwoli Ci łatwiej połączyć twój widok z kontrolerem.
https://github.com/jonataslaw/get
**Tip:** Menadżer dependency Get jest oddzielony od innych części pakietu więc jeśli już używasz menadzera stanu(którego kolwiek,bez różnicy) nie musisz przepisywać tego wszystkiego na nowo. Możesz używać tego dodawania dependencies bez poroblemu.
// Zacznij używać Flatterowej składni bez podawania kontekstu
navigator.push(
MaterialPageRoute(
builder:(_){
returnHomePage();
},
),
);
```dart
controller.fetchApi();
```
Wyobraź sobie, że musisz nawigować pomiędzy wieloma routami i potrzebujesz dane z kontrolerów z poprzednich ekranów. Musiałbyś użyć menadżera stanu z dodatkiem Providera albo Get_it, prawda? Otuż nie z Fet. Muszisz po prostu poprosić Get o znalezienie tego kontrolera i nie potrzebujesz przy tym dodatkowych dependencies.
// Składnia Get (Jest lepsza, choć oczywiście każdy może mieć własne zdanie))
Get.to(HomePage());
```dart
Controller controller = Get.find();
//Yes, it looks like Magic, Get will find your controller, and will deliver it to you. You can have 1 million controllersfeatury instantiated, Get will always give you the right controller.
```
I wtedy będziesz mógł otrzymać bez problemu z niego dane
```dart
Text(controller.textFromApi);
```
### SnackBars
### Bardziej szczegółowo o menadżerze dependencies
**Zobzcz więcej w dokumentacji [tutaj](./docs/en_US/dependency_management.md)**
# Jak włożyć coś od siebie
Możesz uczestniczyć w rozwoju projektu na różny sposób:
- Pomagając w tłumaczeniu readme na inne języki.
- Dodając dokumentację do readme ( nawet nie połowa funkcji została jeszcze opisana).
- Pisząc artykuły i nagrywając filmy uczące użycia biblioteki Get (będą zamieszczone w readme, a w przyszłości na naszej Wiki).
- Oferując PR-y dla kodu i testów.
- Dodając nowe funkcje.
Każda współpraca jest mile widziana!
# Narzędzia
## Zmiana motywu
Nie powinno się uzywać innego widżetu niż GetMaterialApp by go zaktualizować. To może powodować duplikacje kluczy. Wiele osób nawykło do prehistorycznego podejścia tworzenia widżetu "ThemeProvider" tylko po to by zmienić motyw aplikacji. Z Get nie jest to absolutnie wymagane.
Możesz stworzyć customowy motyw i łatwo go dodać z Get.changeTheme bez niepotrzebnego kodu.
By wykorzystać SnackBar we Flatterze musisz podać context Scaffoldu, albo musisz użyć GlobalKey przypisanego do Scaffolda.
```dart
finalsnackBar=SnackBar(
content:Text('Cześć!'),
action:SnackBarAction(
label:'Jestem starym i brzydkim snackbarem :(',
onPressed:(){}
),
);
// Znajdź Scaffold w drzewie widżetów i użyj
// go do pokazania SnackBara.
Scaffold.of(context).showSnackBar(snackBar);
Get.changeTheme(ThemeData.light());
```
Z wykorzystaniem Get:
Jeśli chcesz stworzyć coś jak przycisk zmieniający motyw aplikacji na onTap, możesz połączyć dwia Get API. Api sprawdzające czy ciemny motyw jest używany i Api zajmujące się zmianą motywu. Po prostu użyj tego w onPressed:
Z Get wszystko co musisz zrobić to wywołać swój Get.snackbar gdziekolwiek w swoim kodzie i dostosować go jak tylko chcesz!
Kiedy ciemny motyw jest aktywny zmieni się on na jasny, w przeciwnym wypadku zmieni się na ciemny.
Jeśli interesuje Cię jak zmieniać motywy podąrzaj za samouczkiem na Medium uczącym zmiany motywu z Get:
- [Dynamic Themes in 3 lines using Get](https://medium.com/swlh/flutter-dynamic-themes-in-3-lines-c3b375f292e3) - Samouczek stworzony przez [Rod Brown](https://github.com/RodBr).
## Inne zaawansowane API
```dart
Get.snackbar(
"Hej, jestem Get Snackbar!",// title
"Niewiarygodne! Używam SnackBara bez context, miepotrzebnego opakowania i Scaffoldu, jest to naprawdę niesamowite!",// message
Jeśli preferujesz tradycyjne snackbary, albo chcesz budować ją od zera dodając tylko jedną lineijkę kodu (Get.snackbar używa obowiązkowo title i message). Możesz użyć `Get.rawSnackbar();` który zapewnia surowe API, na którym zbudowany jest Get.snackbar.
### Dialogi
By otworzyć dialog:
```dart
Get.dialog(YourDialogWidget());
```
By otworzyć domyślny dialog:
```dart
Get.defaultDialog(
onConfirm:()=>print("Ok"),
middleText:"Dialog stworzony w trzech linijkach kodu"
);
// give name of previous route
Get.previousRoute
// give the raw route to access for example, rawRoute.isFirst()
Get.rawRoute
// give access to Rounting API from GetObserver
Get.routing
// check if snackbar is open
Get.isSnackbarOpen
// check if dialog is open
Get.isDialogOpen
// check if bottomsheet is opefeaturyn
Get.isBottomSheetOpen
// remove one route.
Get.removeRoute()
// back repeatedly until the predicate returns true.
Get.until()
// go to next route and remove all the previous routes until the predicate returns true.
Get.offUntil()
// go to next named route and remove all the previous routes until the predicate returns true.
Get.offNamedUntil()
//Check in what platform the app is running
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isWeb
// Equivalent to the method: MediaQuery.of(context).size.height, but they are immutable.
Get.height
Get.width
// Gives the current context of navigator.
Get.context
// Gives the context of the snackbar/dialog/bottomsheet in the foreground anywhere in your code.
Get.contextOverlay
// Note: the following methods are extensions on context. Since you
// have access to context in any place of your UI, you can use it anywhere in the UI code
// If you need a changeable height/width (like browser windows that can be scfeaturyaled) you will need to use context.
context.width
context.height
// gives you the power to define half the screen now, a third of it and so on.
//Useful for responsive applications.
// param dividedBy (double) optional - default: 1
// param reducedBy (double) optional - default: 0
context.heightTransformer()
context.widthTransformer()
/// similar to MediaQuery.of(context).size
context.mediaQuerySize()
/// similar to MediaQuery.of(context).padding
context.mediaQueryPadding()
/// similar to MediaQuery.of(context).viewPadding
context.mediaQueryViewPadding()
/// similar to MediaQuery.of(context).viewInsets;
context.mediaQueryViewInsets()
/// similar to MediaQuery.of(context).orientation;
context.orientation()
/// check if device is on landscape mode
context.isLandscape()
/// check if device is on portrait mode
context.isPortrait()
/// similar to MediaQuery.of(context).devicePixelRatio;
context.devicePixelRatio()
/// similar to MediaQuery.of(context).textScaleFactor;
context.textScaleFactor()
/// get the shortestSide from screen
context.mediaQueryShortestSide()
/// True if width be larger thfeaturyan 800
context.showNavbar()
/// True if the shortestSide is smaller than 600p
context.isPhone()
/// True if the shortestSide is largest than 600p
context.isSmallTablet()
/// True if the shortestSide is largest than 720p
context.isLargeTablet()
/// True if the current device is Tablet
context.isTablet()
```
Możesz także użyć Get.generalDialog zamiast showGeneralDialog.
### Opcjonalne globalne ustawienia i manualna konfiguracja
W przypadku wszystkich innych Flutterowych dialogog widżetów włączając cupertinowe możesz używać Get.overlayContext w zamian za context i otwierać go z każdego miejsca w kodzie.
Dla widżetów nieużywających Overlay możesz użyć Get.context.
Te dwa konteksty zadziałają w 99% przypadków, w których zastępujesz context UI, z wyłączeniem przypadków gdzie inheritedWidget jest używany w nawigacji bez kontekstu.
GetMaterialApp konfiguruje wszystko za Ciebie, ale jeśli chcesz możesz konfigurować Get manualnie.
### BoottomSheets
Get.bottomSheet działa jak showModalBottomSheet, tylko bez użycia kontekstu.
```dart
MaterialApp(
navigatorKey: Get.key,
navigatorObservers: [GetObserver()],
);
```
Będziesz mógł używać swojego Midware z GetObserver, nie wpływa to na nic.
```dart
Get.bottomSheet(
Container(
child:Wrap(
children:<Widget>[
ListTile(
leading:Icon(Icons.music_note),
title:Text('Music'),
onTap:()=>{}
),
ListTile(
leading:Icon(Icons.videocam),
title:Text('Video'),
onTap:()=>{},
),
MaterialApp(
navigatorKey: Get.key,
navigatorObservers: [
GetObserver(MiddleWare.observer) // Here
],
),
);
);
```
## Simple State Menager
Obecnie istnieje kilka menadżeów dla Fluttera. Jednak większość z nich wymaga używania ChangeNotifier, po to aby zaktualizować widżety, co nie sprawdza się pod kątem wydajności w średnich i dużych aplikacach. Możesz sprawdzić w oficjalnej dokumentacji, że ChangeNotifier powinien być używany z maksimum dwoma listinerami (https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html), będąc praktycznie bezużytecznym w średnich i duzych projektach. Inne menadzery są dobre, ale mają swoje mankamenty. BLoC jest bardzo bezpieczny i efektywny,ale ma wysoki próg wejścia dla początkujących, powstrzymywując wielu przed pisaniem we Flutterze. MobX jest prostrzy od BLoC i reaktywnny, powiedziałbym prawe perfekcyjny, tylko że musisz używać generatora kodu redukującego produktywność w dużych aplikacjach. W takim przypadku będziesz potrzebował hektolitrów kawy nim twój kod będzie działać po Flutterowym czyszczeniu (Nie jest toowina MobXa, ale codegen będący bardzo wolny). Provider używa InheritedWidget dostarczając ten sam listiner, jako sposób na problem z ChangeNotifier wyżej wymieniony. To skutkuje tym, że każdy dostęp do klasy ChangeNotifier musi być w tym samym drzewie widżetów, ze względu na kontekst uzyskujacy dostęp do Inherited.
Get nie jest ani lepszy, ani gorszy od innych menadżerów stanów, ale powinieneś rozpatrzyć te punkty jak i poniższe, aby wybrać między użyciem Get w czystej formie (Vanilla), albo używaniem go wraz z innym menadżerem. Definitywnie Get nie jest przeciwnikiem żadnego innego menadżera, ponieważ jest on mikroframeworkiem, nie tylko menadżerem stanu. Może być użyty samodzielnie, lub w koegzystencji.
Mozesz stworzyć globalne ustawienia dla Get. Tylko dodaj Get.config do swojego kodu przed użyciem routów, lub bezpośrednio w GetMaterialApp
Get ma bardzo lekki i prosty menadżer stanu (napisany w tylko 95 lini kodu), który nie używa ChangeNotifier. Sprosta on wymaganiom szczególnie nowych we Flutterze i nie sprawi problemu nawer w dużych aplikacjach.
Amateur Coder nagrał niezwykły film tłumaczący powyższe zagadnienia!
linijka 300
Link: [GetX Other Features](https://youtu.be/ttQtlX_Q0eU)
# Zmiany od 2.0
1- Typy Rx:
| Przed | Po |
| ------- | ---------- |
| StringX | `RxString` |
| IntX | `RxInt` |
| MapX | `RxMax` |
| ListX | `RxList` |
| NumX | `RxNum` |
| DoubleX | `RxDouble` |
RXController i GetBuilder teraz zostały połączone. Nie musisz już pamiętać którego kontrolerachcesz użyć, po prostu korzystaj z GetxController, będzie działać zarówno dla prostego jak i reaktywnego menadżera stanów.
2- NamedRoutes
Wcześniej:
```dart
GetMaterialApp(
namedRoutes: {
'/': GetRoute(page: Home()),
}
)
```
Teraz:
```dart
GetMaterialApp(
getPages: [
GetPage(name: '/', page:()=> Home()),
]
)
```
Po co ta zmiana?
Często może być niezbędnym decydowanie która strona będzie wyswietlana w zależności od parametru, lub tokenu logowania. Wczesniejsze podejscie było nieelastyczne nie pozwalając na to. Zawarcie strony w funkcji zmniejszyło sporzycie RAM-u, ze względu na niealokowanie routów od początku działania aplikacji. Pozwoliło to także na takie podejscie: