Một trong những nguyên nhân phổ biến nhất khiến ứng dụng Flutter bị sụt giảm FPS, gây giật lag (jank) khi cuộn trang là do hiện tượng Widget bị vẽ lại (re-build) quá nhiều lần không cần thiết.
1. Hiểu rõ cơ chế Re-build khi gọi setState hoặc notifyListeners
Mỗi khi bạn kích hoạt thay đổi State, Flutter sẽ duyệt cây Widget từ điểm kích hoạt trở xuống và vẽ lại tất cả các Widget con. Nếu điểm kích hoạt nằm ở Widget gốc cha lớn nhất, toàn bộ màn hình sẽ bị vẽ lại, gây lãng phí CPU cực lớn.
2. Quy tắc vàng 1: Sử dụng tối đa hằng số const
Thêm từ khóa const trước các Widget tĩnh. Flutter sẽ ghi nhớ các Widget này vào bộ nhớ cache và bỏ qua hoàn toàn việc vẽ lại chúng khi cây Widget cha re-build:
const Text('Tiêu đề tĩnh không bao giờ đổi');
3. Quy tắc vàng 2: Thu hẹp phạm vi của ScopedModelDescendant
Tránh bọc toàn bộ màn hình lớn bằng một thẻ ScopedModelDescendant. Hãy đưa Descendant xuống sâu nhất có thể, chỉ bọc đúng Widget thực sự hiển thị giá trị thay đổi để hạn chế tối đa vùng re-render.
Đặng Trí Thanh
Giám đốc Công nghệ · DNT Digital · Giảng viên HNDL
1.322
Bài viết
15.4k
Người theo dõi
120k+
Lượt đọc
Đào tạo và triển khai thực chiến Python, MT5 và hệ thống bot auto trading / IB cho học viên và doanh nghiệp.
