Làm quen với Widget – Viết giao diện đầu tiên trong Flutter

🎯 Mục tiêu:

• Hiểu Widget là gì và vai trò trong Flutter
• Phân biệt StatelessWidget và StatefulWidget
• Tạo giao diện đơn giản gồm: Text, Icon, Button, Column, Row
• Chạy và tương tác với ứng dụng thật

🌱 1. Widget là gì?

Trong Flutter, mọi thứ đều là widget – từ nút bấm, dòng chữ, đến cả layout và theme.

Widget là các thành phần cấu thành giao diện. Bạn không dùng HTML hay XML như các nền tảng khác, mà dùng Dart để khai báo và lồng ghép các widget lại với nhau.

Flutter có 2 loại widget chính:

🔧 2. Cấu trúc project Flutter cơ bản

Trong lib/main.dart, bạn sẽ thấy mẫu sau:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

• runApp() khởi động app.
• MaterialApp là widget gốc, thiết lập theme, điều hướng, v.v.
• MyHomePage() là widget hiển thị màn hình chính.

🖼 3. Tạo giao diện đầu tiên

👇 Ví dụ: Giao diện đơn giản có tiêu đề, mô tả và nút bấm

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Xin chào Flutter!')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.flutter_dash, size: 100, color: Colors.blue),
            SizedBox(height: 20),
            Text('Chào mừng bạn đến với Flutter!', style: TextStyle(fontSize: 18)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                print('Đã nhấn nút!');
              },
              child: Text('Bấm vào đây'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 Giải thích:

• Scaffold: khung giao diện theo Material Design
• AppBar: thanh tiêu đề
• Center, Column: sắp xếp giao diện theo chiều dọc, căn giữa
• Icon, Text, ElevatedButton: các widget hiển thị

🔄 4. Làm quen với StatefulWidget

Khi cần cập nhật giao diện theo hành động của người dùng (như đếm số lần nhấn), bạn cần StatefulWidget.

🧪 Ví dụ: Ứng dụng đếm số lần bấm nút

class MyCounterPage extends StatefulWidget {
  @override
  _MyCounterPageState createState() => _MyCounterPageState();
}

class _MyCounterPageState extends State<MyCounterPage> {
  int count = 0;

  void _increment() {
    setState(() {
      count++; // Cập nhật state và vẽ lại giao diện
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Đếm số lần nhấn')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Bạn đã nhấn nút này:', style: TextStyle(fontSize: 18)),
            Text('$count lần', style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

📌 Ghi nhớ:

• setState() là cách thông báo Flutter rằng state đã thay đổi → cần vẽ lại widget.
• Mọi thứ trong hàm build() sẽ được vẽ lại mỗi khi state đổi.

🧪 5. Thực hành

✍️ Tự tạo giao diện với yêu cầu sau:

✅ Giao diện gồm:

• Icon (có thể là mặt cười, trái tim,…)
• Một dòng chữ tùy ý
• Một nút bấm → mỗi lần bấm, thay đổi dòng chữ ngẫu nhiên từ một danh sách

📌 Gợi ý:

List<String> quotes = ['Flutter rất tuyệt!', 'Bạn đang học tốt!', 'Tiếp tục nhé!'];

🎯 Tổng kết bài 3

✅ Bạn đã học:

• Widget là gì, vì sao Flutter “tất cả đều là widget”
• Phân biệt Stateless & Stateful Widget
• Tạo UI với Text, Icon, Button, Column, Row, Scaffold
• Dùng setState() để cập nhật trạng thái

▶️ Bài tiếp theo: Layout trong Flutter – Row, Column, Container, Expanded

Trong bài 4, bạn sẽ:

• Hiểu cách xếp chồng widget theo chiều ngang, dọc, hoặc lớp
• Tạo giao diện responsive với Expanded, SizedBox, Padding
• Làm app hiển thị danh sách sản phẩm theo dạng lưới