Skip to main content

Widget Tree và các loại Widget trong Flutter

· 4 min read

Flutter Widget Tree

Widget là thành phần cơ bản trong Flutter, mọi thứ bạn nhìn thấy trên màn hình đều là widget. Bài viết này sẽ giúp bạn hiểu rõ về cấu trúc Widget Tree và các loại widget phổ biến trong Flutter.

1. Widget Tree là gì?​

Widget Tree là cấu trúc phân cấp của các widget trong ứng dụng Flutter. Mỗi widget có thể chứa các widget con, tạo thành một cây các widget.

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Column
        ├── Text
        ├── SizedBox
        └── ElevatedButton
            └── Text

Đặc điểm của Widget Tree:​

  • Cấu trúc phân cấp
  • Widget cha chứa widget con
  • Mỗi widget có thể có nhiều widget con
  • Widget con kế thừa các thuộc tính từ widget cha

2. Các loại Widget cơ bản​

2.1. StatelessWidget vs StatefulWidget​

StatelessWidget​

  • Widget không có state (trạng thái)
  • Không thể thay đổi sau khi được tạo
  • Phù hợp cho UI tĩnh
class GreetingWidget extends StatelessWidget {
  final String name;
  
  const GreetingWidget({super.key, required this.name});
  
  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name!');
  }
}

StatefulWidget​

  • Widget có state (trạng thái)
  • Có thể thay đổi trong quá trình sử dụng
  • Phù hợp cho UI động
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'),
        ),
      ],
    );
  }
}

2.2. Các Widget phổ biến​

Layout Widgets​

  1. Container

    • Widget linh hoạt nhất
    • Có thể định dạng padding, margin, border, background
    Container(
      padding: const EdgeInsets.all(16),
      margin: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text('Hello'),
    )

  2. Row và Column

    • Sắp xếp các widget theo chiều ngang/dọc
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Left'),
        Text('Center'),
        Text('Right'),
      ],
    )

  3. Stack

    • Xếp chồng các widget lên nhau
    Stack(
      children: [
        Image.network('url'),
        Positioned(
          bottom: 16,
          right: 16,
          child: Text('Overlay'),
        ),
      ],
    )

Input Widgets​

  1. TextField

    • Nhập liệu văn bản
    TextField(
      decoration: InputDecoration(
        labelText: 'Username',
        hintText: 'Enter your username',
      ),
    )

  2. ElevatedButton

    • Nút bấm có hiệu ứng nổi
    ElevatedButton(
      onPressed: () {
        // Handle press
      },
      child: const Text('Click me'),
    )

Display Widgets​

  1. Text

    • Hiển thị văn bản
    Text(
      'Hello World',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    )

  2. Image

    • Hiển thị hình ảnh
    Image.network(
      'https://example.com/image.jpg',
      width: 200,
      height: 200,
    )

3. Quản lý State trong Widget Tree​

3.1. Local State​

  • Sử dụng setState trong StatefulWidget
  • Phù hợp cho state đơn giản, chỉ ảnh hưởng đến widget hiện tại

3.2. Global State​

  • Sử dụng state management (Provider, Bloc, GetX)
  • Phù hợp cho state phức tạp, được chia sẻ giữa nhiều widget

4. Best Practices​

  1. Tổ chức Widget Tree

    • Tách các widget phức tạp thành các widget nhỏ hơn
    • Sử dụng các widget có thể tái sử dụng
    • Tránh widget tree quá sâu

  2. Performance

    • Sử dụng const constructor khi có thể
    • Tránh rebuild không cần thiết
    • Sử dụng ListView.builder cho danh sách dài

  3. State Management

    • Chọn giải pháp state management phù hợp
    • Tránh prop drilling
    • Tách biệt logic và UI

Kết luận​

Hiểu rõ về Widget Tree và các loại widget là nền tảng quan trọng trong phát triển Flutter. Với kiến thức này, bạn có thể xây dựng UI phức tạp và quản lý state hiệu quả.

Tài liệu tham khảo: