GetX အကြောင်း လိုတိုရှင်း

Fast , Stable , Extra-light and Powerful flutter framework

Flutter နဲ့ app ရေးကြ ပီ ဆိုရင် statemanagement ကို ဘယ်ဟာသူံး သင့်သလဲ ဘယ်ဟာ အကောင်းဆုံးလဲ နဲ့ ရွေးချယ်ကြ ရပါတယ် အဲ့ထဲမှာ GetX လဲ တစ်ခု အပါဝင် ဖြစ်လာပါတယ်

Getx framework ကို Apr 26, 2020 မှာ alpha version နဲ့ စတင်ခဲ့ပါတာ အခုလက်ရှိ ထိ ဆိုရင် version 3.17.1 ထိ ရောက်နေပါ ပြီ ဗျ

  dependencies:
    get: ^3.17.1

pubspec.yaml ဖိုင်မှာ ရေးရပါမယ်

ဘာ အတွက်ကြောင့် သုံးသင့်တာလဲ ?

တကယ်လို့ သင်က flutter beginner တစ်ယောက်ဖစ်မယ် state management တွေ အကြောင်းစလေ့လာနေပီ ဆိုရင် Getx ကနေ စသင့်ပါတယ် သူက MVC pattern နဲ့ဆင်တာမို့ နားလည်ရလွယ်ကူတယ်သုံးရတာ လွယ်ကူတယ်ပေါ့ဗျာ

နောက်တစ်ချက်က flutter bloc pattern နဲ့ သင်က ရေးနေတဲ့ သူဆိုရင် patternနဲ့ ဝင်အောင် လိုက်ရေးနေရလို့ code တေ ထပ်ခါတစ်လဲလဲ ဖစ်လာတယ် code base ကြီးဖောင်းပွလာတယ် လို့ ယူဆမယ် ဆိုရင် လဲ getx ကို လေ့လာ သင့်ပါတယ်

Beginner အနေ နဲ့ bloc pattern တို့ riverpod တို့ redux တို့ကို လေ့လာရခက်နေမယ် နားမလည်ဘူး ဖစ်နေရင်လဲ Getx နဲ့ဘဲ စလေ့လာသင့် ပါတယ် နောက်ဆုံး အချက် ကတော့ mini project လောက်လေးတွေ ဝါသနာ အရ ရေးမဲ့ app လေးတွေ အတွက် ဆို Getx ကိုရွေးချယ်ရင် အချိန်တိုတွင်း အလုပ် ပြီးမြောက်နိုင်တယ်

Production အတွက် Ready ဖစ်ပီလား ဆိုရင် ဒီမေးခွန်းအတွက် ဖြေနိုင်မဲ့ အတွေ့ကြုံ စာရေးသူမှာ မရှိသေးပါဘူး တခြား state management တေကိုလဲ တအားကို strong ဖစ်ကြပါတယ် code ရေးရနည်းလေ တိုလေ ကောင်းလေ တော့ မတွေးသင့်ဘူးဗျ စနစ်ကျလေ ကောင်းလေပေါ့ သူ့ layer နဲ့ သူ ရှိနေမယ်ဆိုရင် ပြောင်းရလွယ် ပြင်ရလွယ်ကူတာမို့ပါ Getx ကိုလေ့လာပြီးရင် ရွေးချယ်သင့်မရွေးချယ်သင့် ကို့ ဘာသာ ဆုံးဖြတ် ကြရမှာဖစ်ပါတယ်

ဘယ်လို အသုံးဝင်တာလဲ ဘာတွေကောင်းတာလဲ ?

သူရဲ့ features တွေကတော့

1. State Management

2. Route Managment

3. Dependency Management

4. Internationalization

5. Validation , storage

Session 1 : State Management

