GetX

Getx dasturchi uchun turli hil qulayliklar taqdim qilishi bn boshqa management state lardan ajralib turadi:

1. Navigatsiyaning qulayligi.

Get.to(Home());

2. Snackbarlar/dialoglar/bottomsheet dialoglar ni context siz sihlash imkoniyat.

Get.snackbar(‘hi’, ‘Message’);

Get.defaultDialog(title: ‘I am a dialog’);

3. Qulay state manager

var count = 0.obs;

Obx(() => Text(counting.toString)); // qachonki count o’zgarganda widgetni yangilaydi

4. Bir oynadagi malumotga boshqa bir oynadan qulay erishish usuli

Get.put(Instance());

Instance inst = Get.find();

Text(inst.name);

5. Qulay key/value ombori

GetStorage box = GetStorage();

box.write(‘key’, value);

box.read(‘key’); // natija: value

6. Qulay tarjimon

Text(‘Hello World’.tr);

Get.changeLocale(Locale(‘pt’)); //out: Text(‘Ola mundo’)

7. Qulay tema o’zgartira olish imkoniyati

Get.changeTheme(ThemeData.dark());

8. Qulay tekshirish usuli

GetUtils.isEmail(‘abs@gmail.com’) ? validate() : errorMessage();

GetX haqida

GetX bu hozirgi kundagi ko’p qo’llanilayotgan va muammolarga qulay yechim beruvchi management state hisoblanadi. U turli hil ustunliklarni o’zida jamlaydi masalan: high-performance state management, qulay dependency injection, va route managementning tezligi va qo’llash qulayligi.

GetXning asosiy 3 principi mavjud : PRODUCTIVITY , PERFORMANC va ORGANISATION.

PERFORMANCE: GetX tezlik va resource lardan minimum holatda foydalanishga etibor qaratgan. GetX Stream va ChangeNotifier lardan foydalanmaydi.

PRODUCTIVITY: GetX tushunarli va qo’llashga qulay bo’lgan syntax dan foydalanadi. Nimaiki qilmoqchi bo’lsangiz doimo GetX bn uning osonroq usuli mavjud. Bu qulayliklar bn u vaqt tejalishi va maximum performancega erishim imkoniyatini beradi.

Odatda dasturchi doimo controllerlarni hotiradan o’chirishni hisobga olishi zarur, lekin GetX buning qulay yechimini yani keraksiz bo’lgan resourcelarni hotiradan default holatda o’chirib ketish imkinin berdi. Agar siz biron bir resourceni hotirada doimiy bo’lishini hohlasnagiz bu uchun maxsus ‘permanent: true’ ni dependency da berishingiz kerak bo’ladi. Bu holat vaqtni tejalishi va keraksiz malumotlarni hotirada saqlanib turish holatlarini kamaytirish imkoniyatiga erishasiz. Dependency ni sihlashi ham albatta lazy usulida amallga oshadi.

ORGANISATION: GetX to’laligicha View, presentation logic, business logic, dependency injections va navigatsiyani bir biridan alohida saqlaydi, yani ularni layerlar orqali ajratadi. Siz contextni route lar orqali olib o’tishingizga hojat qolmaydi, yani siz widget tree yaratilishida javobgarlikni olmaysiz. Contextsiz ham siz controller/bloclarga qulay aloqa bog’lay olasiz. Yani siz viewdan presentation logic va business logiclarni to’laligicha ajrata olasiz. Yani siz Controller/Model/Bloc larni inject qilishingiz shart emas. Buning Uchun GetX o’zining dependency injection hususiyatidan foydalana oladi va DI ni view ga aloqasini butunlay to’htatadi.

