Flutter — khái niệm chính, kiến trúc và widget

Flutter là gì

Flutter là SDK (Bộ công cụ phát triển phần mềm) và framework để tạo giao diện người dùng, được Google công bố vào năm 2015. Phiên bản ổn định đầu tiên Flutter 1.0 được phát hành vào tháng 12 năm 2018. Không giống như React Native, Flutter không sử dụng cầu nối giữa JavaScript và mã gốc — nó biên dịch trực tiếp thành lệnh xử lý gốc.

Tính năng chính của Flutter là công cụ kết xuất riêng của nó. Framework không phụ thuộc vào UIKit (iOS) hay hệ thống View của Android. Thay vào đó, Flutter vẽ từng pixel một cách độc lập thông qua Skia (trước 2024) hoặc công cụ Impeller mới. Điều này đảm bảo giao diện nhất quán trên tất cả các nền tảng và loại bỏ vấn đề thích ứng giữa các phiên bản OS khác nhau.

Theo Statista 2024, Flutter đứng đầu trong số các framework đa nền tảng về mức độ phổ biến: khoảng 46% nhà phát triển sử dụng nó để phát triển ứng dụng di động. Framework được sử dụng trong các dự án của Google Pay, Alibaba, eBay, BMW và Tencent.

Lịch sử và các phiên bản Flutter

Phiên bản alpha đầu tiên của Flutter được trình bày tại Hội nghị thượng đỉnh nhà phát triển Dart năm 2015 với tên gọi Sky. Năm 2018, Flutter 1.0 được phát hành với hỗ trợ chỉ cho iOS và Android. Flutter 2.0 (2021) thêm hỗ trợ Web và Desktop. Flutter 3.0 (2022) giới thiệu hỗ trợ ổn định cho macOS và Linux. Flutter 3.16 (2023) giới thiệu Impeller — công cụ kết xuất mới dựa trên Metal và Vulkan.

Flutter 3.22 (2024) bao gồm Impeller mặc định trên iOS, hỗ trợ Material Design 3 được cải thiện, Dart 3.4 với tiện ích mở rộng macro và hỗ trợ Native Assets tích hợp để truy cập trực tiếp vào tài nguyên nền tảng. Google báo cáo rằng Impeller giảm 90% hiện tượng giật hình so với Skia.

Ngôn ngữ Dart

Dart là ngôn ngữ lập trình được Google tạo ra vào năm 2011 và được sử dụng trong Flutter. Dart kết hợp kiểu dữ liệu chặt chẽ với khả năng biên dịch JIT (cho Hot Reload) và biên dịch AOT (cho bản dựng sản phẩm). Dart 3.0 (2023) giới thiệu pattern matching, sealed class và records như các tính năng ổn định.

Null safety trong Dart là tính năng bắt buộc được giới thiệu từ phiên bản 2.12. Trình biên dịch kiểm tra tất cả các kiểu có thể null tại thời điểm xây dựng, loại bỏ NullPointerException khi chạy. Các kiểu dữ liệu (int, String, bool) không thể null theo mặc định và các giá trị có thể null sử dụng hậu tố ? (ví dụ: String? name).

Kiến trúc Flutter

Kiến trúc Flutter được xây dựng theo nguyên tắc ba lớp. Lớp dưới cùng là công cụ (C/C++), chịu trách nhiệm kết xuất, I/O và truy cập API nền tảng. Lớp giữa là framework (Dart), triển khai hệ thống widget, cử chỉ, hoạt ảnh và điều hướng. Lớp trên cùng là ứng dụng (Dart), tập hợp các widget thành một cây.

Widget và cây widget

Trong Flutter, mọi thứ đều là widget. Widget có hai loại: StatelessWidget (bất biến, không lưu trạng thái) và StatefulWidget (có thể thay đổi, quản lý trạng thái qua State). Cây widget (Widget Tree) là cấu trúc phân cấp nơi mỗi widget con được lồng bên trong widget cha. Scaffold, AppBar, Container, Text, Column, Row — đây là những khối xây dựng cơ bản.

BuildContext là đối tượng truyền đạt vị trí của widget trong cây. MediaQuery.of(context) lấy kích thước màn hình, Theme.of(context) lấy chủ đề hiện tại. BuildContext được sử dụng cho điều hướng (Navigator.of(context)), truy cập InheritedWidget và dịch ngôn ngữ qua Localizations.of.

Công cụ Impeller

Impeller là công cụ kết xuất hiện đại của Flutter, được viết bằng C++ và sử dụng Metal (iOS/macOS) và Vulkan (Android). Không giống như Skia, vẽ lại từng khung hình từ đầu, Impeller biên dịch shader trước và lưu trữ chúng trong bộ nhớ đệm. Điều này loại bỏ độ trễ khi kết xuất lần đầu các cảnh phức tạp và giảm tải GPU.

Các thử nghiệm của Nhóm Google Flutter cho thấy Impeller giảm thời gian biên dịch shader từ 200–500 ms (Skia) xuống còn 1–3 ms. Trên iPhone 13 Pro, kết xuất xung của Impeller đạt 120 FPS không tụt khung hình. Trên Android với Vulkan, nó cung cấp 60 FPS ổn định ngay cả trên thiết bị tầm trung (Xiaomi Redmi Note 12).

