AppBar — nó là gì, cấu hình và widget Flutter

AppBar trong Flutter là gì

AppBar là thành phần bảng điều khiển phía trên Material tiêu chuẩn xuất hiện ở đầu Scaffold. Nó chứa tiêu đề màn hình, nút điều hướng (thường là biểu tượng “bánh hamburger” hoặc mũi tên “Quay lại”) và các hành động — biểu tượng mở tìm kiếm, cài đặt hoặc các chức năng khác. AppBar tự động thích ứng với nền tảng: trên Android sử dụng bóng đổ Material tiêu chuẩn ở dưới, trên iOS — thiết kế phẳng hơn với độ trong suốt.

AppBar triển khai giao diện PreferredSizeWidget, nghĩa là chiều cao của nó được cố định và biết trước khi xây dựng. Theo mặc định, chiều cao AppBar là 56dp trên Android và 44dp trên iOS ở hướng dọc, có tính đến SafeArea ở phía trên. Tính năng này cho phép Scaffold tính toán trước không gian khả dụng cho body, tránh việc tái tổ hợp trong quá trình kết xuất.

Theo Flutter Material Library Guide (2026), AppBar đã trải qua nhiều lần lặp: trong Flutter 1.x, nó là một container đơn giản với văn bản, trong Flutter 2.x, nó đã có hỗ trợ Material 3 và flexibleSpace, và trong Flutter 3.x — tích hợp với System UI (màu thanh trạng thái, độ trong suốt). AppBar hiện đại hỗ trợ Dynamic Color từ Material You trên các thiết bị Android 12+.

Cấu trúc AppBar: thuộc tính và tham số

AppBar cung cấp một tập hợp các tham số điều khiển từng phần của bảng điều khiển phía trên. Hiểu được các thuộc tính này cho phép tùy chỉnh bảng một cách linh hoạt cho mọi yêu cầu thiết kế mà không cần tạo các giải pháp tùy chỉnh.

Title và leading: cấu hình tiêu đề và điều hướng

Thuộc tính title chấp nhận bất kỳ widget nào, nhưng phổ biến nhất là sử dụng Text với cấu hình kiểu qua TextStyle. Đối với tiêu đề dài, nên bọc title trong Flexible để văn bản được cắt chính xác khi thiếu không gian. Thuộc tính leading tự động được thay thế bằng BackButton khi điều hướng đến màn hình lồng nhau qua Navigator.push, nếu không được đặt rõ ràng.

Actions: đặt biểu tượng hành động

Danh sách actions chứa các widget được căn về mép phải của AppBar. Mỗi phần tử không được rộng hơn 48dp (tiêu chuẩn Material Design). Để nhóm các hành động, hãy sử dụng PopupMenuButton — thao tác này ẩn các tùy chọn ít quan trọng hơn trong trình đơn thả xuống và tuân thủ các khuyến nghị của Material về mật độ giao diện.

Tùy chỉnh AppBar: kiểu, màu sắc và hành vi

AppBar hỗ trợ tùy chỉnh sâu thông qua các thuộc tính màu sắc, bóng đổ và khoảng đệm. Kiểu dáng cơ bản được kế thừa từ chủ đề ứng dụng, nhưng mỗi thuộc tính có thể được ghi đè riêng lẻ. Hãy xem xét các kịch bản cấu hình chính.

Màu nền của AppBar được đặt qua backgroundColor. Nếu không được chỉ định, appBarTheme từ ThemeData sẽ được sử dụng. Trong Material 3, màu AppBar tự động được tính từ ColorScheme.primary, nhưng có thể được ghi đè cho một màn hình cụ thể. Đối với AppBar trong suốt (thường được sử dụng trong hồ sơ), hãy đặt backgroundColor: Colors.transparent với elevation: 0.

Thuộc tính elevation điều khiển bóng đổ dưới AppBar. Giá trị 0 loại bỏ bóng đổ, tạo hiệu ứng bảng “phẳng”, phù hợp với Material 3. Giá trị 4 tạo bóng đổ Material Design tiêu chuẩn. Để điều khiển bóng đổ tùy chỉnh, hãy sử dụng shadowColor — màu bóng giúp phân cách trực quan bảng điều khiển khỏi nội dung.

Để điều khiển màu văn bản trong AppBar, hãy sử dụng foregroundColor. Thuộc tính này ảnh hưởng đến màu của tiêu đề, biểu tượng và văn bản trong actions. Khi thay đổi backgroundColor, foregroundColor tương phản sẽ tự động được chọn, nhưng có thể được ép buộc cho các thiết kế không tiêu chuẩn.

SliverAppBar: phiên bản hoạt ảnh của AppBar

SliverAppBar là phần mở rộng của AppBar để sử dụng trong CustomScrollView, hỗ trợ hoạt ảnh khi cuộn: thu gọn, hiệu ứng thị sai và ghim. Không giống như AppBar tiêu chuẩn, SliverAppBar là widget sliver và có thể thay đổi kích thước một cách động tùy theo vị trí cuộn.

Các chế độ chính của SliverAppBar được xác định bởi sự kết hợp của các thuộc tính pinned, floating và snap. Ở chế độ pinned, bảng luôn hiển thị ở đầu màn hình. Ở chế độ floating, nó xuất hiện khi cuộn ngược lại. Sự kết hợp floating + snap tạo ra hành vi bảng “dính” xuất hiện khi cuộn lên dù chỉ một chút, thường được sử dụng trong bảng tin tức.

Theo Flutter API SliverAppBar (2026), để sử dụng SliverAppBar, cần thay thế ListView hoặc Column thông thường bằng CustomScrollView chứa các widget sliver. Scaffold vẫn hoạt động chính xác, nhưng thuộc tính appBar của Scaffold phải là null — SliverAppBar được đặt trong CustomScrollView như sliver đầu tiên.

Ví dụ cấu hình AppBar trong ứng dụng

Hãy xem một ví dụ về AppBar với tìm kiếm, trình đơn thả xuống và TabBar. Đoạn mã này minh họa một cấu hình bảng điều khiển phía trên điển hình trong ứng dụng Flutter sản xuất.

Scaffold(
  appBar: AppBar(
    title: const Text('Danh mục'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Cài đặt')),
          const PopupMenuItem(value: 'about', child: Text('Giới thiệu Ứng dụng')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Trong ví dụ, AppBar chứa tiêu đề được căn giữa, nút mở Drawer ở bên trái, biểu tượng tìm kiếm và trình đơn thả xuống ở bên phải. TabBar ở phía dưới cho phép chuyển đổi giữa các danh mục sản phẩm. Cấu hình này bao phủ hầu hết các kịch bản ứng dụng di động: điều hướng, tìm kiếm, tùy chọn bổ sung và chuyển đổi phần — tất cả trong một bảng điều khiển phía trên duy nhất.