State Management

1. StatefulWidgets

Không cần sử dụng StatefulWidgets thêm nữa.

Sử dụng StatefulWidgets có nghĩa là lưu trữ trạng thái của toàn bộ màn hình một cách không cần thiết, StatefulWidget là một class lớn hơn StatelessWidget, sẽ phân bổ nhiều RAM hơn, tuy điều này có thể không tạo ra sự khác biệt đáng kể giữa một hoặc hai class, nhưng chắc chắn nó sẽ khác biệt khi số class lên đến 100.

Ngoài trừ việc bạn cần sử dụng một mixin như TickerProviderStateMixin. Sẽ là hoàn toàn không cần thiết khi sử dụng StatefulWidgets với Get

2. State Management với GetX

2.1 Tạo Controller kế thừa từ GetxController

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

2.2 Khởi tạo Controller trong StatelessWidget

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

2.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ẽ là

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

  
  } 
}