Ví dụ ứng dụng Flutter

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

Ưu điểm của Flutter

Cơ sở mã duy nhất — ưu điểm chính của Flutter. Một dự án Dart biên dịch cho iOS, Android, Web, Windows, macOS và Linux. Theo Google, điều này giảm thời gian phát triển 30–50% so với các dự án iOS và Android riêng biệt. Alibaba đã giảm 30% thời gian phát hành phiên bản sau khi chuyển sang Flutter.

Hiệu suất của Flutter gần với hiệu suất gốc. Biên dịch AOT của Dart thành mã máy ARM và x86_64 loại bỏ độ trễ thông dịch. Công cụ Impeller đảm bảo 60 FPS ngay cả trên thiết bị năm 2018 (iPhone XR, Samsung Galaxy S9). Theo Google, 99,5% khung hình trong ứng dụng Flutter được kết xuất không giật.

Hot Reload — công nghệ cập nhật mã tức thì. Nhà phát triển thay đổi mã nguồn, lưu tệp và Flutter xây dựng lại cây widget trong 300–800 ms mà không mất trạng thái ứng dụng hiện tại. Điều này tăng tốc các vòng lặp thiết kế UI: có thể thay đổi lề, màu sắc và hoạt ảnh trong vài giây mà không cần đợi xây dựng lại toàn bộ.

Material Design 3 và ngôn ngữ thiết kế Cupertino gốc (kiểu iOS) được bao gồm trong gói Flutter tiêu chuẩn. Widget Material 3 hỗ trợ màu động (Material You), bố cục thích ứng và hoạt ảnh chuyển tiếp màn hình. CupertinoPageTransition và CupertinoNavigationBar mô phỏng hành vi của trình điều hướng iOS gốc.

Tùy chỉnh widget không yêu cầu tạo View tùy chỉnh trên mỗi nền tảng. Chỉ cần ghi đè build() và trả về một widget mới. Các gói hoạt ảnh (AnimatedContainer, Hero, TweenAnimationBuilder) và cử chỉ (GestureDetector, Dismissible) bao phủ 95% kịch bản hoạt ảnh UI mà không cần viết mã nền tảng.

Hệ sinh thái và gói Flutter

pub.dev là kho lưu trữ gói chính thức cho Dart và Flutter. Tính đến tháng 7 năm 2024, hơn 45.000 gói đã được xuất bản trong kho. Cài đặt một gói được thực hiện bằng lệnh flutter pub add <tên_gói>. Pub tự động giải quyết các phụ thuộc, kiểm tra tương thích phiên bản và tạo pubspec.lock.

Quản lý trạng thái trong Flutter là một trong những thách thức kiến trúc chính. Ngoài flutter_bloc, các giải pháp phổ biến bao gồm: Provider (Google khuyến nghị, sử dụng InheritedWidget), Riverpod (phiên bản thiết kế lại của Provider với an toàn thời gian biên dịch) và GetX (tất cả trong một: trạng thái, định tuyến, DI). Provider vẫn là dễ nhất để bắt đầu: ChangeNotifierProvider bao bọc mô hình và Consumer xây dựng lại widget khi dữ liệu thay đổi.

Kiểm thử trong Flutter được hỗ trợ ở ba cấp độ. Kiểm thử đơn vị (flutter test) kiểm tra hàm và lớp không có UI. Kiểm thử widget (testWidgets) kết xuất các widget riêng lẻ trong môi trường biệt lập. Kiểm thử tích hợp (IntegrationTest) chạy toàn bộ ứng dụng trên thiết bị hoặc trình mô phỏng. Flutter 3.22 đã thêm hỗ trợ cho kiểm thử bản vá thông qua phân tích bản vá và báo cáo độ phủ mã được cải thiện.

Các gói phổ biến

dio là HTTP client hỗ trợ bộ chặn, thời gian chờ và FormData. Được sử dụng trong 40% dự án Flutter trên GitHub. Dio hỗ trợ chặn yêu cầu để ghi nhật ký, thử lại và thêm mã thông báo xác thực. Thư viện phổ biến thứ hai là retrofit, tạo ra các client API được nhập kiểu.

flutter_bloc là thư viện quản lý trạng thái dựa trên mẫu BLoC (Thành phần logic nghiệp vụ). BlocProvider truyền trạng thái xuống cây widget, BlocBuilder xây dựng lại UI khi trạng thái thay đổi và BlocListener xử lý các tác dụng phụ (điều hướng, SnackBar). Cubit là phiên bản đơn giản hóa của BLoC không có sự kiện.

go_router là điều hướng khai báo cho Flutter bởi Google. Các tuyến được mô tả trong cấu hình GoRouter với hỗ trợ tuyến lồng nhau, chuyển hướng và deep link. ShellRoute chia điều hướng giữa các tab BottomNavigationBar. GoRouter 14.0 hỗ trợ đường dẫn an toàn kiểu và StatefulShellRoute với bảo toàn trạng thái tab.