Giải thích Widget trong Flutter: Stateless vs Stateful chi tiết

Widget là nền tảng của Flutter. Mọi thứ trong Flutter đều là Widget. Bài viết này sẽ giải thích chi tiết về Widget và sự khác biệt giữa StatelessWidget và StatefulWidget.

Widget là gì?

Widget là một mô tả của một phần UI. Trong Flutter, mọi thứ đều là Widget.

Định nghĩa:

• Widget: Mô tả cách UI được render
• Immutable: Widget không thể thay đổi sau khi tạo
• Composable: Widgets có thể kết hợp với nhau

Ví dụ:

[object Object]

Widget Tree

Cấu trúc:

[object Object]

Mọi thứ là Widget:

[object Object]

StatelessWidget

Định nghĩa:

StatelessWidget là widget không thay đổi sau khi được tạo.

Đặc điểm:

• ✅ Immutable: Không thể thay đổi
• ✅ Nhẹ: Hiệu suất tốt
• ✅ Đơn giản: Dễ hiểu và maintain

Cú pháp:

[object Object]

Ví dụ:

[object Object]

StatefulWidget

Định nghĩa:

StatefulWidget là widget có thể thay đổi trong suốt vòng đời của nó.

Đặc điểm:

• ✅ Mutable: Có thể thay đổi state
• ✅ Interactive: Xử lý user input
• ✅ Dynamic: UI có thể thay đổi

Cú pháp:

[object Object]

So sánh chi tiết

1. State Management

Tiêu chí	StatelessWidget	StatefulWidget
State	Không có	Có state
Rebuild	Khi parent rebuild	Khi setState()
Mutable	Không	Có

2. Performance

Tiêu chí	StatelessWidget	StatefulWidget
Memory	Ít hơn	Nhiều hơn
Rebuild	Nhanh hơn	Chậm hơn một chút
Optimization	Dễ optimize	Cần cẩn thận

3. Use Cases

Use Case	StatelessWidget	StatefulWidget
Display data	✅	❌
User input	❌	✅
Animation	❌	✅
Timer	❌	✅

Khi nào dùng StatelessWidget?

Nên dùng khi:

✅ Chỉ hiển thị data:

[object Object]

✅ Nhận data từ parent:

[object Object]

✅ Pure function:

[object Object]

Khi nào dùng StatefulWidget?

Nên dùng khi:

✅ Cần quản lý state:

[object Object]

✅ User input:

[object Object]

✅ Animation:

[object Object]

✅ Timer/Stream:

[object Object]

Best Practices

1. Ưu tiên StatelessWidget

[object Object]

2. Tách StatefulWidget nhỏ

[object Object]

3. Sử dụng const

[object Object]

Kết luận

Widget trong Flutter:

• ✅ StatelessWidget: Không thay đổi, cho display
• ✅ StatefulWidget: Có thể thay đổi, cho interaction
• ✅ Everything is Widget: Mọi thứ đều là widget
• ✅ Composable: Widgets kết hợp với nhau

Tóm tắt:

1. Widget: Mô tả UI
2. StatelessWidget: Immutable, cho display
3. StatefulWidget: Mutable, cho interaction
4. Best Practice: Ưu tiên StatelessWidget

Hiểu rõ Widget sẽ giúp bạn code Flutter hiệu quả hơn! 🚀

---

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