SliverMultiBoxAdaptorElement: Bí mật của Flutter mượt mà

Chào các dân chơi code, anh Creyt đây! Hôm nay chúng ta sẽ bóc tách một khái niệm nghe hơi hàn lâm nhưng lại là 'xương sống' giúp các app Flutter của mấy đứa mượt mà như lướt ván trên mạng xã hội vậy: SliverMultiBoxAdaptorElement. Nghe tên thôi đã thấy dài và 'nguy hiểm' rồi phải không? Nhưng yên tâm, qua tay anh Creyt thì cái gì cũng hóa 'kẹo ngọt' hết!

1. SliverMultiBoxAdaptorElement là gì mà nghe 'ghê' vậy anh Creyt?

Để anh Creyt kể cho nghe một câu chuyện meta-verse:

Tưởng tượng thế giới app của mấy đứa là một cái rạp chiếu phim vĩ đại, nơi mỗi widget là một diễn viên. Và cái màn hình điện thoại của user chính là cái sân khấu chính. Khi mấy đứa có một danh sách cuộn dài dằng dặc (như cái feed TikTok không đáy của mấy đứa vậy), thì việc 'đẩy' tất cả các diễn viên lên sân khấu cùng lúc là điều không thể. Vừa tốn không gian, vừa tốn điện, lại còn làm rạp cháy máy nữa chứ!

SliverMultiBoxAdaptorElement chính là vị đạo diễn đại tài và cực kỳ thông minh của cái rạp chiếu phim đó. Nhiệm vụ của ổng là: chỉ đưa những diễn viên nào sắp xuất hiện trên sân khấu (tức là sắp lọt vào tầm nhìn của người dùng) lên thôi. Mấy diễn viên khác cứ việc nghỉ ngơi trong hậu trường (bộ nhớ), không cần phải tốn công hóa trang hay ra sân khấu làm gì. Khi người dùng cuộn, ổng lại điều phối liên tục, diễn viên cũ hết vai thì về hậu trường, diễn viên mới thì lên sân khấu. Quá thông minh phải không?

Nói cách khác, đây là cái 'bộ não' đằng sau các widget như ListView.builder, GridView.builder, hay CustomScrollView với SliverList/SliverGrid dùng SliverChildBuilderDelegate. Nó giúp Flutter chỉ render (vẽ) và build (xây dựng) những item cần thiết, tiết kiệm tài nguyên hệ thống một cách đáng kinh ngạc. Đây chính là chìa khóa của 'lazy loading' hay 'virtualization' trong Flutter đó mấy đứa.

2. Code Ví Dụ Minh Họa: 'Đạo Diễn' tài ba trong thực tế

Để thấy rõ công việc của vị đạo diễn này, chúng ta hãy xem một ví dụ kinh điển với ListView.builder. Tuy mấy đứa chỉ gọi ListView.builder, nhưng đằng sau nó là cả một hệ thống SliverList và SliverMultiBoxAdaptorElement đang làm việc cật lực đó.

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(
      title: 'Creyt\'s Sliver Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> _items = List.generate(1000, (index) => 'Item số ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Creyt\'s Lazy List'),
      ),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          // Đây chính là nơi 'đạo diễn' SliverMultiBoxAdaptorElement
          // quyết định khi nào thì build (tạo) widget này.
          // Chỉ khi nó sắp xuất hiện trên màn hình thì mới được gọi.
          print('Building item ${index + 1}'); // Để xem nó build khi nào
          return Card(
            margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
            elevation: 4,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                _items[index],
                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
          );
        },
      ),
    );
  }
}

Khi mấy đứa chạy app này và cuộn danh sách, hãy mở console (Debug Console trong VS Code hoặc Android Studio) ra mà xem. Mấy đứa sẽ thấy dòng Building item X chỉ xuất hiện khi các item đó sắp hoặc đang hiển thị trên màn hình. Các item từ 500 trở đi sẽ không bao giờ được build nếu mấy đứa không cuộn tới đó. Thấy quyền năng của 'đạo diễn' chưa?

Gợi Ý Đọc Tiếp

RawScrollbar: Khi Thanh Cuộn 'Default Vibe' Không Đủ 'Chất'!

46 Lượt xem

3. Mẹo Vặt (Best Practices) từ anh Creyt để dùng 'đạo diễn' hiệu quả

