Hiệu năng là yếu tố quan trọng trong trải nghiệm người dùng, đặc biệt với các ứng dụng Flutter. Một trong những nguyên nhân phổ biến gây ra hiện tượng giật, lag là việc xây dựng lại widget (rebuilds) quá thường xuyên. Trong bài viết này, hãy cùng Neutron Academy tìm hiểu nguyên nhân và cách giảm tần suất xây dựng lại widget để cải thiện hiệu năng ứng dụng nhé.

1. Widget Rebuild Là Gì?

Trong Flutter, widget được xây dựng lại khi:

• Trạng thái (state) thay đổi.
• Một widget cha (parent widget) xây dựng lại.

Việc rebuild sẽ giúp giao diện đồng bộ với dữ liệu. Nhưng nếu thực hiện quá thường xuyên thì nó sẽ gây lãng phí tài nguyên và giảm hiệu năng.

2. Nguyên Nhân Dẫn Đến Widget Rebuild

Dưới đây là một số nguyên nhân dẫn đến Widget Rebuild:

• Sử dụng setState không cần thiết: Gọi setState trong widget cha làm tất cả widget con cũng bị xây dựng lại.
• Không tối ưu hóa cấu trúc widget: Không tách biệt các phần giao diện độc lập.
• Dùng StatefulWidget ở nơi không cần thiết: Một số trường hợp chỉ cần sử dụng StatelessWidget.

3. Cách Giảm Widget Rebuild

Cách 1: Sử Dụng const

Các widget không thay đổi nên được đánh dấu bằng từ khóa const để Flutter biết rằng không cần xây dựng lại.

Ví dụ:

const Text('Hello World');

Cách 2: Tách Biệt Widget

Chia giao diện thành nhiều widget nhỏ để giới hạn phạm vi rebuild.

Ví dụ:

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IndependentWidget(), // Tách widget con
        AnotherIndependentWidget(),
      ],
    );
  }
}

Cách 3: Sử Dụng ValueListenableBuilder hoặc StreamBuilder

Thay vì gọi setState, hãy sử dụng các widget như ValueListenableBuilder để chỉ cập nhật giao diện khi dữ liệu thay đổi.

Ví dụ:

BValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) {
    return Text('$value');
  },
);

Cách 4: Memoization với ListView.builder hoặc GridView.builder

Tránh render toàn bộ danh sách, chỉ render các item hiển thị trên màn hình.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Text(items[index]);
  },
);

Cách 5: Tận Dụng InheritedWidget và Provider

Để chia sẻ dữ liệu mà không gây rebuild toàn bộ widget tree.

Ví dụ: Với Provider:

ChangeNotifierProvider(
  create: (_) => CounterModel(),
  child: MyApp(),
);

4. Công Cụ Phân Tích Rebuilds

Có hai công cụ phân tích Rebuilds chính:

• Flutter DevTools: Sử dụng tab Rebuilds để xem widget nào đang được xây dựng lại.
• RepaintBoundary: Bao bọc một phần giao diện trong RepaintBoundary để kiểm tra tần suất render.

Xem thêm về Tìm hiểu Testing trong Flutter

Kết luận

Việc kiểm soát widget rebuilds trong Flutter không chỉ giúp tối ưu hiệu năng mà còn cải thiện trải nghiệm người dùng. Bằng cách sử dụng các kỹ thuật như tách widget, tận dụng const, và công cụ phân tích rebuild, bạn có thể xây dựng ứng dụng mượt mà hơn, đáp ứng kỳ vọng của người dùng. Hy vọng những thông tin mà Neutron Academy mang lại sẽ hữu ích cho bạn.

Chúc bạn thành công trên con đường công nghệ thông tin!