Bí quyết tối ưu hiệu năng Flutter đạt 60fps/120fps không bị giật lag (Jank)

Hiện tượng giao diện bị giật khựng (Jank) khi cuộn danh sách hay chuyển màn hình trong Flutter xảy ra khi thời gian Render 1 khung hình vượt quá **16ms (đối với màn 60Hz)** hoặc **8ms (đối với màn 120Hz)**. 7 kỹ thuật dưới đây sẽ giúp ứng dụng Flutter của bạn chạy xé gió!

1. 7 Kỹ thuật tối ưu mượt 120fps cho Flutter

1. Sử dụng từ khóa const tối đa cho các Widget

Từ khóa const bảo với Flutter Engine rằng Widget này không bao giờ thay đổi, giúp Flutter **bỏ qua việc khởi tạo lại Widget** khi cây Widget Parent bị re-render.

2. Sử dụng ListView.builder thay cho ListView thường

ListView.builder chỉ khởi tạo các phần tử **đang thực sự hiển thị trên màn hình**, giúp tiết kiệm 90% bộ nhớ RAM khi hiển thị danh sách hàng ngàn sản phẩm.

3. Bọc các Widget Animation phức tạp bằng RepaintBoundary

Sử dụng RepaintBoundary để cách ly vùng Widget có Animation, ngăn không cho hiện tượng vẽ lại (Repaint) lan ra các Widget xung quanh.

4. Tách nhỏ Widget thành các Stateless/StatefulComponent riêng

Tránh viết hàm build() dài hàng trăm dòng chứa nhiều setState() làm re-render toàn bộ màn hình lớn.

5. Giải phóng bộ nhớ trong hàm dispose()

Bắt buộc gọi dispose() cho các AnimationController, TextEditingController, StreamSubscription để chống tràn bộ nhớ (Memory Leak).

6. Nén và Cache hình ảnh bằng CachedNetworkImage

Sử dụng memCacheWidth và memCacheHeight để giải nén ảnh đúng kích thước hiển thị trên màn hình (xem bài tối ưu dung lượng hình ảnh).

7. Sử dụng Flutter DevTools Profiler phát hiện Jank

Mở Flutter DevTools → Performance tab để soi các dòng cột màu đỏ (khung hình bị giật) và tìm đúng Widget gây nghẽn luồng UI Thread.

Kết luận

Tối ưu hiệu năng là ranh giới giữa một ứng dụng bình dân và một sản phẩm cao cấp đạt chuẩn 5 sao. Uwmee Software cam kết 100% ứng dụng Flutter được tối ưu mượt 60fps/120fps trước khi bàn giao. Đọc thêm bài viết tối ưu Android Vitals.