GetX bilan siz applicationingizni har bir husuiyatini qayerdan va qanday topishni bilasiz va bu albatta GetX taqdim etgan clean code orqali erishiladi. Taminlanishlarni osonlashtirishga qo’shimcha ravishta modullarni ulashish imkoniyatini bera va bu avval flutterda deyarli amalga oshirish imkonsiz bo’lgan holat hisoblangan. BLoC flutter tartibga solingan codelarning boshlang’ich ko’rinishi edi, u business logic ni view dan ajratgan edi. GetX esa buning tabiy evolutsiyasi hisoblanadi. GetX bilan faqatgina business logic emas balki presentation logicni ham bir biridan ajratildi. Injection va navigatsiya ham ajratildi, natijada malumotlar qatlami butunlay ajratilgan ko’rinishga keldi. Siz qayerda nima saqlanayotgani haqida bilasiz va bu hatto ‘Hello World’ ni qurishdan ham osonroq ko’rinishga keldi. GetX eng qulay, tushunarli va o’zgartirishlar kiritish uchun qulay bo’lgan Flutter SDk si hisoblanadi. U o’zining atrfoida yigilgan ko’plab qulayliklar va afzalliklar bilan ishlaydi, u boshlang’ich o’rganuvchilarga qulay va expertlar uchun esa tushunarli. U ehtiyotkorlikni taminlovchi, doimiy yuqori performanceda ishlovchi, zamonaviy va default Flutter SDK da taqdim qilinmagan ko’plab turdagi API qulayliklarini o’z ichiga oladi.

· GetX hajm tominidan judda ham kata joy egallamaydi. U o’z ichiga ko’plab hususiyatlarni oladi, natijada dastur yaratishni boshlash vaqtida hech nima haqida qayg’urmasdan boshlash mumkin, va lekin bu hususiyatlar alohida packaeglar ichida saqlanadi va faqatgina foydalanganingizdagina u joy egallashi yoki performancega tasir qilishi mumkin. Agar siz uning faqatgina State management hususiyatidan foydalansangiz ana o’sha satate managmentning o’zigina compile bo’ladi. Agarda faqat route dan foydalansangiz hattoki state management umuman qo’llanilmaydi.

· GetX ulkan ecosistemani, kommunty, ko’plab ayni shu frame workda ishlovchi hamkasblarni siz uchun taqdim qila oladi faqatgina Flutter amalda qo’llanilayotgan bo’lsa bas.

Qo’shimcha sifatida, boshlang’ich rivojlanish protsedurasi to’liqligicha automatlashgan ko’rinishga keltirish imkoniga ega, nafaqat serverda balik frontend qismda ham va bu Get CLI orqali amalga oshadi.

Productivitylikka qo’shimcha sifatida VSCode va Android Studio/Intellij ga extention lar kiritilgan.

O’rnatilishi

Get ni pubspec.yaml filega qo’shing:

dependencies:

get:

foydalanmoqchi bo’lgan faylingizda Get ni import qiling:

import 'package:get/get.dart';

GetXning Uch ustuni

Get da ikki hil state management mavjud: Oddiy state management(GetBuilder) va reactive state management(GetX/Obx bu huddiki androidning live datakabi ishlaydi).

Reactive state management

Reactive programming ko’pchilik tomonidan qiyinligi sababli yoqtirilmagan stata management hisoblanadi. Lekin GetX reactive programmingni biroz soddaroq ko’rinishga keltirgan:

· Siz StreamControllerlar yaratishga muhtoj emassiz.

· Siz har bir o’zgaruvchi uchun streambuilder yaratishga muhtoj emassiz.

· Har bir state uchun mahsus class yaritishingiz shart emas.

· Boshlang’ich qiymat uchun get yasashingiz shart emas.

· Code generatorlarini foydalanishlikga ehtiyoj yo’q.

Reactive programming Get bilan huddiki setState foydalanish kabi oddiy.

Tasavvur qilamiz sizda o’zgaruvchi bor va har safar siz uni qiymatini oshirmoqchisiz, va barcha uni tinglab turuvchi widgetlar ham qayta yangilanadi.

Bu sizning count o’zgaruvchingiz:

var name = 'Jonatas Borges';

