Trong Flutter, có một câu thần chú mà bạn phải thuộc lòng: “Everything is a Widget” (Mọi thứ đều là Widget).

Từ cái nút bấm, cái ảnh, dòng chữ, cho đến cả bố cục màn hình (Layout) – tất cả đều là Widget. Vậy Widget là gì? Và làm sao để lắp ghép chúng lại thành một giao diện đẹp?

1. Widget là gì?

Hãy tưởng tượng Widget giống như những viên gạch LEGO.
* Text: Là viên gạch hiển thị chữ.
* Image: Là viên gạch hiển thị ảnh.
* Container: Là cái hộp đựng các viên gạch khác.

Nhiệm vụ của bạn là xếp chồng các viên gạch này lên nhau (theo mô hình Cây – Widget Tree) để tạo nên ngôi nhà (App).

2. Phân loại Widget: Stateless vs Stateful

Đây là khái niệm quan trọng nhất số 1 trong Flutter.

a. StatelessWidget (Widget tĩnh)

• Đặc điểm: Không bao giờ thay đổi trạng thái khi đang chạy. Nó sinh ra thế nào thì chết đi như thế.
• Ví dụ: Icon, Text “Tiêu đề”, Logo.
• Dùng khi: Bạn chỉ muốn hiển thị thông tin tĩnh.

b. StatefulWidget (Widget động)

• Đặc điểm: Có thể thay đổi hình dạng, màu sắc, dữ liệu khi người dùng tương tác.
• Ví dụ: Nút Like (đổi màu khi bấm), Ô nhập liệu (hiện chữ khi gõ), Checkbox.
• Dùng khi: Giao diện cần cập nhật lại (Re-build) khi có sự kiện xảy ra.

3. Các Widget bố cục (Layout) cơ bản

Để sắp xếp các Widget con, chúng ta cần các “Widget cha”:

• Container: Giống như thẻ <div> trong HTML. Dùng để tạo khung, bo góc, tô màu nền.
• Row (Hàng ngang): Sắp xếp các con nằm ngang từ trái sang phải.
• Column (Cột dọc): Sắp xếp các con nằm dọc từ trên xuống dưới.
• Stack: Xếp chồng các con lên nhau (Ví dụ: Chữ đè lên Ảnh).

4. Ví dụ Code thực tế

import 'package:flutter/material.dart';

class MyBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.blue,
      child: Center(
        child: Text(
          'Hello Flutter',
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
      ),
    );
  }
}

Hiểu về Widget mới chỉ là một nửa chặng đường. Để làm cho App “sống động” (ví dụ: bấm nút -> số tăng lên), bạn cần biết cách quản lý dữ liệu thay đổi đó. Đó gọi là Quản lý trạng thái (State Management).

Bài tiếp theo sẽ giải thích về setState và tại sao nó lại là cơn ác mộng khi App lớn dần.

👉 Quản lý trạng thái (State Management) trong Flutter

Đón xem bài tiếp theo: Quản lý trạng thái (State Management) trong Flutter: Provider, Bloc hay Riverpod?**