🚀 Ứng dụng đầu tiên

1. Tạo Project mới

Qua Terminal

# Tạo project với tên my_app
flutter create my_app

# Di chuyển vào thư mục
cd my_app

Qua VS Code

1. Mở Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Gõ Flutter: New Project
3. Chọn Application
4. Chọn thư mục lưu
5. Nhập tên project

---

2. Chạy ứng dụng

# Liệt kê devices
flutter devices

# Chạy app
flutter run

Hoặc trong VS Code: Nhấn F5 hoặc click Run → Start Debugging

---

3. Xem code mẫu

Mở file lib/main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

---

4. Viết Hello World đơn giản

Thay thế nội dung lib/main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello Flutter'),
          backgroundColor: Colors.blue,
        ),
        body: const Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Hot Reload: Nhấn r trong terminal hoặc Ctrl+S để thấy thay đổi ngay!

---

5. Giải thích code

main()

void main() {
  runApp(const MyApp());  // Entry point, khởi chạy MyApp widget
}

MaterialApp

MaterialApp(
  home: ...,  // Widget hiển thị đầu tiên
)

MaterialApp là widget gốc cung cấp:

• Material Design theme
• Navigation
• Localization

Scaffold

Scaffold(
  appBar: AppBar(...),  // Thanh tiêu đề
  body: ...,            // Nội dung chính
)

Scaffold tạo cấu trúc trang cơ bản với app bar, body, floating button, v.v.

Center và Text

Center(                    // Widget căn giữa
  child: Text('Hello'),    // Widget hiển thị text
)

---

6. Thử thay đổi

Đổi màu và text

AppBar(
  title: const Text('Ứng dụng của tôi'),
  backgroundColor: Colors.green,  // Đổi màu
)

Thêm Icon

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Icon(
        Icons.flutter_dash,
        size: 100,
        color: Colors.blue,
      ),
      const SizedBox(height: 20),
      const Text(
        'Chào mừng đến Flutter!',
        style: TextStyle(fontSize: 24),
      ),
    ],
  ),
),

---

7. Thêm Button tương tác

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Button Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: const Text('Click me'),
          ),
        ),
      ),
    );
  }
}

---

8. Debug Console

Khi chạy app, bạn có thể thấy output trong Debug Console:

flutter: Button pressed!

Sử dụng print() hoặc debugPrint() để debug.

---

📝 Tóm tắt

Command	Mô tả
flutter create <name>	Tạo project mới
flutter run	Chạy app
r	Hot reload
R	Hot restart
q	Thoát

Widget cơ bản đã học:

• MaterialApp - App wrapper
• Scaffold - Page structure
• AppBar - Top bar
• Center - Căn giữa
• Text - Hiển thị text
• ElevatedButton - Button