uni tinglanib yani qiymati o’zgarganida widgetlar sezishi uchun faqatgina “.obs” ni tugallanish qismiga qo’shsangiz bas:

var name = 'Jonatas Borges'.obs;

Va UI qismda qismda qachonki siz uning qiymatini chiqarmoqchi va har safar uning qiymati o’zgarganida widgetni yangilash uchun quyidagi amalda bajarishingiz kifoya :

Obx(() => Text("${controller.name}"));

State Management haqida qo’shimcha malumot:

State management haqida ko’plab malumotlarni shu yerda here ko’rishingiz mumkin. Bu yerda siz simpla state management va reactive management farqlari bn tanishishingiz mumkin.

Router management

Agar siz routes/snackbars/dialogs/bottomsheets larni contextsiz foydalanmoqchi bo’lsangiz GetX siz uchun eng yahshi tanlov hisoblanadi.

MaterialApp ni GetMaterialApp ga o’zgartiring:

GetMaterialApp( // Before: MaterialApp(

home: MyHome(),

)

Boshqa screenga yo’naltiring:

Get.to(NextScreen());

Boshqa screen ga nomi orqali ham yo’naltirishingiz mumkin:

Get.toNamed('/details');

Har qanday oyna, snackbar, dialoglar, yoki odatda siz Navigator.pop(context) orqali bajargan ishingizni siz quyidagi orqali ham amalga oshirishingiz mumkin:

Get.back();

Splash yoki login screenlarda stackga saqlamasdan navigate qilmoqchi bo’lsangiz quyidagidan foydalaning:

Get.off(NextScreen());

Keyingi screen ga o’tmoqchisiz va avvalgi barcha screenlarni stackdan tozalab ketishni hohlasangiz quyidagidn foydalaning:

Get.offAll(NextScreen());

Yuqoridagilarni birontasidaham context ishlatishga zarurat bo’lmadi bu esa Get route managmentning eng asosiy yutuqlaridan biri hisoblanadi.

Get o’z ichiga action nomi orqaliham navigate hususiyatiga ega va albatta stackni ustidan boshqaruv hususiyatini ham beradi. Bu here link orqali siz bu haqida aniqroq bilimga ega bo’lishingiz mumkin.

Dependency Management

Get judda ham sodda va o’z navbatida qudratli dependancy manager bilan taminlay oladi va bu orqali siz faqatgina bir qator ko’dning o’zida biorn bir class objectniga erishishingiz mumkin(Dependancy Injection).

Controller controller = Get.put(Controller()); // Rather Controller controller = Controller();

· Note: Agar siz Getning state manageridan foydalanayotgan bo’lsangiz, API larning qurilishiga etibor bering, va bu sizni view va controllerlarni osonroq bog’lashingizga yordam beradi.

Siz kerakli bo’lgan class objectini biz foydalanayotgan class tanasida yaratmasdan uni Get orqali yaratayabmiz va bu yerda u objectni chaqirish orqali erishayabmiz va bu holat butun app boylab erishish mumkin bo’lgan holatdir. Siz controller class objectini odatdagiday foydalanishingiz mumkin.

Get Saydaliev Akhror’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Tip: Get dependency management boshqa packagelardan alohida olingan, yani masalan sizning appingiz allaqachon ishlayotgan bo’lsaham siz bu packagedan bemalol foydalanishingiz mumkin.

controller.fetchApi()

Tasavvur qiling siz butun app bo’ylab turli hil oynalarga navigat qildingiz, va avval bo’lib o’tgan oynalaringizdan biron bir malumot sizga kerak bo’lsa Get.find() ni qo’llash orqali siz hech qanday dependencyga muhtoj bo’lmagan holada unga erishishingiz mumkin.

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 controllers instantiated, Get will always give you the right controller.

Siz avval o’tgan oynangizdagi data ga erishishingiz mumkin:

Text(controller.textFromApi);

