Giới thiệu về Flutter

Flutter là gì?

Flutter là UI toolkit mã nguồn mở của Google, cho phép xây dựng ứng dụng native đẹp mắt cho mobile, web, desktop và embedded từ một codebase duy nhất.

Tại sao nên học Flutter?

1. Cross-platform từ một codebase


// Viết một lần, chạy mọi nơi
void main() {
  runApp(MyApp());
}

Một codebase Dart có thể build ra:

📱 iOS & Android apps
🌐 Web apps
💻 Desktop apps (Windows, macOS, Linux)
📺 Embedded devices

2. Hiệu suất Native

Flutter không sử dụng web view hay bridge như các framework khác. Thay vào đó, Flutter:

Compile trực tiếp thành native ARM code
Sử dụng engine đồ họa Skia riêng
Đạt 60fps mượt mà

3. Hot Reload

Thay đổi code và thấy kết quả ngay lập tức mà không mất state:


// Thay đổi màu
Container(
  color: Colors.blue,  // Đổi thành Colors.red
)
// Hot Reload -> Thấy ngay!

Flutter cung cấp hàng trăm widgets có sẵn theo hai design systems:

Design System	Platform	Mô tả
Material Design	Android-style	Google’s design language
Cupertino	iOS-style	Apple’s Human Interface

Kiến trúc Flutter


┌─────────────────────────────────────┐
│           Your Dart Code            │
│         (Widgets, Logic)            │
├─────────────────────────────────────┤
│          Flutter Framework          │
│    (Material, Cupertino, Widgets)   │
├─────────────────────────────────────┤
│           Flutter Engine            │
│      (Skia, Dart VM, Platform)      │
├─────────────────────────────────────┤
│         Platform Embedders          │
│    (iOS, Android, Web, Desktop)     │
└─────────────────────────────────────┘

Trong Flutter, mọi thứ đều là Widget:


// Text là widget
Text('Hello Flutter')
 
// Button là widget
ElevatedButton(onPressed: () {}, child: Text('Click'))
 
// Thậm chí padding cũng là widget
Padding(
  padding: EdgeInsets.all(8.0),
  child: Text('Padded text'),
)

So sánh với các framework khác

Tiêu chí	Flutter	React Native	Native (Swift/Kotlin)
Ngôn ngữ	Dart	JavaScript	Swift/Kotlin
Hiệu suất	Cao	Trung bình	Cao nhất
Hot Reload	✅ Có	✅ Có	❌ Không
Cross-platform	✅ Đầy đủ	✅ Mobile	❌ Riêng lẻ
Learning curve	Trung bình	Dễ	Khó

Điều kiện tiên quyết

Trước khi học Flutter, bạn nên:

Biết lập trình cơ bản - biến, hàm, điều kiện, vòng lặp
Học Dart cơ bản - xem phần Ngôn ngữ Dart
Hiểu OOP - classes, objects, inheritance

Các bước tiếp theo

📦 Cài đặt môi trường - Cài Flutter SDK, IDE
🚀 Ứng dụng đầu tiên - Hello World app
📁 Cấu trúc dự án - Hiểu folders và files
▶️ Chạy ứng dụng - Run trên emulator/device

📝 Tóm tắt

Flutter = Google’s UI toolkit cho cross-platform development
Một codebase → Mobile, Web, Desktop
Hot Reload = Phát triển nhanh
Everything is a Widget = Triết lý cốt lõi
Cần biết Dart trước khi học Flutter