State management ဆိုတာ ကို ဘာ မှန်းရှင်းရှင်းလင်းလင်း မသိသေးဘူးဆိုရင် ဒီစာ ပိုဒ်လေး ကို ပြီးအောင် ဖတ် ပေးပါ ( Every thing is widget) ဆိုတာ flutter ရဲ့ဆောင်ပုဒ်ပါ ကျွန်တော် တို့ ရေးတဲ့ ui မှာ မြင်မြင် သမျှ Widget တေ ပါ ( စာသားတို့ ဓာတ်ပုံတို့ စသဖြင့်ပေါ့) Widget တိုင်း ကို paint လုပ်ရပါတယ် စိတ်ကူးကြည့်ရအောင် ကျွန်တော်တို့ app မှာ button လေး တစ်ခု (ခလုတ်လေးတစ်ခုရှိမယ် ) အဲ့ခလုတ်လေးကို နိုပ်လိုက်ရင် screen တစ်ခုလုံး အရောင်ပြောင်းပေးရမယ်ဆိုပါစိူ့ ok appကို စ run ပီဆိုရင် screen မှာ စစချင်းမြင်ရမဲ့ button ဆိုတဲ့ widget ကို ရေးထားတဲ့ instruction အတိုင်း တည်ဆောက်ပေးတယ် ui မှာ မြင်ရပီဆိုတာ drawing လုပ်ပေးလိုက်တာ ဖစ်ပါတယ် အဲ့ထိ ရှင်းမယ်ဆိုရင် ခလုတ်ကို နိုပ်ပါမယ် ဘာဖစ်မလဲ screen color ချိန်းတယ်နော် အဲ့တာက btn ကိုနိုပ်တဲ့ အချိန်မှာ widget တေ အားလူံး redraw ပြန်လုပ်တယ် refresh လုပ်လိုက်တာပေါ့ဗျာ IT အသူံးနှုန်းဆို setState() ပြန်လုပ်တယ်ဆိုတာပါ state managment ဆိုတာ လက်ရှိ screen မှာဘဲ action လုပ်ရင် ui redraw လုပ်တာတေ ကို ချိန် ညိပေးတာပါ သေချာနားလည်လိုတယ် code နဲ့ တွဲ ကြည့်မယ် ဆို counter appပါ လူတိုင်း counter appကနေ စကြပါတယ် သဘောတရား နားလည်ရင် bloc, getx, redux အကုန် သဘောတရားတူတူပါဘဲ

GetX ရဲ့ State management မှာ ၂ နည်းရှိပါတယ် classic approach နဲ့ reactive approch ဆိုပီး Classic way မှာ တော့ Get Builder ကို သုံးရပါတယ် ပီးရင် update() , setState()ပြန်လုပ်ပေး ဖို့ ရေးပေးရပါတယ် Reactive way (Getx,Obx) ဆိုတာ တော့သိမှာပါ သင်က android developer သမားတစ်ယောက်ဆိုရင် Rx java တို့ live data တို့ သုံးဖူးမယ် နားလည်ထားတယ်ဆိုရင် တူတူပါဘဲဗျ တကယ်လို့ မသိသေးတဲ့ သူဆိုရင် ဒီလိုနားလည်ထားနိုင်ပါတယ် ( counter app မှာ plus minus ခလုတ်နဲ့ အရေတွက်ပြတဲ့ Text တစ်ခု ပါတယ်နော် ကျွန်တော်တို့ plus ခလုတ်ကို နိပ်ရင် text မှာ နံပါတ်တိုးသွားပါတယ် အဲ့တာ က အမြင်နော် နောက်ကွယ်မှာ က အဲ့ လို widget ကို redaw ဖစ်အောင် setSate() ပြန်လုပ်ပေးနေပါတယ် count ဆိုတဲ့ variable ဟာ observable ဖစ်တာမို့ change ဖစ်တိုင်း ui မှာ effect ဖစ်ပေးပါတယ် auto refresh ပေါ့ )

GetxController

Controller class ကို အားလုံးရင်းနှီးပီးသားပါ ကျွန်တော်တို့ app အတွက် လိုအပ်တဲ့ bussiness logic code တေ သတ်မှတ်ရေးသားရမဲ့နေရာပေါ့ GetX မှာ သူံးရင် GetxController အနေနဲ့ ရေးရပါတယ် သူ့ကို DisposableInterface ကနေ extend လုပ်ထားတာပါ

GetxController မှာ method နှစ်ခု ရှိပါတယ် onInit() , onClose()

class Controller extends GetxController {
	
  @override
  void onInit() { // called immediately after the widget is allocated memory
    super.onInit();
  }

 
  @override
  void onClose() { // called just before the Controller is deleted from memory
    super.onClose();
  }

}