Dependancymanagment haqidagi ko’plab malumotlarni va detallarni bu here link orqali ko’rishingiz mumkin.

Utils

Internalisations(Ko’p tillilik)

Tarjimon

Tarjimalar lug’atli map orqali saqlanadi va key / value ko’rinishida bo’ladi. Qo’shimcha tarjimon class yaratmoqchi va o’z malumotlaringizni saqlamoqchi bo’lsangiz Translations dan extend oling.

import 'package:get/get.dart';

class Messages extends Translations {

@override

Map<String, Map<String, String>> get keys => {

'en_US': {

'hello': 'Hello World',

},

'de_DE': {

'hello': 'Hallo Welt',

}

};

}

Trajimondan foydalanish

Shunchaki .tr qo’shish orqali berilgan so’zni tarjimasiga erishishingiz mumkin va unda Get.locale yoki Get.fallbackLocale dan foydalansiz.

Text('title'.tr);

Birlik va ko’plik holatlarda tarjimondan foydalanish

var products = [];

Text('singularKey'.trPlural('pluralKey', products.length, Args));

Tarjimonni parametrlar bilan foydalanish

import 'package:get/get.dart';

Map<String, Map<String, String>> get keys => {

'en_US': {

'logged_in': 'logged in as @name with email @email',

},

'es_ES': {

'logged_in': 'iniciado sesión como @name con e-mail @email',

}

};

Text('logged_in'.trParams({

'name': 'Jhon',

'email': 'jhon@example.com'

}));

Locallar

GetMaterialApp ga parameter o’tqazish orqali tarjima qilish

return GetMaterialApp(

translations: Messages(), // your translations

locale: Locale('en', 'US'), // translations will be displayed in that locale

fallbackLocale: Locale('en', 'UK'), // specify the fallback locale in case an invalid locale is selected.

);

Change Local

Get.updateLocale(locale) dan foydalangan holatda localni yangilang. Natijada Yangi tilga o’zgartiriladi

var locale = Locale('en', 'US');

Get.updateLocale(locale);

System Locale

Sistemaning localidan foydalanish uchun Get.deviceLocale dan foydalaning

return GetMaterialApp(

locale: Get.deviceLocale,

);

Temani o’zgartirish

GetMatirialApp dan avval hech qanday widget foydalanmang aks holda update qilishga tasir qiladi. Bu duplicate key larning yaralishiga olib keladi. Ko’pchilik temani almashtirish uchun eskirgan “ThemeProvider” widgetidan foydalanadi va bu GetX bilan umuman kerak emas.

Siz shunchaki custom theme yaratasiz va quyidagi usul bilan uni almashtirishingiz mumkin.

Get.changeTheme(ThemeData.light());

Agar siz button kabi bosilganda o’z ko’rinishini o’zgartiruvchi nimadur yasamoqchi bolsangiz siz GetX API larning kombinatsiyasidan foydalanishingiz mumkin.

· Avvaldark mode foydalanayotganligini tekshiramiz .

· Va shunchaki onPress da buyruq beramiz.

Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark());

GetConnect

GetConnect backend va fronetdni bir biri bilan bog’lovchi eng qulay yo’llardan biridir.

Deafult Configuration

Faqatgina GetConnectni extend qilish orqali siz barcha GET/POST/PUT/DELETE/SOCKET metodlarini API laringiz bn bog’lay olasiz.

class UserProvider extends GetConnect {

// Get request

Future<Response> getUser(int id) => get('http://youapi/users/$id');

// Post request

Future<Response> postUser(Map data) => post('http://youapi/users', body: data);

// Post request with File

Future<Response<CasesModel>> postCases(List<int> image) {

final form = FormData({

'file': MultipartFile(image, filename: 'avatar.png'),

'otherFile': MultipartFile(image, filename: 'cover.png'),

});

return post('http://youapi/users/upload', form);

}

GetSocket userMessages() {

return socket('https://yourapi/users/socket');

}

}