Hiểu về State trong Flutter – Cơ bản cho người mới

Khi bắt đầu với Flutter, bạn sẽ nghe rất nhiều về “state”. Nghe có vẻ trừu tượng, nhưng thật ra nó chỉ là dữ liệu có thể thay đổi và ảnh hưởng trực tiếp đến giao diện ứng dụng.

 

Ví dụ: bạn bấm vào nút tăng số → con số trên màn hình thay đổi. Đó chính là “state” đang hoạt động.

 

 

 

1. State là gì?

 

Hãy tưởng tượng mỗi widget trong Flutter giống như một bức ảnh chụp nhanh (snapshot) của giao diện. Khi dữ liệu thay đổi, Flutter sẽ so sánh ảnh cũ với dữ liệu mới rồi rebuild lại phần bị ảnh hưởng.

 

• Nếu biến counter = 0 → màn hình hiển thị số 0.

 

• Khi bấm nút, counter +1 → Flutter phát hiện thay đổi → gọi lại build() → UI cập nhật thành số mới.

 

 

Điểm hay là Flutter đủ thông minh để chỉ vẽ lại những phần cần thiết chứ không “vẽ lại toàn bộ” gây nặng máy.

 

2. Hai loại state trong ứng dụng

 

2.1 App-wide State

 

Đây là dữ liệu ảnh hưởng đến toàn bộ app, ví dụ:

 

• Người dùng đã đăng nhập hay chưa.

 

• Token lấy từ server.

 

• Cấu hình theme (light/dark).

 

2.2 Widget State

 

Đây là dữ liệu chỉ liên quan đến một widget cụ thể, ví dụ:

 

• Loading spinner hiển thị khi đang fetch API.

 

• Nội dung text mà người dùng đang nhập.

 

• Biến đếm trong app demo Flutter mặc định.

 

3. Stateless Widget

 

Stateless nghĩa là không tự thay đổi theo thời gian. Chúng chỉ hiển thị dữ liệu tĩnh hoặc dữ liệu được truyền từ bên ngoài.

 

Ví dụ:

Đặc điểm của Stateless Widget:

 

• Tạo một lần → không thay đổi trừ khi widget cha rebuild.

 

• Không tự lưu state bên trong.

 

• Thường dùng cho giao diện hiển thị tĩnh.

 

• Ví dụ: Text, Row, Column, Icon...

 

4. Stateful Widget

 

Ngược lại, Stateful Widget có thể giữ dữ liệu bên trong và thay đổi theo thời gian.

 

Ví dụ: app đếm số mà Flutter cung cấp khi bạn tạo project mới:

Giải thích:

 

• Stateful Widget = 2 class:

  • CounterApp (widget chính).

  • _CounterAppState (giữ logic và state).

 

• Khi setState() được gọi, Flutter rebuild UI có liên quan đến counter.

 

5. Khi nào dùng Stateless vs Stateful?

 

• Stateless: khi chỉ cần hiển thị dữ liệu tĩnh, ví dụ: tiêu đề, layout, icon.

 

• Stateful: khi dữ liệu thay đổi trong runtime, ví dụ: form nhập, animation, bộ đếm, danh sách fetch từ API.

 

6. Tổng kết

 

• State là dữ liệu có thể thay đổi và làm UI cập nhật lại.

 

• Stateless Widget: chỉ hiển thị dữ liệu, không tự thay đổi.

 

• Stateful Widget: lưu dữ liệu bên trong và thay đổi theo tương tác hoặc sự kiện.

 

• Trong thực tế, bạn sẽ dùng Stateless nhiều hơn, và chỉ chuyển sang Stateful khi có logic thay đổi bên trong widget.