Get Builder ( ) အသုံးပြုပုံ သာမာန် widget setState() ဖစ်ဖို့ လောက်ဘဲ သုံးဖို့လိုမယ်ဆိုရင် ဖစ်တဲ့ GetBuilder ကိုသုံးရပါတယ် သူက lightweight ဖစ်ပါတယ် setState() မှာ ချက်ချင်း widget redraw ဖစ်ပေးနိုင်ပါတယ်

ကျွန်တော်တို့ သိထားတာ setState() ပြန်လုပ်နိုင်ဖို့ဆိုတာ Stateful widget ကို extends ထားမှ လုပ်နိုင်တာပါ ဒါပေမဲ့ Get Builder မှာတော့ Stateful widget ကို သုံးစရာမလိုပါဘူး Statelesss Widget ကို သုံးထားရင်တောင် re building ဖစ်တာမို့ပါ

GetBuilder<Controller>( // specify type as Controller
  init: Controller(), // intialize with the Controller
  builder: (value) => Text(
    '${value.counter}', // value is an instance of Controller.
  ),
),

GetBuilder<Controller>( // no need to initialize Controller ever again, just mention the type
  builder: (value) => Text(
    '${value.counter}', // counter is updated when increment() is called
  ),
),

update() method ကိုမေ့လို့မဖစ်ပါဘူး controller ထဲမှာ တန်ဖိုးချိန်းတိုင်း update() ကို ရေးပေးတာ မေ့လို့မရပါဘူး update() မပါရင် တန်ဖိုး မပြောင်းပါဘူး

class Controller extends GetxController {

  int counter = 0;

  void increment() {
    counter++;
    update(); // look here!
  }

}

GetX ( ) အသုံးပြုပုံ

GetX က GetBuilder() လောက် light weight မဖစ်ပါဘူး Render ဖစ်တဲ့အချိန်သာမာန် လောက်ပေါ့ GetBuilder မှာ reactive မရနိုင်တာကြောင့် GetX() နဲ့ရေးရပါတယ်

GetX() ကို အသုံးပြုချင်းက StreamBuilder() ကို boilerplate code နည်းနည်းနဲ့ ရေးတာနဲ့ တူပါတယ် Reactive approach တွေကို အများအားဖြင့် network ကနေ data ဆွဲတာ local database ကနေ data managementလုပ်တာတွေ မှာ မြင်နိုင်ပါတယ်

ရိုးရိုး variable တစ်ခု

var name = 'mgmg';

reactive variable အနေနဲ့ ပြောင်းရေးရင်

var name = 'mgmg'.obs; (obs) ဆိုတာက observable data type လို့ ပြောတာပါ

GetX<Controller>(
  init: Controller(),
  builder: (val) => Text(
    '${val.counter.value}',
  ),
),

class Controller extends GetxController {

  var counter = 0.obs;

  void increment() => counter.value++;

}

Obx ( ) အသုံးပြုပုံ

GetX() နဲ့ Obx() နဲ့ reactive လုပ်ဆောင်ပုံချင်း သဘော တရားချင်း တူပါတယ်

မတူတာ code syntax ပါ ဒီပုံစံလေး ရေးကြပါတယ်

Obx(() ⇒ )

သို့မဟုတ်

