GetX Flutter – State Management – Cách quản lý State

GetX trong Flutter là một thư viện rất tiện ích và được dùng rất nhiều trong lập trình Flutter bởi nhiều tính năng ưu việt, dễ sử dụng và nó trở thành trending trong lập trình Flutter hiện nay.

GetX trong lập trình Flutter có rất nhiều tính năng tiện ích, dễ sử dụng. Trong đó có tính năng quản lý state- State Management.
Bài viết dưới đây là ví dụ về cách sử dụng tính năng này của GetX trong lập trình Flutter. Mời bạn theo dõi và thực hành theo.

1. Khai báo thư viện
Tạo một project mới và khai báo thư viện mới nhất trong file pubspec.yaml

Tạo cấu trúc project như bên dưới :

2. Sử dụng GetMaterialApp
Khi sử dụng bất cứ tính năng gì của GetX bạn cũng nên khai báo :

và sử dụng GetMaterialApp trong Widget đầu tiên của ứng dụng.

3. Xác định các giá trị trọng tâm

Trong ví dụ này Báo Flutter muốn truyền các giá trị là thông tin của Báo Flutter từ màn hình Home đến các màn hình khác thông nhờ GetX và khi các giá trị này thay đổi thì các Widget sử dụng những biến này cũng cập nhật theo.

Kịch bản như thế này :
+ Tạo màn hình Home để nhập thông tin của Báo Flutter, Sau đó nhấn nút ” Xác nhận” rồi chuyển sang màn hình khác mà màn hình đó có thể sử dụng được dữ liệu về Báo Flutter thông qua GetX.

Các giá trị cần được truyền đi là các thông tin: tên, số zalo, website, mô tả

Vì thế chúng ta cần tạo một controller :
Tạo một file: information.dart, trong folder : models

4.Thực hiện chức năng cập nhật

4.1-Trong folder : resources > widgets , tạo file : common_widgets.dart có nội dung :

4.2-Tạo file: strings.dart trong : resources > strings

4.3-Thực hiện tính năng cập nhật thông tin lên “provider”

Tính năng cập nhật thông tin lên “provider” , chúng ta đặt trong button “Xác nhận”.

Trong màn hình Home, chúng ta sẽ viết như sau :

5. Hiển thị thông tin với dữ liệu lấy từ “provider”

Chúng ta có thể dùng GetBuilder để build Widget và hiển thị các giá trị.

Có một cách nữa, chúng ta có thể dùng : Get.find(); , Ví dụ:

Tạo information_page.dart để hiển thị thông tin

Kết quả

Full SourceCode in Github => GetX Flutter – StateManagement

Như vậy, Trong việc quản lý State, trong Flutter GetX cũng có phần giống như Provider nhưng viết code với GetX rất gọn gàng và tối giản.
Cảm ơn bạn đã theo dõi và tiếp tục đón đọc các chức năng rất hay của GetX trong lập trình Flutter.

4 Replies to “GetX Flutter – State Management – Cách quản lý State”

    1. Hi em,

      Trong Controller, em chỉ cần tạo một thuộc tính.
      Ví dụ: List userList = [];
      Chi tiết :
      class Information extends GetxController{

      List userList = [];

      updateInformation({@required userList ){
      this.userList = userList;
      update();
      }

      }

  1. hi anh ,
    cho em hỏi vậy cái getView trong getX thì sử dụng như thế nào ạ?. em có tìm hiểu thì nó có vẻ là dùng thay cho stateless tuy nhiên thì em không hiểu cách dùng của nó lắm . mong ảnh hồi đáp ạ .

    1. dùng cái này cũng hay nếu em muốn sử dụng controller trong cái Widget đó, nó dùng để thay thế cho Stateless cũng được:
      //=================
      class AwesomeController extends GetController {
      final String title = ‘My Awesome View’;
      }

      // ALWAYS remember to pass the Type you used to register your controller!
      class AwesomeView extends GetView {
      @override
      Widget build(BuildContext context) {
      return Container(
      padding: EdgeInsets.all(20),
      child: Text(controller.title), // just call controller.something
      );
      }
      }
      //=================

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *