Flutter: GetX [EP.2] Ecosystem in Get package

สำหรับเรื่อง State Management ที่ชื่อ GetX ผมเคยเขียน Article แรกไว้แล้ว ที่นี่

แต่เพราะความนิยมของ state management ตัวนี้ที่ powerful มากๆ จึงต้องมาเพิ่มเติมกันหน่อย อ่านได้ ที่นี่ คับสำหรับเหตุผลที่ว่าทำไมควรใช้ GetX

แต่ความสามารถของ Get ไม่ได้มีเพียงแค่เรื่อง state เท่านั้น ณ ตอนนี้ package ตัวนี้ได้รวบรวมความสามารถต่างๆเข้ามาเป็น Ecosystem ของ Get ดังนี้เลย

https://pub.dev/packages/get/versions/3.26.0 (Tested with v 3.26.0)

สิ่งที่นิยมใช้จาก Get คือ

1. ใช้เป็น State management ด้วย Obx() หรือ GetBuilder()
2. ใช้ในการทำ Navigation ด้วย Get.to() หรือ Get.back() etc.
3. เปลี่ยน Theme

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

4. ทำ Validator ให้กับ input field ต่างๆ ซึ่งมีให้เลือกใช้เยอะมากกกกก จริงๆ

validation from GetUtils

5. ควบคุม Internationalization

ในการใช้งาน เพียงแค่กำหนด GetMaterialApp แทน MaterialApp และกำหนด locale ผ่าน property 2 ตัวนี้คือ Get.locale และ Get.fallbackLocale

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

เมื่อต้องการใช้งาน เพียง append ด้วย .tr เท่านั้น

Text('hello'.tr);

6. สร้าง Snackbar

Get.snackbar('Hi', 'Q-Electronics');

Snack bar from Get.snackbar()

7. เป็น storage service เหมือนกับ shared preferences

GetStorage box = GetStorage();
box.write('key': 'value');
box.read('key')

Ready? มา clarify เพิ่มเติมในส่วนของ features ยอดฮิตที่ใช้งานกันอย่างกว้างขวาง คือ State Management และ Route Management กันครับ

State Management

GetX มี 2 options ของ state management คือ

• Simple state manager (GetBuilder)
  - ใช้ที่ไหนก้อตามที่ต้องการใช้ setState ซึ่งจะ consume Ram น้อยกว่ามาก แต่จะทำงานกับ stream ไม่ได้
• Reactive state manager (GetX/Obx)
  - GetX/Obx ใช้เมื่อเราต้องการให้แอฟเราเป็น reactive stream approach คือ เปลี่ยนค่าได้ทันทีที่ตัวแปรหรือข้อมูลมีการเปลี่ยนแปลงอย่างต่อเนื่อง หรือ เมื่อทำงานกับ stream
  - Obx จะเขียนง่ายกว่าเพราะ simple syntax และ Obx ไม่ต้องการ Type ดังนั้นสามารถใช้ได้กับ many controllers.

1. Simple state manager (GetBuilder)

วิธีแบบ Simple ที่จะใช้ GetBuilderในการ rebuild UI โดยจะเป็นแยก logic ออกมาสร้างเป็น controller, เมื่อ variable มีการเปลียนแปลงค่า จะเรียกใช้ update() method เพื่อ notify ให้ rebuild widgets เฉพาะในส่วนที่ครอบไว้ด้วย GetBuilder() เท่านั้น

ซึ่ง performance จะดีกว่าการ rebuild ทุก widgets ด้วย setState() ใน Stateful()

• ทดสอบโดยสร้าง counter app from default ขึ้นมาก่อนแบบนี้ และติดตั้ง package get ลงไปเลยคับ

get: ^3.26.0

Default counter app.

เราจะแยกในส่วนของ Logic ออกมาสร้างเป็น controller โดย extend มาจาก GetxController (ใช้กับ import ‘package:get/get.dart’)

Applied GetBuilder() into counter_page

Get.put() เป็นการ Inject instance เข้าไปใน memory (makes the dependency available to all the child routes)เพือให้เรียกใช้ได้ ซึ่งเราสามารถเรียกใช้งานจาก class ไหนก็ได้ใน project นะ ซึ่งวิธีการเรียกใช้งานก็คือคำสั่งด้านล่างนั่นเองคือ Get.find()

Get.find() เป็นการ Find instance of required class.

2. Reactive State Management (GetX/Obx)

GetBuilder ที่เราใช้ในวิธีแบบ simple นั้นไม่สามาถใช้ได้ในลักษณะของการ stream ซึ่งเราจะเปลี่ยนมาใช้ GetX class ซึ่งจะมี syntax ที่คล้ายกับ GetBuilder

เมื่อใช้ GetX/Obx จะไม่ใช่ update()แล้ว แต่จะ notfiy ผ่านการเพิ่ม .obs เข้าไปได้เลย

use .obs as a notify and use Obx() as a listener (หลักการของ notify และ listener) => test_getx/simple_state_management/counter_page.dart

เมือทดสอบจะเห็นว่า สามารถใช้งานได้เหมือนกันทั้งตัว listener แบบ GetX() และ Obx()

Using Getx() and Obx()

Route Management

นอกจากความสามารถใน State management แล้ว Get ยังสามารถทำ Route Management ได้ด้วย โดยถ้าเราต้องการเข้ามาอยู่ใน ecosystem ของ Get จะต้องเริ่มจาก

1. ใช้ GetMaterailApp แทน MaterialApp ที่ main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
    // return MaterialApp(

2. เมื่อต้องการ Navigation.push() สามารถใช้ Get.to() แทนได้

Get.to(SecondPage());  // มีค่าเท่ากับ Navigator.push()

สิ่งที่พิเศษกว่าของการ navigate โดยใช้ Get.to() คือ มี property ให้เลือกใช้มากมาย ไม่ว่าจะเป็น transition, curve, duration etc. ซึ่งใน original Navigator ไม่มีมาให้.

property in Get.to()

เมื่อต้องการ navigate using name

Get.toNamed('second_page');  // มีค่าเท่ากับ Navigator.pushNamed()

เมื่อต้องการ pop ออก

Get.back();  // มีค่าเท่ากับ Navigator.popUntil()

Show Get.to() and Get.back()

ใช้งานได้ปกติ Get.to() และ Get.back()

จริงๆรายละเอียดของการใช้งาน package Get เยอะมากจริงๆ ลองศึกษาเพิ่มเติมใน Link นี้และด้านล่างได้เลยคับ

Utils ที่เป็นประโยชน์ที่ใช้ทดแทนคำสั่งยาวๆแบบเดิม

//Check in what platform the app is running
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia
GetPlatform.isMobile
GetPlatform.isDesktop
GetPlatform.isWeb


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

// Gives the current context of the Navigator.
Get.context
// 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.
context.heightTransformer()
context.widthTransformer()
// Check if device is on landscape mode
context.isLandscape()

// Check if device is on portrait mode
context.isPortrait()

// check if dialog is open
Get.isDialogOpen

Performace of kind of state managements.

Code in my repo

If you think it’s useful a bit for you, just clap your hands 👏 as you wish to be encouraged me to write and develop myself for helping the world as I can.

แล้วพบกันใหม่คับ
GRASSROOT ENGINEER

References:
https://medium.com/mindful-engineering/lets-getx-in-flutter-4eaff2826ac7
https://medium.com/flutter-community/the-flutter-getx-ecosystem-state-management-881c7235511d