StatelessWidget và StatefulWidget — khi nào dùng loại nào?
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