Obx( ( ) { // logic code } )

Obx(() => Text(
  '${controller.user.value.name}'
  ),
),

class User {
  String name;
  User({this.name});
}

class Controller extends GetxController {
	
  var user = User(name: "mgmg").obs; // declare just like any other variable
	
  void changeName() => user.value.name = "aung aung"; // use .value and access any variables of the class

}

Session 2 : Dependency Management

Dependency လုပ်တယ် ဆိုတဲ့ အသုံးနှုန်း သဘောတရားကို သိတယ်ဆို ကျော်ဖတ်ပေးပါ မသိသေးရင် ( Object တစ်ခုကို နေရာတိုင်းမှာ လိုလို့ ခဏ ခဏ new instance ဆောက် ပြီး သူံးနေရမှာ အဆင် မပြေ ဘူး ဗျ memory စားတယ် ဒီတော့ obj တစ်ခုကို တစ်ခါဘဲ instance လုပ်မယ် ကြိုက်တဲ့ class ကြိုက်တဲ့နေရာကနေ ပြန်ခေါသူံးလို့ ရနိုင်ရမယ် ဆိုတာ ပါဘဲ)

ဒီ မှာဆိုရင် Contoller ကို widget နေရာအများကြီးမှာ အသုံးပြူဖိူ့ လိုတာမို့ dependency နည်းတဲ့ obj inject လုပ်လိုက်တာ မြင်ရမှာပါ

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

Controller controller = Get.find();

Text(controller.textFromApi);

Session 3: Route management

Getx ရဲ့ route management က page တစ်ခုနဲ့ တစ်ခု အကူးပြောင်းရေးနည်း တွေကို တော်တော် ထိန်းပေးနိုင်တယ် ပြောရမယ် ရေးနေကြ နည်းတွေက Navigator.push() ဆို ရင် next screen ကူးတယ် ဆိုတာတော့ သိထားကြမှာပါ အဆင်လိုက် မဟုတ်တဲ့ screen အကူးပြောင်းတွေဆို naming route နဲ့ သတ်မှတ်ပြီး ရေးကြတယ်ပေါ့ဗျာ Navigator widget နဲ့ ရေးရင် code line ရေ များတယ် အစဉ်လိုက် မဖစ်တဲ့ screenတေ handle လုပ်ရ ခတ်တယ် စသဖြင့် biloerplate code လေးတွေ လျော့အောင် 1 line code နဲ့တင် route manageလုပ်နိုင်အောင် ကူညီပေးပါတယ်

step 1 အနေနဲ့ ကျွန်တော်တို့ material app ကို GetMaterialApp() လို့ရေးရပါမယ်

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
)

navigator နဲ့ နောက် screen ကူးမယ်ဆိုရင် ဒီလိုရေး၇ပါတယ်

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

Getx က screen တစ်ခုနင့် တစ်ခု အကူးကို Get.to() ကို သုံးရပါတယ် code ကျစ်လစ်သွားတာ မြင်သာမှာပါ

Get.to(NextScreen());

name route တွေ အတွက် .Get.toNamed(); ကို သုံးရပါတယ်

Get.toNamed('/details');

A screen ကနေ B screen ကို ကူးလိုက်ပါတယ် B ကနေ A ကို back ပြန် ချင်ရင် Navigator.pop() ကို သုံးရပါတယ် android မှာဆို onBackPressed()ပေါ့

GetX မှာ လက်ရှိ screen ကို ပိတ်ချင်ရင် Get.back() ကို သုံးပါတယ်

Get.back();

A screen ကနေ B screen ကို ကူးလိုက်ပါတယ် B ကနေ back ပြန် ရင် Aဆိုတာ မရှိတော့ဘူး မြင်သာအောင် ပြရရင် login screen ကနေ home screenကို ရောက်တယ် home ကို back ထွက်ရင် app ထွက်သွားတယ် login screen မရှိတော့ဘူး A ကနေ B ကို ကူးပီး A က auto close ဖစ်သွားတာပေါ့ အဲ့တာမျိုးဆိုရင် Get.off() ကိုသုံးရပါတယ်

Get.off(NextScreen());

shopping app မှာ checkout လုပ်လိုက်မယ် ပြီးရင် success screen ပြမယ် success screen ကနေ ok နိုပ်ရင် home screen ပြန်ရောက်တယ် home ကို back ထွက်ရင် app close သွားတယ် အဲ့တာမျိုး screen တစ်ခုကနေ နောက် screen ကို အကူးမှာ သူ့အရင်ရှေ့မှာရှိတဲ့ previous screenတွေ အကုန် close ပီးမှ next screen ကို ကူးတာမျိုးဆိုရင် Get.offAll() ဖစ်ပါတယ်

Get.offAll(NextScreen());

Session 4 : Internationalization

1. Localization ( language)

ကျွန်တော်တို့ app ကို multi language support ပေးချင်တယ် eng, myanmar, chia စသဖြင့် localization ရေးဖို့လိုလာပီဆို ရင် လုပ်လို့ ရတဲ့ နည်း သုံးနည်းရှိပါတယ်

manual နည်းကတော့ intl ကိုသုံးပီး ရေးသားနည်းပါ သူက အခြေခံ အကျဆုံးဖစ်ပါတယ် ရေးရတာ များပီး လုပ်ရမဲ့အဆင့်တေ command တေ သိဖို့ လိုပါတယ် အဲ့တာ စမ်းကြည့်နားလည်ပီ လုပ်နိုင်ပီဆိုရင် အခြေခံ ခိုင်ပါလိမ့်မယ် အခက်ခဲဆုံးနည်းက သဘောတရားနားလည်ဖို့ အလွယ်ကူဆုံးမို့ပါ

နောက် နည်းကတော့ easy localization plugin ပါ ဒီနည်းက အရမ်းကိုလွယ်ပါတယ် myanmar.json eng.json ဖိုင်ဆောက်ပီး ရေးထားယုံပါ ရွေးလိုက်တဲ့ locale ကိုလဲ session အနေနဲ့ မှတ်သားပေးပါတယ် ဘာ မှ လုပ်ပေးဖို့ကို မလိုတာပါ

နောက်ဆူံး နည်းကတော့ GetX ပါ getx က localizationအတွက် လုပ်ရလွယ်အောင် ဖန်တီးပေးထားပါတယ်

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'en_US': {
          'hello': 'Hello World',
        },
        'my': {
          'hello': 'ဟယ်လို',
        }
      };
}

