flutter create, flutter run và hot reload

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:

flutter --version

App đích của khóa được kiểm trên Flutter 3.44.6 / Dart 3.12.2. 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.12.2 trong pubspec.yaml của app, và nó chấp mọi bản Dart 3.12 trở lên.

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

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, vì Git - thứ cần để tải app đó về - mới được cài ở bài sau.

Phần 1: Tạo Project

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

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:

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:

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:

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:

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

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

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:

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.