1. Tổng quan về Flutter
Flutter là một bộ công cụ giao diện người dùng (UI framework) mã nguồn mở do Google tạo ra và ra mắt vào năm 2017. Điểm "ăn tiền" lớn nhất của Flutter là khả năng phát triển ứng dụng đa nền tảng (Cross-platform) chỉ với một mã nguồn (single codebase).
Thay vì phải học Java/Kotlin để viết app cho Android, rồi lại phải học Swift/Objective-C để viết app cho iOS, bạn chỉ cần học Flutter là có thể build app chạy mượt mà trên cả 2 hệ điều hành này,. Hiện nay, Flutter còn hỗ trợ build ra cả Web và các ứng dụng Desktop (Windows, macOS, Linux).
Flutter không sử dụng các thành phần giao diện mặc định của hệ điều hành mà tự vẽ lại mọi pixel trên màn hình bằng engine đồ họa riêng (Skia/Impeller), giúp ứng dụng có hiệu năng cực kỳ ấn tượng (có thể đạt 60-120fps) và giao diện nhất quán trên mọi thiết bị,. Rất nhiều ông lớn đang sử dụng Flutter như: chính Google (Google Pay), Alibaba, BMW, Toyota, v.v.,.
2. Giới thiệu ngôn ngữ lập trình Dart
Để học Flutter, bạn bắt buộc phải làm quen với ngôn ngữ lập trình Dart. Đây cũng là một ngôn ngữ do Google phát triển, được tối ưu hóa riêng cho việc xây dựng giao diện người dùng.
Nếu bạn đã từng học C++, C# hay Java ở trường đại học, bạn sẽ thấy Dart cực kỳ "quen mặt". Dart là ngôn ngữ kiểu tĩnh (statically typed), hỗ trợ lập trình hướng đối tượng (OOP) hoàn chỉnh với các khái niệm quen thuộc như Class, Interface, Mixin, Kế thừa....
Một số điểm thú vị của Dart khi kết hợp với Flutter:
- Hot Reload: Dart hỗ trợ biên dịch Just-In-Time (JIT) trong quá trình phát triển. Điều này cho phép tính năng "Hot Reload" hoạt động – bạn vừa sửa code, lưu lại là giao diện app trên điện thoại cập nhật ngay lập tức trong chưa tới 1 giây mà không cần khởi động lại app,.
- Null Safety: Dart áp dụng cơ chế an toàn null (Sound Null Safety), giúp bạn tránh được lỗi "NullPointerException" khét tiếng, làm cho code an toàn và ít lỗi vặt hơn,.
3. Các bước cài đặt Flutter trên Android Studio
Để lập trình Flutter, bạn cần cài đặt Flutter SDK và một IDE (môi trường lập trình). Android Studio hoặc Visual Studio Code là 2 lựa chọn phổ biến nhất,. Ở đây, chúng ta sẽ dùng Android Studio vì nó tích hợp sẵn các công cụ máy ảo rất tiện lợi.
Bước 1: Tải và cài đặt Flutter SDK
- Truy cập link tải chính thức: Tải Flutter SDK.
- Tải file
.zipdành cho Windows (hoặc macOS/Linux tùy máy bạn). - Giải nén thư mục (Lưu ý: Không nên để trong
C:\Program Files, hãy để ở nơi dễ truy cập nhưC:\src\flutter). - Cấu hình biến môi trường (PATH): Mở Environment Variables trên Windows, tìm biến
Path, thêm đường dẫnC:\src\flutter\binvào để máy tính nhận diện được lệnhflutter.
Bước 2: Tải và cài đặt Android Studio
- Truy cập link tải: Tải Android Studio.
- Cài đặt bình thường (cứ bấm Next và chọn Standard Installation). Đảm bảo Android SDK và Android Emulator được tick chọn để cài đặt.
Bước 3: Cài đặt Plugin Flutter trong Android Studio
- Mở Android Studio lên.
- Vào mục Plugins (hoặc
File -> Settings -> Plugins),. - Tìm kiếm từ khóa Flutter và nhấn Install. Nó sẽ yêu cầu bạn cài thêm plugin Dart, bạn cứ chọn đồng ý.
- Khởi động lại (Restart) Android Studio.
Bước 4: Kiểm tra cài đặt
- Mở
Command Prompt(CMD) hoặc Terminal, gõ lệnh:flutter doctor,. - Công cụ này sẽ kiểm tra xem bạn còn thiếu gì không. Nếu thấy tất cả đều có dấu tích xanh
[✓], xin chúc mừng, bạn đã cài đặt thành công!. (Nếu có lỗi yêu cầu chấp nhận Android License, chỉ cần gõflutter doctor --android-licensesvà bấm 'y' cho đến hết,).
4. Các bước tạo và chạy 1 ứng dụng đầu tiên
Bây giờ chúng ta sẽ làm ứng dụng "Hello World" huyền thoại nhé:
Bước 1: Tạo project
- Mở Android Studio, chọn New Flutter Project,.
- Đảm bảo đường dẫn "Flutter SDK path" trỏ đúng vào thư mục Flutter bạn đã giải nén (VD:
C:\src\flutter). - Đặt tên project (lưu ý viết chữ thường và dùng dấu gạch dưới, ví dụ:
hello_flutter), sau đó nhấn Finish,.
Bước 2: Xóa code mẫu và viết code mới
Flutter sẽ tự sinh ra một thư mục project. Hãy nhớ nguyên tắc: 90% thời gian code của bạn sẽ nằm trong thư mục lib/.
Mở file lib/main.dart, xóa hết toàn bộ code có sẵn đi và chép đoạn code cực kỳ đơn giản sau đây vào:
import 'package:flutter/material.dart';
// Hàm main là nơi chương trình bắt đầu chạy
void main() {
runApp(const MyApp());
}
// Tạo một Widget cơ bản
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text(
'Hello World - Chào sinh viên IT!',
style: TextStyle(fontSize: 24, color: Colors.blue),
),
),
),
);
}
}
Giải thích code nhanh: Mọi thứ trong Flutter đều là Widget (thành phần giao diện). MaterialApp là khung chứa app, Scaffold cung cấp cấu trúc màn hình cơ bản, Center giúp căn giữa nội dung, và Text dùng để hiển thị chữ.
Bước 3: Chạy ứng dụng
- Bạn có thể cắm điện thoại thật vào máy tính (nhớ bật USB Debugging) hoặc chọn một máy ảo (Emulator) ngay trên thanh công cụ của Android Studio hoặc chạy trực tiếp trên trình duyệt Chrome,.
- Nhấn nút Run (biểu tượng hình tam giác màu xanh),.
- Đợi một lát để code biên dịch, và Bùm! Dòng chữ "Hello World" đã hiện lên màn hình điện thoại của bạn.
5. Một số tài liệu tham khảo hữu ích
Để tự học Flutter ở mức cơ bản đến nâng cao, bạn có thể lưu lại các trang web "gối đầu giường" sau:
- Trang chủ Flutter (Tiếng Anh): Nơi chứa mọi tài liệu chính thống, chính xác nhất từ Google.
- Trang chủ ngôn ngữ Dart (Tiếng Anh): Giúp bạn tra cứu cú pháp và cách hoạt động của Dart.
- Link: https://dart.dev/
- DartPad (Lập trình trực tuyến): Nếu máy yếu chưa kịp cài đặt IDE, bạn có thể lên đây gõ code Dart/Flutter và xem kết quả ngay trên trình duyệt web.
- Link: https://dartpad.dev/,
- Học qua series bài viết tiếng Việt (Viblo / Cafedev / 200Lab): Rất nhiều lập trình viên Việt Nam chia sẻ các bài hướng dẫn chi tiết từ biến, hàm cho đến cách chia bố cục màn hình.
- Ví dụ chuỗi bài học Flutter trên Viblo: Làm quen với Dart cơ bản
- Kho mã nguồn mở (Pub.dev): Khi bạn cần dùng thư viện bên ngoài (như gọi API, lưu dữ liệu), hãy lên đây tìm kiếm.
- Link: https://pub.dev/
Chúc các bạn sinh viên IT có những giờ phút "code dạo" thật thú vị và sớm hoàn thành được những chiếc app xịn xò của riêng mình nhé!
Nếu bạn muốn có nguồn thu tự động, hoàn toàn miễn phí và vô cùng đơn giản thì có thể tham khảo app kiếm tiền Honeygain và EarnApp tại đây.
Nguồn NotebookLM