Text('title'.tr);

.tr ဆိုတာ translate ရဲ့ short term ပါ Text('title'.tr); က title ဆိုတဲ့ key ကို မြင်ရင် လက်ရှိ ဘာသာ ကို translate လုပ်ပီး ပြပေးမယ်လို့ ဆိုလိုတာပါ easy localization နည်းမှာတော့ .tr() ဆိုပီး extensiton function အနေနဲ့ သုံးတာဖစ်ပါတယ် getx နည်းသုံးရင် easy localization သုံးလို့မရပါဘူး .tr() ဆိုတာကိူ မသိဖစ်ပါမယ် သူ့ရဲ့ translate ဖန်ရှင် ဖစ်တဲ့ .tr ကိုဘဲ သိပါတယ်

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

language ချိမ်းမယ် ဆိုရင် Get.updateLocale(locale)

var locale = Locale('en', 'US');
Get.updateLocale(locale);

2. Theme

app ရဲ့ theme ကို ချိန်းနိုင်တဲ့ နည်းတေကတော့ bloc , provider , getx တို့ ဖစ်ပါတယ် တခြားနည်းတွေမှာ ရေးရတဲ့ code line ရေ များပေမဲ့ getx မှာတော့ single lineနဲ့ တင် ရပါတယ်

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

လက်တလော စာတန်းပြုစု နေသေးပါသည်

စာတွေ့ ဖတ်ပြီးနောက် လက်တွေ့ project ကိုလေ့လာနိုင်ရန် demo project လုပ်ပေးနေပါသည် ယခု link အားသိမ်းဆည်းထားပေးပါ complete guide ဖစ်ရင် announce ပြန်လုပ်ပေးပါမည် အကြောင်းကြားစေလိုပါက email ချန်ခဲ့ပေးပါ

( သိချင်သော အကြောင်းရာအား Topic တစ်ခုအနေ ဖြင့် ဖတ်ရှုလိုပါက comment ရေးသားခဲ့ပေးပါ)

Other Advanced APIs

// give the current args from currentScreen
Get.arguments

// 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 open
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.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia

//Check the device type
GetPlatform.isMobile
GetPlatform.isDesktop
//All platforms are supported independently in web!
//You can tell if you are running inside a browser
//on Windows, iOS, OSX, Android, etc.
GetPlatform.isWeb


// Equivalent to : MediaQuery.of(context).size.height,
// but immutable.
Get.height
Get.width

// Gives the current context of the 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 Desktop or browser windows that can be scaled) you will need to use context.
context.width
context.height

// Gives you the power to define half the screen, 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 than 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()

/// Returns a value<T> according to the screen size
/// can give value for:
/// watch: if the shortestSide is smaller than 300
/// mobile: if the shortestSide is smaller than 600
/// tablet: if the shortestSide is smaller than 1200
/// desktop: if width is largest than 1200
context.responsiveValue<T>()

Thank you for reading.. Please follow my github account. Thanks.

dev-mgkaung - OverviewGitHub