Bài 1. Flutter là gì? Cài đặt môi trường - Tự Học Tin

Flutter là bộ công cụ của Google để viết ứng dụng Android, iOS, web và desktop từ một mã nguồn duy nhất bằng ngôn ngữ Dart. Bài này giải thích cách Flutter hoạt động và hướng dẫn cài đặt đến khi chạy được ứng dụng đầu tiên.

60 phútCơ bản

Bạn sẽ học được

Hiểu Flutter khác gì Android native và React Native
Cài Flutter SDK, Android Studio/VS Code
Kiểm tra môi trường bằng flutter doctor
Tạo và chạy ứng dụng đầu tiên với hot reload

Thuật ngữ cần biết

SDK: Bộ công cụ phát triển gồm trình biên dịch, thư viện, dòng lệnh.
Widget: Mọi thứ trên màn hình Flutter đều là widget.
Hot reload: Nạp lại mã đang chạy trong chưa tới một giây, giữ nguyên trạng thái.
Emulator: Máy ảo Android chạy trên máy tính.

Khái niệm và lý thuyết

Khác với Android native (Kotlin + XML/Compose) chỉ chạy trên Android, Flutter tự vẽ toàn bộ giao diện bằng engine đồ họa riêng (Impeller), không dùng thành phần giao diện của hệ điều hành. Nhờ vậy giao diện giống hệt nhau trên mọi nền tảng và đạt 60–120 khung hình/giây.

Mã Dart được biên dịch JIT khi phát triển (cho hot reload) và AOT ra mã máy khi phát hành (chạy nhanh). Năm 2026, Flutter thuộc dòng 3.4x đi kèm Dart 3.1x; Google dùng Flutter cho Google Pay, Google Classroom; tại Việt Nam nhiều ứng dụng ngân hàng, thương mại điện tử dùng Flutter.

Tiêu chí	Flutter	Android native	React Native
Ngôn ngữ	Dart	Kotlin	JavaScript/TS
Nền tảng	Android, iOS, web, desktop	Android	Android, iOS
Giao diện	Tự vẽ	Thành phần hệ thống	Thành phần hệ thống

Cài đặt trên Windows

Cài Git for Windows và VS Code kèm tiện ích Flutter (tự cài Dart).
Trong VS Code: Ctrl+Shift+P → Flutter: New Project; VS Code sẽ đề nghị tải Flutter SDK, chọn thư mục như C:\dev\flutter (không có dấu cách, không cần quyền admin).
Cài Android Studio để có Android SDK và trình giả lập; trong SDK Manager chọn thêm Android SDK Command-line Tools.
Chấp nhận giấy phép: flutter doctor --android-licenses.

flutter --version
flutter doctor

Mỗi dòng có dấu ✓ là đạt. Lập trình iOS cần máy Mac có Xcode.

Ứng dụng đầu tiên

flutter create hello_app
cd hello_app
flutter run          # chọn thiết bị: emulator, Chrome, Windows

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('Tự Học Tin')),
        body: const Center(child: Text('Xin chào Flutter!')),
      ),
    );
  }
}

Sửa chữ rồi nhấn r trong terminal (hoặc lưu tệp trong VS Code) để hot reload; R để hot restart.

Cấu trúc dự án

Thư mục/tệp	Vai trò
lib/main.dart	Mã nguồn chính
pubspec.yaml	Khai báo tên, phiên bản, thư viện, tài nguyên
android/, ios/, web/	Mã nền tảng do Flutter sinh
test/	Mã kiểm thử

Mẹo hay

Khi máy yếu, chạy thử trên Chrome (flutter run -d chrome) hoặc điện thoại thật qua USB (bật Tùy chọn nhà phát triển → Gỡ lỗi USB) thay vì trình giả lập.

Lưu ý

Đường dẫn SDK chứa dấu cách hoặc tiếng Việt có dấu thường gây lỗi build Android. Hãy đặt ở thư mục ngắn như C:\dev\flutter.

Thực hành

Cài đặt đến khi flutter doctor không còn dấu ✗ cho Android.
Tạo dự án hello_app, đổi tiêu đề AppBar thành tên của bạn.
Thử hot reload và hot restart, nhận xét khác nhau.
Chạy cùng ứng dụng trên Chrome và trên điện thoại/giả lập.

Tóm tắt bài học

Flutter: một mã nguồn Dart cho nhiều nền tảng, tự vẽ giao diện.
flutter doctor kiểm tra môi trường.
Hot reload giúp phát triển rất nhanh.
pubspec.yaml quản lý thư viện và tài nguyên.