# flutter create, flutter run và hot reload

> flutter create, flutter run trên máy thật, cấu trúc thư mục ở mức cần thiết, và vòng lặp hot reload.

- URL: https://dantech.academy/courses/flutter-mobile-101/00-foundations-setup/lesson-02-first-app-hot-reload
- Khóa học: [Flutter Mobile 101](https://dantech.academy/courses/flutter-mobile-101.md)
- Module: Setup & App Đầu Tiên
- Thời lượng: 10 phút
- Độ khó: beginner
- Truy cập: Miễn phí, đọc toàn bài

## Mục tiêu

- Tạo project bằng flutter create và chạy được trên device
- Dùng hot reload và phân biệt được với hot restart

---

Hôm qua cài đặt, hôm nay được thưởng: app của bạn chạy trên máy thật. Kèm hot reload - vòng lặp sửa-xem gần như tức thời đã kéo rất nhiều dev đến với Flutter.

## Phiên Bản Khóa Học Dùng

Trước khi tạo project, đối chiếu version. Cả khóa được viết và kiểm chứng trên mức tối thiểu sau:

```bash
flutter --version
```

| Thành phần | Tối thiểu | Vì sao mốc này                                                            |
| ---------- | --------- | ------------------------------------------------------------------------- |
| Flutter    | 3.47.7    | Bản app đích của khóa được viết và kiểm trên đó                           |
| Dart       | 3.13.5    | `pubspec.yaml` của app ghi `sdk: ^3.13.5`, thấp hơn sẽ không `pub get` được |

App đích của khóa được kiểm trên **Flutter 3.47.7 / Dart 3.13.5**. Khóa không pin cứng một bản, cũng không dùng FVM: ràng buộc thật nằm ở `sdk: ^3.13.5` trong `pubspec.yaml` của app, và nó nhận mọi bản Dart từ 3.13.5 trở lên.

Thấy số thấp hơn thì nâng:

```bash
flutter upgrade
```

Cao hơn thì cứ dùng - các API trong khóa đều ổn định lâu năm. Nếu một đoạn code trong khóa báo lỗi "không tồn tại", việc đầu tiên là chạy lại `flutter --version` và so với bảng trên. Bản pin của **package** (`provider`, `shared_preferences`, `material_symbols_icons`) nằm ở bài sau, trong rules file.

App bạn đi cùng suốt khóa tên là **TicTac** - cờ caro chơi với máy, 3 kích thước bàn, 3 mức khó, có lưu thành tích. Bài sau bạn sẽ tải nó về và chạy trên máy thật. Hôm nay vẫn là project `flutter create` của riêng bạn.

## Phần 1: Tạo Project

Mở terminal tại thư mục bạn để code, chạy:

```bash
flutter create hello_flutter
cd hello_flutter
```

> Tên project Flutter dùng `snake_case` (chữ thường, gạch dưới) - quy ước của Dart, khác với nhiều hệ sinh thái khác.

`flutter create` sinh một app mẫu hoàn chỉnh kèm sẵn cấu trúc cho cả Android, iOS, web, desktop.

## Phần 2: Cấu Trúc Project - 4 Thứ Cần Biết

Mở thư mục bằng VS Code (hoặc Android Studio). Nhiều file, nhưng chỉ 4 thứ đáng quan tâm lúc này:

- **`lib/main.dart`** - toàn bộ code app mẫu nằm đây. `lib/` là nhà của mọi code Dart bạn viết; 90% thời gian của khóa ở trong thư mục này.
- **`pubspec.yaml`** - khai báo thông tin app và **dependencies** (thư viện). Muốn thêm thư viện thì sửa file này - tương đương `package.json` của Node hay `build.gradle` của Android.
- **`android/` và `ios/`** - hai "vỏ" native. Bạn gần như không chạm vào chúng trong khóa này, trừ lúc build bản cài ở bài cuối.
- **`test/`** - nơi chứa test. Chưa dùng ngay nhưng biết nó tồn tại.

Mở `lib/main.dart`, nhìn lướt qua:

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

`main()` là điểm khởi đầu của mọi chương trình Dart, và `runApp` gắn widget gốc lên màn hình. Widget là gì thì module 2 sẽ mổ xẻ - hôm nay chỉ cần biết: **mọi thứ nhìn thấy trên màn hình Flutter đều là widget**.

## Phần 3: Chạy App

Kiểm tra device rồi chạy:

```bash
flutter devices
flutter run
```

Nếu có nhiều device, chọn bằng `flutter run -d <device_id>`. Lần build đầu tiên chậm (vài phút) - các lần sau nhanh hơn hẳn.

App mẫu mở lên: một màn hình đếm số với nút `+`. Bấm thử vài lần.

Nếu build fail, ba nguyên nhân phổ biến ngày đầu:

| Triệu chứng                      | Cách xử lý                                                               |
| -------------------------------- | ------------------------------------------------------------------------ |
| `No devices found`               | Emulator chưa chạy xong / máy thật chưa Allow - quay lại bài 1           |
| Lỗi Android license              | `flutter doctor --android-licenses`, gõ y hết                            |
| Lỗi signing khi chạy iPhone thật | Mở `ios/Runner.xcworkspace` bằng Xcode, đăng nhập Apple ID ở tab Signing |

## Phần 4: Hot Reload - Khoảnh Khắc Ăn Tiền

Giữ app đang chạy và terminal đang mở. Trong `lib/main.dart`, tìm dòng:

```dart
home: const MyHomePage(title: 'Flutter Demo Home Page'),
```

Đổi title thành tên bạn:

```dart
home: const MyHomePage(title: 'App của Dan'),
```

Lưu file (VS Code với Flutter extension tự hot reload khi lưu; nếu chạy từ terminal, gõ phím `r` trong cửa sổ đang chạy `flutter run`).

Nhìn màn hình: tiêu đề đổi **trong chưa đến một giây**, và số đếm bạn đã bấm **vẫn giữ nguyên**. Đó là hot reload: tiêm code mới vào app đang chạy mà không mất state.

Phân biệt với người anh em:

|             | Phím | Điều gì xảy ra                          | Khi nào dùng                          |
| ----------- | ---- | --------------------------------------- | ------------------------------------- |
| Hot reload  | `r`  | Code mới vào, **giữ state**             | Sửa UI, sửa logic nhỏ - 95% thời gian |
| Hot restart | `R`  | Chạy lại app từ `main()`, **mất state** | Đổi code khởi tạo, state cũ gây nhiễu |

Vòng lặp **sửa → lưu → thấy ngay** này là lý do học Flutter rất "sướng tay". Nó cũng là công cụ chính để soát code AI sinh trong suốt khóa: dán code, lưu, nhìn kết quả tức thì.

Bài sau khép lại module setup: Git trở thành lưới an toàn của bạn, bạn tải app TicTac về chạy trên máy thật, và AI coding tool nhận rules file để sinh code theo chuẩn của khóa.

## Checklist thực hành

- [ ] Project `hello_flutter` chạy được trên device của bạn
- [ ] Bạn chỉ ra được vai trò của `lib/main.dart`, `pubspec.yaml`, `android/`+`ios/`, `test/`
- [ ] Bạn đã hot reload thành công và giải thích được nó khác hot restart chỗ nào
- [ ] `flutter --version` báo Flutter >= 3.47.7 và Dart >= 3.13.5

---

- Bài trước: [Cài Flutter SDK và flutter doctor](https://dantech.academy/courses/flutter-mobile-101/00-foundations-setup/lesson-01-install-flutter-sdk.md)
- Bài tiếp theo: [Git checkpoint, clone app đích và rules file cho AI](https://dantech.academy/courses/flutter-mobile-101/00-foundations-setup/lesson-03-git-checkpoints-ai-pair.md)