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.
