Khám phá công nghệ

Khám phá các công cụ và kỹ thuật hữu ich cho Lập trình viên

GetX Flutter – State Management với GetX (Phần 2)

Thắng Nguyễn

Fri, 26 Apr 2024

GetX Flutter – State Management với GetX (Phần 2)

1. Tạo Controller kế thừa từ GetxController

Tạo một file mới đặt tên controller.dart sau đó thêm mã vào file vừa tạo như sau:


class Controller extends GetxController{
   var count = 0.obs;
 @override
   void onInit() {
     super.onInit();
   }
 increment() => count++;
 @override
   void onClose() {
     super.onClose();
   }
 }

2. Khởi tạo Controller trong StatelessWidget

Có một lưu ý khi chúng ta sử dụng GetX các bạn sẽ không cần quan tâm đến StatelessWidget hay StateFulWIdget nữa. Cách để chúng ta khởi tạo Controller trong StatelessWidget như sau:

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

3. Gắn Obx vào widget cần thay đổi

Và trong giao diện người dùng, khi bạn muốn hiển thị giá trị đó và cập nhật màn hình bất cứ khi nào giá trị thay đổi, chỉ cần thực hiện điều này:

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

File giao diện đầy đủ sẽ như sau:

class Home extends StatelessWidget {
 
  final Controller controller = Get.put(Controller());
 
  @override
  Widget build(context) {
    return Scaffold(
       body: Center(
                child: Obx(() => Text("Clicks: ${controller.count}"))
              ),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
 
  
  } 
}

0 Comments

Để lại một bình luận