StatelessWidget và StatefulWidget — khi nào dùng loại nào?

Một trong những quyết định quan trọng nhất khi phát triển Flutter là chọn giữa StatelessWidget và StatefulWidget. Bài viết này sẽ giúp bạn hiểu rõ sự khác biệt và biết khi nào nên dùng loại nào.

Tổng quan

StatelessWidget

StatelessWidget là widget không thay đổi sau khi được tạo. Nó chỉ phụ thuộc vào các tham số (parameters) được truyền vào.

StatefulWidget

StatefulWidget là widget có thể thay đổi trong suốt vòng đời của nó. Nó có thể lưu trữ và cập nhật state.

StatelessWidget

Đặc điểm:

• ✅ Immutable: Không thể thay đổi sau khi tạo
• ✅ Nhẹ: Hiệu suất tốt hơn
• ✅ Đơn giản: Dễ hiểu và maintain
• ✅ Pure function: build() luôn trả về cùng kết quả với cùng input

Cú pháp:

[object Object]

Khi nào dùng StatelessWidget?

1. Widget chỉ hiển thị dữ liệu

[object Object]

2. Widget nhận data từ parent

[object Object]

3. Widget chỉ render UI, không có logic phức tạp

[object Object]

StatefulWidget

Đặc điểm:

• ✅ Mutable: Có thể thay đổi state
• ✅ Interactive: Có thể xử lý user input
• ✅ Dynamic: UI có thể thay đổi theo state
• ⚠️ Phức tạp hơn: Cần quản lý state

Cú pháp:

[object Object]

Khi nào dùng StatefulWidget?

1. Widget cần quản lý state nội bộ

[object Object]

2. Widget cần xử lý user input

[object Object]

3. Widget cần animation

[object Object]

4. Widget cần fetch data và hiển thị

[object Object]

So sánh chi tiết

Tiêu chí	StatelessWidget	StatefulWidget
State	Không có	Có state
Rebuild	Khi parent rebuild	Khi setState() được gọi
Hiệu suất	Tốt hơn	Tốt (nhưng cần quản lý state)
Độ phức tạp	Đơn giản	Phức tạp hơn
Sử dụng khi	Chỉ hiển thị data	Cần tương tác, thay đổi

Quy tắc chọn lựa

Dùng StatelessWidget khi:

✅ Widget chỉ nhận data từ parent và hiển thị
✅ Widget không cần thay đổi sau khi tạo
✅ Widget là pure function (cùng input → cùng output)
✅ Widget không cần quản lý controllers, timers, animations

Ví dụ:

• ProductCard
• UserAvatar
• CustomButton (chỉ nhận callback)
• Header/Footer components

Dùng StatefulWidget khi:

✅ Widget cần quản lý state nội bộ
✅ Widget cần xử lý user input (forms, text fields)
✅ Widget cần animation
✅ Widget cần fetch và quản lý data
✅ Widget cần timers, streams, subscriptions

Ví dụ:

• LoginForm
• Counter
• SearchBar với suggestions
• Image carousel
• Video player

Best Practices

1. Ưu tiên StatelessWidget

Luôn bắt đầu với StatelessWidget, chỉ chuyển sang StatefulWidget khi thực sự cần:

[object Object]

2. Tách biệt Stateless và Stateful

Tách logic stateful ra widget riêng:

[object Object]

3. Sử dụng const constructor khi có thể

[object Object]

4. Tránh setState không cần thiết

[object Object]

Ví dụ thực tế: Todo App

StatelessWidget - TodoItem

[object Object]

StatefulWidget - TodoList

[object Object]

Kết luận

Tóm tắt:

StatelessWidget:

• Dùng khi widget không cần thay đổi
• Đơn giản, hiệu suất tốt
• Ưu tiên sử dụng

StatefulWidget:

• Dùng khi cần quản lý state
• Phức tạp hơn nhưng linh hoạt
• Chỉ dùng khi thực sự cần

Quy tắc vàng:

"Luôn bắt đầu với StatelessWidget. Chỉ chuyển sang StatefulWidget khi bạn thực sự cần quản lý state."

Hiểu rõ sự khác biệt giữa StatelessWidget và StatefulWidget sẽ giúp bạn viết code Flutter hiệu quả và dễ maintain hơn!

---

Tác giả: Admin
Ngày đăng: 23/01/2025
Chuyên mục: Flutter