Quản lý trạng thái trong Flutter với StatefulWidget và setState

Mục tiêu:

  • Hiểu sự khác biệt giữa StatelessWidget và StatefulWidget
  • Cách sử dụng setState để cập nhật giao diện
  • Thực hành với các thành phần có trạng thái: nút bấm, checkbox, counter

1. StatelessWidget vs StatefulWidget

  • StatelessWidget: không thay đổi, chỉ hiển thị dữ liệu tĩnh.
  • StatefulWidget: có thể thay đổi theo dữ liệu hoặc tương tác người dùng.

Ví dụ:

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Nội dung cố định');
  }
}

class MyCounter extends StatefulWidget {
  @override
  _MyCounterState createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Đã bấm $count lần'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text('Bấm'),
        ),
      ],
    );
  }
}

2. setState – cập nhật giao diện

setState thông báo cho Flutter biết rằng một phần của State đã thay đổi. Sau khi gọi, widget sẽ được vẽ lại.

setState(() {
  count += 1;
});

3. Ví dụ 1: Counter app

int _counter = 0;

ElevatedButton(
  onPressed: () {
    setState(() {
      _counter++;
    });
  },
  child: Text('Đếm: $_counter'),
)

4. Ví dụ 2: Bật tắt Switch

bool isDark = false;

Switch(
  value: isDark,
  onChanged: (value) {
    setState(() {
      isDark = value;
    });
  },
)

5. Ví dụ 3: Tùy chỉnh văn bản

String message = "Xin chào";

TextField(
  onChanged: (value) {
    setState(() {
      message = value;
    });
  },
)

Text(message)

6. Ghi chú quan trọng

  • setState phải được gọi trong State class, không được gọi trong build hoặc bên ngoài StatefulWidget.
  • Cần dùng đúng khi muốn dữ liệu thay đổi ảnh hưởng trực tiếp đến giao diện.

7. Bài tập thực hành

  • Tạo một nút Like, nhấn vào thì đổi trạng thái đã thích/chưa thích.
  • Tạo checkbox điều khiển hiển thị một đoạn văn bản.
  • Làm app đếm số lượng sản phẩm thêm vào giỏ.

Bài tiếp theo: Navigation trong Flutter – chuyển trang, truyền dữ liệu giữa các màn hình.