• Luôn dùng builder cho danh sách dài: Đây là quy tắc vàng! Tránh xa ListView (không có .builder) nếu danh sách của mấy đứa có thể dài vô tận hoặc rất nhiều item. ListView thường build tất cả mọi thứ cùng lúc, dễ làm app lag, giật như 'ma làm'.
• Cung cấp key cho các item động: Nếu danh sách của mấy đứa có thể thay đổi thứ tự, thêm/xóa item, hãy dùng Key (ví dụ: ValueKey, ObjectKey) cho từng item trong itemBuilder. Điều này giúp Flutter nhận diện và tái sử dụng các widget một cách hiệu quả hơn, tránh việc phải rebuild lại toàn bộ khi có thay đổi nhỏ. Nó giống như việc đạo diễn biết rõ từng diễn viên, không bị nhầm lẫn khi thay đổi kịch bản vậy.
• Tối ưu hóa widget con: Mấy đứa có thể giúp 'đạo diễn' làm việc nhẹ nhàng hơn bằng cách tối ưu bản thân các diễn viên (widget con). Dùng const constructors khi có thể, hoặc cân nhắc dùng RepaintBoundary cho những widget con phức tạp, ít thay đổi để giới hạn vùng vẽ lại.
• Hiểu về addAutomaticKeepAlives và addRepaintBoundaries: Trong SliverChildBuilderDelegate, mấy đứa có thể điều chỉnh các thuộc tính này. addAutomaticKeepAlives: true (mặc định) giúp giữ trạng thái của các widget con khi chúng cuộn ra khỏi màn hình (như giữ nguyên vị trí cuộn của video TikTok). addRepaintBoundaries: true (mặc định) giúp Flutter tối ưu việc vẽ lại, chỉ vẽ lại phần widget con bị thay đổi thôi. Tùy trường hợp mà mấy đứa có thể tắt chúng đi để tối ưu hơn nữa, nhưng hãy cẩn thận và hiểu rõ tác dụng.

4. Ứng dụng thực tế: Ai đang dùng 'đạo diễn' này?

Thực ra, gần như mọi ứng dụng có danh sách cuộn dài đều đang dùng cơ chế này, dù trực tiếp hay gián tiếp. Ví dụ:

• Các mạng xã hội (Facebook, Instagram, TikTok): Feed của mấy đứa dài vô tận, nhưng app vẫn mượt mà. Đó là nhờ SliverMultiBoxAdaptorElement chỉ load những post đang hiển thị.
• Ứng dụng mua sắm (Shopee, Lazada): Danh sách sản phẩm khổng lồ, nhưng khi cuộn vẫn không bị lag. Tương tự, chỉ những sản phẩm trên màn hình mới được build.
• Ứng dụng tin tức, đọc truyện: Các bài viết, chương truyện dài hàng trăm trang, nhưng app vẫn 'bay'.

Bất cứ khi nào mấy đứa thấy một danh sách cuộn mượt mà không giới hạn, thì 99% là có bàn tay của SliverMultiBoxAdaptorElement đang điều phối hậu trường đó!

5. Thử nghiệm và Nên dùng cho case nào?

Anh Creyt đã từng 'ngây thơ' dùng Column bọc trong SingleChildScrollView để hiển thị một danh sách 500 item. Kết quả? App crash ngay lập tức vì quá tải bộ nhớ và CPU. Đó là bài học xương máu về việc phải dùng builder cho các danh sách động và lớn.

Nên dùng SliverMultiBoxAdaptorElement (thông qua ListView.builder, GridView.builder, CustomScrollView với SliverList/SliverGrid):

• Khi mấy đứa có một danh sách lớn hoặc có khả năng lớn vô hạn (ví dụ: feed mạng xã hội, danh sách chat, danh sách sản phẩm).
• Khi các item trong danh sách phức tạp và tốn tài nguyên để build (có nhiều widget con, animation, hoặc load ảnh).
• Khi mấy đứa muốn tối ưu hiệu suất và tiết kiệm bộ nhớ cho app.

Tránh dùng:

• Cho các danh sách cực kỳ nhỏ và cố định (ví dụ: 3-5 item). Trong trường hợp này, ListView hoặc Column trong SingleChildScrollView có thể đơn giản hơn và không gây ra vấn đề hiệu suất.

Nhớ nhé, SliverMultiBoxAdaptorElement là người bạn tốt nhất của mấy đứa khi muốn xây dựng một app Flutter mượt mà, chuyên nghiệp. Hiểu được cách nó hoạt động sẽ giúp mấy đứa viết code 'xịn' hơn và tránh được nhiều lỗi hiệu suất đáng tiếc. Keep coding, Gen Z!