Bài viết gần đây

| Widget trong Flutter: Bí quyết xây dựng UI mobile đẹp lung linh

Được viết bởi thanhdt vào ngày 28/01/2026 lúc 07:10 | 30 lượt xem

Widget trong Flutter: Bí quyết xây dựng UI mobile đẹp lung linh

Nếu lập trình Android truyền thống giống như xếp gạch xây nhà, thì Flutter giống như chơi LEGO. Mỗi mảnh ghép LEGO đầy màu sắc đó được gọi là Widget.

Để tạo ra một giao diện đẹp, bạn chỉ cần nắm vững cách lắp ghép các Widget lại với nhau. Nhưng câu hỏi đặt ra là: “Khi nào dùng Stateless? Khi nào dùng Stateful? Làm sao để chia cột chia dòng cho chuẩn?”. Bài viết này sẽ giải mã tất tần tật.

Loại Widget Đặc điểm Khi nào dùng?
Stateless Tĩnh tại, bất biến Icon, Text, Logo (Không thay đổi trên màn hình)
Stateful Động, có trạng thái Checkbox, TextField, Slider (Thay đổi khi user tương tác)

1. Stateless vs Stateful: Cuộc chiến của sự “Bất biến”

Đây là khái niệm quan trọng nhất mà mọi Newbie cần khắc cốt ghi tâm.

  • StatelessWidget: Được khởi tạo một lần và KHÔNG bao giờ thay đổi lại. Ví dụ: Một dòng chữ “Hello”.
  • StatefulWidget: Có thể tự vẽ lại (rebuild) khi dữ liệu thay đổi. Ví dụ: Ứng dụng đếm số, mỗi lần nhấn nút thì số tăng lên 1 đơn vị.
// Stateless: Nhẹ, nhanh, đơn giản
class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text('Tôi không bao giờ thay đổi');
  }
}

// Stateful: Cần hàm setState() để báo UI cập nhật
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

2. Bộ tứ “Layout” quyền lực

Để sắp xếp các widget lên màn hình, bạn nhất định phải thuộc lòng “Bộ tứ siêu đẳng” này:

Cheat Sheet Layout Widget: Row, Column, Stack, Container

  1. Row (Hàng ngang): Sắp xếp widget từ trái sang phải. mainAxisAlignment chỉnh căn lề ngang.
  2. Column (Hàng dọc): Sắp xếp từ trên xuống dưới. Đây là widget dùng nhiều nhất.
  3. Stack (Chồng lớp): Đặt widget này đè lên widget kia. Dùng để làm background ảnh hoặc badge thông báo.
  4. Container (Cái hộp): Giống như <div> trong HTML, dùng để chỉnh margin, padding, màu nền, bo góc.

3. Thực hành: Mổ xẻ ứng dụng Counter

Hãy nhìn lại ứng dụng mẫu Counter mặc định của Flutter, nó chính là ví dụ hoàn hảo về sự kết hợp Layout và State.

Giao diện Counter App: Center text và Floating Action Button

  • Scaffold: Là khung xương của app (chứa AppBar, Body).
  • Center: Căn giữa widget con.
  • Column: Xếp dòng chữ “You have pushed…” và con số “0” thẳng hàng dọc.
  • FloatingActionButton: Nút bấm tròn ở góc dưới.

4. Mẹo tối ưu Widget Tree

  • Ưu tiên dùng const: Nếu widget không đổi, hãy thêm từ khóa const để Flutter không phải vẽ lại nó, giúp app mượt hơn.
  • Chia nhỏ Widget: Đừng viết một mạch 500 dòng code trong 1 file. Hãy tách nhỏ thành các Widget con riêng biệt để dễ quản lý (Component).

Nắm vững Widget là bạn đã nắm được 50% sức mạnh của Flutter. 50% còn lại nằm ở việc “Quản lý dữ liệu” chảy bên trong các Widget đó.

Bài tiếp theo: State Management trong Flutter (Provider, Riverpod, Bloc) – Chọn cái nào?

👉 So sánh các phương pháp quản lý State hiệu quả nhất

💡 Bạn muốn tự tay thiết kế những giao diện App đẹp như Dribbble?
Học tư duy UI/UX Mobile tại: Khóa học Lập trình Flutter Thực chiến