Tổng quan về Flutter [Phụ lục Flutter] [Tự học Flutter]

1. Tổng quan về Flutter

Flutter là gì? 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 phiên bản ổn định vào năm 2018. Đặc điểm "ăn tiền" nhất của Flutter là khả năng phát triển ứng dụng đa nền tảng chỉ với một mã nguồn (single codebase). Điều này có nghĩa là các bạn chỉ cần viết code một lần bằng ngôn ngữ Dart, ứng dụng có thể biên dịch và chạy mượt mà trên cả Android, iOS, Web, Windows, macOS và Linux.

Tổng quan về Flutter [Phụ lục Flutter] [Tự học Flutter]

Hiệu năng ấn tượng: Khác với nhiều framework đa nền tảng cũ, code Flutter được biên dịch trực tiếp ra mã máy (ARM hoặc Intel) và không cần thông qua các "cầu nối" (bridge) làm chậm ứng dụng. Nhờ đó, ứng dụng Flutter mang lại hiệu năng cao và cảm giác mượt mà y hệt như ứng dụng thuần (native app). Rất nhiều "ông lớn" công nghệ đang sử dụng Flutter như chính Google (Google Pay), Alibaba, BMW, Toyota.

2. Cấu trúc của Flutter

Để hiểu tại sao Flutter lại mạnh mẽ đến vậy, các bạn cần nắm được cấu trúc phân tầng (layered architecture) của nó. Cấu trúc này được chia làm 3 lớp chính từ dưới lên trên:

Lớp Embedder (Nền tảng): Đây là lớp thấp nhất, giao tiếp trực tiếp với hệ điều hành (Android, iOS, Web...). Nó quản lý các tác vụ mức hệ thống như luồng (thread), hiển thị đồ họa, và đầu vào từ người dùng.
Lớp Engine (Động cơ C/C++): Là "trái tim" của Flutter. Lớp này hỗ trợ các nguyên thủy cốt lõi để vẽ đồ họa (sử dụng engine Skia hoặc Impeller), xử lý văn bản, mạng và biên dịch mã Dart. Thay vì dùng các thành phần giao diện có sẵn của điện thoại, Flutter tự vẽ từng pixel lên màn hình bằng engine này, giúp giao diện nhất quán trên mọi thiết bị.
Lớp Framework (Dart): Đây là lớp trên cùng và là nơi các bạn sẽ tương tác 100% thời gian khi code. Lớp này cung cấp các nền tảng (Foundation), Animation, Painting và đặc biệt là hệ thống Widgets.

Quy tắc vàng trong Flutter: "Mọi thứ đều là Widget" Trong Flutter, UI được xây dựng theo hướng khai báo (declarative). Các bạn sẽ thiết kế giao diện bằng cách lắp ráp các "khối lego" gọi là Widget. Một nút bấm, một đoạn văn bản, một căn lề, hay thậm chí toàn bộ ứng dụng đều là các Widget lồng vào nhau tạo thành một Cây Widget (Widget Tree).

3. Các bước tạo ứng dụng với Flutter

Bây giờ, chúng ta hãy xắn tay áo lên và tạo ứng dụng đầu tiên bằng Android Studio nhé!

Bước 1: Khởi tạo Project
- Mở Android Studio, chọn New Flutter Project (hoặc File -> New -> New Flutter Project).
- Ở phần Flutter SDK path, trỏ đường dẫn đến thư mục các bạn đã giải nén Flutter (Ví dụ: C:\src\flutter).
- Đặt tên project ở ô Project name (lưu ý viết chữ thường và dùng dấu gạch dưới, VD: hello_flutter), sau đó nhấn Create/Finish.
Bước 2: Hiểu cấu trúc thư mục
- Khi project được tạo ra, các bạn sẽ thấy rất nhiều thư mục. Hãy ghi nhớ: 90% thời gian các bạn sẽ chỉ làm việc trong thư mục lib/.
- Tìm và mở file lib/main.dart. Đây là điểm bắt đầu (entry point) của mọi ứng dụng Flutter.
Bước 3: Viết đoạn code đầu tiên
- Các bạn hãy xóa toàn bộ code mẫu có sẵn trong file main.dart và gõ lại đoạn code sau:

import 'package:flutter/material.dart';

// Hàm main là nơi ứng dụng bắt đầu chạy
void main() {
  runApp(const MyApp());
}

// Widget cao nhất của ứng dụng
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World - Chào lớp mình nhé!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Bước 4: Chạy ứng dụng
- Các bạn chọn một máy ảo Android (Emulator) đã cài đặt sẵn trên thanh công cụ, hoặc chạy trực tiếp trên trình duyệt Chrome (Web).
- Nhấn nút Run (biểu tượng hình tam giác màu xanh).
- Đợi một lát để phần mềm biên dịch.

📝 Bài tập củng cố

Để đảm bảo các bạn đã nắm bắt được nội dung bài học, hãy hoàn thành bài tập nhỏ sau đây:

Yêu cầu:

Tạo một Flutter project mới với tên bai_tap_1.
Chỉnh sửa file lib/main.dart sao cho màn hình không hiển thị "Hello World" nữa, mà thay vào đó hiển thị nội dung: "Xin chào, tôi tên là [Tên đầy đủ của bạn] - Mã SV: [Mã sinh viên của bạn]".
Chỉnh sửa thuộc tính style của Text để đổi màu chữ thành màu đỏ (Colors.red) và cỡ chữ (fontSize) là 30.
Chạy ứng dụng trên máy ảo hoặc Chrome, chụp màn hình kết quả và nộp lại lên hệ thống.

Cùng Học IT