Flutter: GetX [EP.1] เรามันคนพันธ์ X

3 min readMay 3, 2021

--

GetX เป็น State Management ที่ไต่ขึ้นมาเป็นอันดับหนึ่งของ Flutter เพราะสามารถจัดการเรื่อง performance ได้ดี, เรื่องของ dependency injection และทำ router management ได้อย่างรวดเร็ว.

มาลองเล่นกันเลยดีกว่า

โดยจะทำตาม Tutorial ระบบ Add to Cart ของการเลือกสินค้าซึ่งจะมีการเปลียนแปลง UI ในหน้าเดียวกัน แต่จะใช้ State เข้ามาช่วย ทำให้ไม่ต้อง rebuild ใหม่ทุกครั้งเหมือนกับ Stateful (เพราะ state ถูกจัดการใน GetX หมดแล้ว)

วิธีการแบบนี้เราจะใช้ Stateless ได้เลย ส่วนตรงไหนที่ต้องการให้มีการ update ใน UI ก็เพียงแค่ wrap ด้วย GetX() เท่านั้น

เริ่มจริงๆล่ะ

ติดตั้ง extension ที่ช่วยให้เขียนได้ง่ายขึ้นใน vscode เลยคับ พร้อมกับติดตั้ง GetX เข้าไปใน pubspec.yaml

2. สร้าง Flutter project ขึ้นมาใหม่พร้อมกับติดตั้ง GetX เข้าไปใน pubspec.yamlเลยคับ

dependencies:
  get: ^3.23.1

ในส่วน Folder Structure ให้แบ่งตามนี้คือ models, views, controllers.

lib
└── controllers
└── models     
└── views
    └── shopping_page.dart
└── main.dart

Create new Flutter project and customize เป็นแบบนี้

3. ขึ้นโครงในส่วนของ shopping_page.dart ให้เป็น Column ที่มี ListView.builder และ return ออกมาเป็น Card() ลักษณะนี้

ขึ้นโครงในส่วนของ ui ให้เป็น SafeArea > Column > Expanded > ListView.builder

Error about size of ui (**hasSize**) เมื่อเรากำหนดขอบเขตเกี่ยวกับขนาดไม่ชัดเจน

4. สร้างเพิ่มเติม ส่วนของ models และ controllers.

product.dart ใน folder models เพื่อเป็น model ที่จะใช้กับ data ของเรา
shopping_controller.dart ใน folder controllers

lib
└── models     
    └── product.dart└── controllers
    └── shopping_controller.dartassets
└── locales
    ├── en-US.json                 
    └── th-TH.json

และเพิ่มส่วนของ models และ controllers โดย controller class จะ extends มาจาก GetxController.

5. กล้บไปที่หน้าจอ UI ของเราใน views/shopping_page.dart และเพิ่มเติมดังนี้

สร้าง controller (shoppingController) และเพิ่มในส่วน dependency injection (Get.put())
สร้าง GetX ให้ wrap ListView.builder() ไว้ การทำแบบนี้จะทำให้ ListView always listen to the data inside contoller
เพิ่มหน้าตาของ UI เข้าไปใน Card จนถึงขั้นตอนนี้ เมื่อ reset จะได้ UI ตามภาพด้านล่าง

เพิ่ม GetX เข้าไปเพื่อให้ update UI of ListView.builder()

จนถึงขั้นตอนนี้ เมื่อมีการกด button จะยังไม่มีการเปลี่ยนแปลงใดๆเกิดขึ้น เพราะเรายังไม่ได้ใส่ Logic ให้กับมันนะครับ

6. สร้าง controller ไฟล์ใหม่สำหรับจัดการระบบ cart ชื่อว่า cart_controller.dart โดย extends มาจาก GetxController นะ

└── controllers
    └── shopping_controller.dart
    └── cart_controller.dart

จากนั้นจะเพิ่มในส่วนของ CartController และไปเรียกใช้ใน UI ShoppingPage

ลำดับขั้นตอนการสร้าง logic ใน controller เพื่อมาเรียกใช้งานที่ UI

สรุป:

เพื่อให้ง่ายในการจัดการจะแบ่งส่วนต่างๆเป็น MVC

Models (เก็บในส่วนของ model ที่ใช้ในการจัดการ response)Views (เป็นส่วนของ UI)Controllers (เป็นส่วนของ State และ Logic โดยในส่วนนี้จะมีทั้งส่วนที่เราจะ observ และ Method ต่างๆ)

2. เราสามารถใช้ Stateless กับทุกๆหน้าที่มี State ต่างๆได้เลย

3. เมื่อมีการกดปุ่ม Add to Cart จะทำให้ไปเรียก addToCart()ใน controller เพื่อ add ค่าเข้าไปใน List ของ Product
จากนั้นใน controller ก็จะมีการคืนค่าออกไปทันที เพราะได้ observe ไว้อยู่แล้วที่ cartItems

4. เมื่อมีการคืนค่าออกมาจาก Controller ส่วนไหนใน UI ที่มี GetX ครอบไว้อยู่ก็จะได้รับการ update UI ทันที