Trong Flutter, StatelessWidget và StatefulWidget là hai loại widget cơ bản được sử dụng để xây dựng giao diện người dùng (UI). Dưới đây là giải thích chi tiết và các trường hợp sử dụng thực tế:

1. StatelessWidget

StatelessWidget là một widget không có trạng thái bên trong. Điều này có nghĩa là UI của widget không thay đổi theo thời gian hoặc khi có các sự kiện tương tác.

Đặc điểm:

• Không thể thay đổi dữ liệu bên trong widget sau khi nó được khởi tạo.
• Thường được sử dụng cho các widget hiển thị dữ liệu tĩnh hoặc giao diện không yêu cầu cập nhật.

Cách sử dụng:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Widget Example'),
      ),
      body: Center(
        child: Text('This is a StatelessWidget'),
      ),
    );
  }
}

Khi nào sử dụng:

• Hiển thị nội dung tĩnh như văn bản, hình ảnh, hoặc các nút không cần thay đổi trạng thái.
• Ví dụ:
  ・Trang “About Us” với thông tin cố định.
  ・Danh sách sản phẩm không yêu cầu tương tác.

2. StatefulWidget

StatefulWidget là một widget có trạng thái bên trong. Trạng thái của nó có thể thay đổi trong suốt vòng đời của widget, và khi trạng thái thay đổi, giao diện người dùng sẽ được cập nhật lại.

Đặc điểm:

• Có một lớp State đi kèm để lưu trữ và quản lý trạng thái.
• Thường được sử dụng cho các widget yêu cầu sự thay đổi liên tục (ví dụ: nhập dữ liệu, nhấn nút, tải dữ liệu từ API).

Cách sử dụng:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Khi nào sử dụng:

• Widget cần lưu trữ hoặc thay đổi trạng thái bên trong.
• Ví dụ:
  • Biểu mẫu nhập liệu (form).
  • Bộ đếm số lượt nhấn nút.
  • Danh sách sản phẩm với chức năng thêm vào giỏ hàng.

3. Case Study Thực Tế

StatelessWidget:

• Ứng dụng e-commerce:
  • Hiển thị danh sách các danh mục sản phẩm.
  • Trang giới thiệu công ty hoặc thông tin liên hệ.
    
• Ứng dụng tin tức:
  • Hiển thị tiêu đề và nội dung bài viết không cần tương tác.

StatefulWidget:

• Ứng dụng e-commerce:
  • Thêm sản phẩm vào giỏ hàng và cập nhật số lượng trong thời gian thực.
  • Thanh toán và hiển thị tổng tiền theo các sản phẩm đã chọn.
    
• Ứng dụng mạng xã hội:
  • Hiển thị lượt thích (like) khi người dùng nhấn nút.
  • Cập nhật danh sách tin nhắn mới nhất trong thời gian thực.
    

4. Tóm Tắt