Skip to main content

Stateless và Stateful Widgets trong Flutter

· 4 min read

Stateless vs Stateful Widgets

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ểmStatelessWidgetStatefulWidget
StateKhông cóCó
ImmutableCóKhông
Hiệu năngTốt hơnKém hơn
Sử dụngUI tĩnhUI động
CodeĐơn giảnPhứ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 setState mộ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: