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

GetX trong flutter
Lập trình Lập trình Flutter

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

Leave your thought here

Your email address will not be published. Required fields are marked *

Đăng ký Khóa học Lập trình Java cơ bản
Tham gia khóa học Java cơ bản. Khóa học Online qua Zoom với lịch học linh động.
HocLapTrinh.me
Overlay Image
Đăng ký Khóa học Lập trình Java cơ bản
Tham gia khóa học Java cơ bản. Khóa học Online qua Zoom với lịch học linh động.
HocLapTrinh.me
Overlay Image
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Wishlist 0
Open wishlist page Continue shopping