Vòng đời widget (Widget Lifecycle) trong Flutter
Vòng đời widget (Widget Lifecycle) trong Flutter
Hiểu rõ vòng đời (lifecycle) của widget là điều cần thiết để xây dựng ứng dụng Flutter hiệu quả. Bài viết này sẽ giải thích chi tiết về lifecycle của StatelessWidget và StatefulWidget.
Tổng quan về Widget Lifecycle
Widget lifecycle là quá trình từ khi widget được tạo ra, hiển thị, cập nhật, đến khi bị hủy. Flutter quản lý lifecycle này để tối ưu hiệu suất và quản lý bộ nhớ.
StatelessWidget Lifecycle
StatelessWidget là widget không thay đổi sau khi được tạo. Lifecycle của nó đơn giản:
[object Object]Ví dụ StatelessWidget:
[object Object]Lifecycle:
- Constructor: Widget được khởi tạo
- build(): Widget được build và render
- dispose(): Widget bị hủy khi không còn cần thiết
StatefulWidget Lifecycle
StatefulWidget có lifecycle phức tạp hơn vì có thể thay đổi state:
[object Object]Các phương thức lifecycle quan trọng:
1. createState()
Được gọi khi StatefulWidget được tạo. Trả về State object:
[object Object]2. initState()
Được gọi một lần duy nhất khi State object được tạo. Đây là nơi khởi tạo:
[object Object]Khi nào dùng initState():
- Khởi tạo controllers (TextEditingController, AnimationController)
- Thiết lập listeners
- Khởi tạo timers
- Gọi API một lần khi widget được tạo
3. didChangeDependencies()
Được gọi sau initState() và mỗi khi widget phụ thuộc vào InheritedWidget thay đổi:
[object Object]Khi nào dùng didChangeDependencies():
- Cần truy cập InheritedWidget (Theme, MediaQuery, Localizations)
- Cần thực hiện action khi dependencies thay đổi
4. build()
Được gọi mỗi khi widget cần rebuild. Đây là phương thức quan trọng nhất:
[object Object]Lưu ý:
- Không nên thực hiện heavy operations trong build()
- Không nên gọi setState() trong build() (sẽ gây infinite loop)
- Build() phải là pure function
5. setState()
Được gọi để thông báo Flutter rằng state đã thay đổi và cần rebuild:
[object Object]Khi nào dùng setState():
- Khi state của widget thay đổi
- Khi cần rebuild UI
6. didUpdateWidget()
Được gọi khi widget được rebuild với widget mới cùng type:
[object Object]Khi nào dùng didUpdateWidget():
- Cần so sánh old widget và new widget
- Cần cập nhật state dựa trên thay đổi của widget properties
7. deactivate()
Được gọi khi widget bị remove khỏi tree nhưng có thể được insert lại:
[object Object]8. dispose()
Được gọi một lần duy nhất khi widget bị hủy vĩnh viễn:
[object Object]Khi nào dùng dispose():
- Dispose controllers
- Cancel timers
- Cancel subscriptions
- Close streams
- Free resources
Sơ đồ vòng đời đầy đủ
[object Object]Ví dụ thực tế: Counter App với Lifecycle
[object Object]Best Practices
1. Luôn gọi super trong lifecycle methods
[object Object]2. Kiểm tra mounted trước khi setState
[object Object]3. Dispose tất cả resources trong dispose()
[object Object]4. Không thực hiện heavy operations trong build()
[object Object]So sánh với React Lifecycle
Nếu bạn đã quen với React, đây là sự tương đồng:
| Flutter | React | Mô tả |
|---|---|---|
initState() |
componentDidMount() |
Khởi tạo |
didUpdateWidget() |
componentDidUpdate() |
Widget được update |
dispose() |
componentWillUnmount() |
Cleanup |
build() |
render() |
Render UI |
Kết luận
Hiểu rõ widget lifecycle giúp bạn:
- ✅ Quản lý resources hiệu quả
- ✅ Tránh memory leaks
- ✅ Tối ưu hiệu suất ứng dụng
- ✅ Xử lý state đúng cách
Tóm tắt:
- initState(): Khởi tạo, chỉ gọi 1 lần
- didChangeDependencies(): Khi dependencies thay đổi
- build(): Render UI, gọi nhiều lần
- didUpdateWidget(): Khi widget được update
- deactivate(): Khi widget bị remove
- dispose(): Cleanup, chỉ gọi 1 lần
Nắm vững lifecycle là nền tảng để xây dựng ứng dụng Flutter chuyên nghiệp!
Tác giả: Admin
Ngày đăng: 22/01/2025
Chuyên mục: Flutter