Stateless và Stateful Widgets trong Flutter
· 4 min read
Trong Flutter, có hai loại widget cơ bản: StatelessWidget và StatefulWidget. Việc hiểu rõ sự khác biệt giữa hai loại widget này là rất quan trọng để xây dựng ứng dụng Flutter hiệu quả.
1. StatelessWidget
StatelessWidget là widget không có state (trạng thái). Nó là immutable (không thể thay đổi) sau khi được tạo.
Đặc điểm của StatelessWidget:
- Không có state
- Không thể thay đổi sau khi được tạo
- Phù hợp cho UI tĩnh
- Hiệu năng tốt hơn vì không cần rebuild
Ví dụ về StatelessWidget:
class GreetingWidget extends StatelessWidget {
final String name;
const GreetingWidget({
super.key,
required this.name
});
@override
Widget build(BuildContext context) {
return Text('Hello, $name!');
}
}
Khi nào sử dụng StatelessWidget:
- Hiển thị thông tin tĩnh
- Widget chỉ phụ thuộc vào các tham số đầu vào
- Không cần thay đổi UI theo thời gian
- Không cần lưu trữ dữ liệu
2. StatefulWidget
StatefulWidget là widget có state (trạng thái). Nó có thể thay đổi trong quá trình sử dụng.
Đặc điểm của StatefulWidget:
- Có state
- Có thể thay đổi sau khi được tạo
- Phù hợp cho UI động
- Cần rebuild khi state thay đổi
Ví dụ về StatefulWidget:
class CounterWidget extends StatefulWidget {
const CounterWidget({super.key});
@override
State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $_count'),
ElevatedButton(
onPressed: _increment,
child: const Text('Increment'),
),
],
);
}
}
Khi nào sử dụng StatefulWidget:
- UI cần thay đổi theo thời gian
- Cần lưu trữ dữ liệu
- Có tương tác người dùng
- Cần thực hiện các tác vụ bất đồng bộ
3. So sánh StatelessWidget và StatefulWidget
| Đặc điểm | StatelessWidget | StatefulWidget |
|---|---|---|
| State | Không có | Có |
| Immutable | Có | Không |
| Hiệu năng | Tốt hơn | Kém hơn |
| Sử dụng | UI tĩnh | UI động |
| Code | Đơn giản | Phức tạp hơn |
4. Best Practices
4.1. Sử dụng StatelessWidget khi có thể
- Ưu tiên sử dụng StatelessWidget nếu không cần state
- Tách các phần UI tĩnh thành StatelessWidget riêng
4.2. Quản lý State hiệu quả
- Chỉ lưu trữ state cần thiết
- Sử dụng
setStatemột cách hợp lý - Tránh rebuild không cần thiết
4.3. Tổ chức code
- Tách biệt logic và UI
- Sử dụng các widget có thể tái sử dụng
- Đặt tên rõ ràng cho các widget
5. Ví dụ thực tế
5.1. StatelessWidget - ProductCard
class ProductCard extends StatelessWidget {
final String name;
final double price;
final String imageUrl;
const ProductCard({
super.key,
required this.name,
required this.price,
required this.imageUrl,
});
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
Image.network(imageUrl),
Text(name),
Text('\$$price'),
],
),
);
}
}
5.2. StatefulWidget - ShoppingCart
class ShoppingCart extends StatefulWidget {
const ShoppingCart({super.key});
@override
State<ShoppingCart> createState() => _ShoppingCartState();
}
class _ShoppingCartState extends State<ShoppingCart> {
final List<CartItem> _items = [];
void _addItem(CartItem item) {
setState(() {
_items.add(item);
});
}
void _removeItem(int index) {
setState(() {
_items.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index].name),
trailing: IconButton(
icon: const Icon(Icons.delete),
onPressed: () => _removeItem(index),
),
);
},
);
}
}
Kết luận
Việc lựa chọn giữa StatelessWidget và StatefulWidget phụ thuộc vào yêu cầu của ứng dụng. StatelessWidget đơn giản và hiệu quả cho UI tĩnh, trong khi StatefulWidget linh hoạt hơn cho UI động. Hiểu rõ sự khác biệt giữa hai loại widget này sẽ giúp bạn xây dựng ứng dụng Flutter tốt hơn.
Tài liệu tham khảo:
