Bạn đã sẵn sàng để dấn thân vào con đường trở thành Mobile Developer triệu đô chưa? Hành trình vạn dặm bắt đầu bằng một bước chân, và với Flutter, bước chân đó chính là Cài Đặt Môi Trường.

Rất nhiều bạn bỏ cuộc ngay từ bước này vì gặp lỗi biến môi trường (PATH) hay xung đột Android SDK. Đừng lo, bài viết này sẽ “cầm tay chỉ việc” giúp bạn thiết lập một môi trường code chuẩn chỉnh, ít lỗi vặt nhất.

1. Quy trình cài đặt chuẩn (Flowchart)

Trước khi bắt đầu, hãy nhìn qua sơ đồ tổng quan để biết chúng ta đang ở đâu:

1. Tải Flutter SDK: Vào trang chủ flutter.dev, chọn hệ điều hành của bạn.
2. Cập nhật PATH: Đây là bước quan trọng nhất. Bạn cần thêm đường dẫn flutter/bin vào biến môi trường của máy tính để có thể gõ lệnh flutter ở bất cứ đâu.
3. Flutter Doctor: Chạy lệnh flutter doctor trong terminal. Nó giống như một bác sĩ khám bệnh, sẽ báo cho bạn biết máy bạn thiếu cái gì (thiếu Android SDK, chưa cài VS Code, v.v…).

2. Giải mã cấu trúc Project Flutter

Sau khi cài đặt xong, hãy tạo dự án đầu tiên bằng lệnh:

flutter create my_first_app

Mở VS Code lên, bạn sẽ thấy một rừng thư mục. Đừng hoảng! Bạn chỉ cần quan tâm những thư mục được đánh dấu này thôi:

• lib/: Đây là “nhà” của chúng ta. 99% thời gian bạn sẽ code ở đây. File main.dart chính là cửa ngõ chính của ứng dụng.
• android/ & ios/: Chứa các file cấu hình riêng cho từng nền tảng (ví dụ xin quyền Camera, sửa icon app).
• pubspec.yaml: File “thần thánh” để khai báo thư viện (giống package.json của Node.js). Muốn thêm gói xoay ảnh hay map? Khai báo vào đây.

3. Hello World – Ứng dụng đầu đời

Hãy mở file lib/main.dart, xóa sạch sành sanh mọi thứ và gõ lại đoạn code sau. Đừng copy paste, hãy gõ để cảm nhận!

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('Ứng dụng đầu tay'),
          backgroundColor: Colors.blue,
        ),
        body: const Center(
          child: Text(
            'Hello World!',
            style: TextStyle(fontSize: 30, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Nhấn F5 để chạy. Bùm! Bạn vừa chính thức trở thành một lập trình viên Flutter tập sự.

4. Các lỗi thường gặp khi cài đặt

• “flutter command not found”: Bạn chưa thêm đường dẫn vào PATH. Hãy kiểm tra lại phần Environment Variables.
• “Android License Status Unknown”: Bạn cần chạy lệnh flutter doctor --android-licenses và nhấn y liên tục để đồng ý.

Cài đặt môi trường tuy hơi khô khan nhưng là nền móng vững chắc. Ở bài tiếp theo, chúng ta sẽ bắt đầu “vọc vạch” sâu hơn vào các khối gạch tạo nên giao diện: Widget.

Bài tiếp theo: Widget trong Flutter: Bí quyết UI mobile đẹp (Stateless vs Stateful).

👉 Khám phá sức mạnh của Widget trong Flutter

💡 Bạn muốn bỏ qua việc mò mẫm lỗi setup và được hướng dẫn 1-1?
Tham gia ngay: Khóa học Lập trình Flutter Thực chiến (Kèm Setup tận răng)