TabBarIndicatorSize: Nâng tầm TabBar Flutter của bạn!

Chào các "coder nhí" của Creyt! Hôm nay chúng ta sẽ "mổ xẻ" một chi tiết nhỏ nhưng có võ trong thế giới Flutter UI: TabBarIndicatorSize. Nghe tên thì hơi "academic" nhưng thực ra nó cực kỳ gần gũi và quan trọng để giao diện của bạn trông "có gu" hơn.

TabBarIndicatorSize là cái gì mà nghe "ngầu" vậy?

Để dễ hình dung, các bạn cứ tưởng tượng cái TabBar trong app của mình như một cái bảng điều khiển trên máy bay vậy. Mỗi cái nút trên bảng là một Tab (ví dụ: Trang chủ, Cài đặt, Profile). Khi bạn chọn một nút, sẽ có một cái đèn báo hiệu "Mày đang ở đây này!". Cái đèn báo hiệu đó chính là cái Indicator.

Vậy TabBarIndicatorSize chính là cái công tắc chỉnh kích thước cho cái đèn báo hiệu đó! Nó giúp bạn quyết định xem cái đèn đó sẽ to bằng cả cái nút (tab) hay chỉ bé tí xíu bằng đúng cái chữ (label) trên nút thôi. Đơn giản vậy thôi đó!

Nó dùng để làm gì? Đơn giản là để giao diện của bạn đẹp hơn, trực quan hơn và "ăn khớp" hơn với thiết kế tổng thể. Một chi tiết nhỏ nhưng lại quyết định cái "vibe" của cả cái app đó!

Flutter cung cấp cho chúng ta 3 giá trị chính để chơi với TabBarIndicatorSize:

• TabBarIndicatorSize.tab: Indicator sẽ có chiều rộng bằng toàn bộ chiều rộng của Tab.
• TabBarIndicatorSize.label: Indicator sẽ có chiều rộng bằng chiều rộng của nội dung (label) bên trong Tab.
• TabBarIndicatorSize.automatic: Thường thì nó sẽ hoạt động giống tab, tùy thuộc vào cách Flutter tính toán.

Code Ví Dụ Minh Họa: "Thấy tận mắt, sờ tận tay"

Giờ thì chúng ta cùng nhau "thực chiến" để xem nó hoạt động như thế nào nhé. Creyt sẽ tạo một ứng dụng Flutter đơn giản với TabBar và thử nghiệm các loại TabBarIndicatorSize khác nhau.

import 'package:flutter/material.h';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabBarIndicatorSize Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const TabBarIndicatorSizeScreen(),
    );
  }
}

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

  @override
  State<TabBarIndicatorSizeScreen> createState() => _TabBarIndicatorSizeScreenState();
}

class _TabBarIndicatorSizeScreenState extends State<TabBarIndicatorSizeScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Creyt dạy TabBarIndicatorSize'),
        elevation: 0,
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(icon: Icon(Icons.home), text: 'Trang Chủ'),
            Tab(icon: Icon(Icons.settings), text: 'Cài Đặt'),
            Tab(icon: Icon(Icons.person), text: 'Profile'),
          ],
          indicatorColor: Colors.deepOrange, // Màu của indicator
          indicatorWeight: 4.0, // Độ dày của indicator
          labelColor: Colors.deepOrange, // Màu chữ khi tab được chọn
          unselectedLabelColor: Colors.grey, // Màu chữ khi tab không được chọn
          // Đây là chỗ chúng ta chơi với TabBarIndicatorSize!
          indicatorSize: TabBarIndicatorSize.label, // <= THAY ĐỔI Ở ĐÂY: .tab hoặc .label
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(child: Text('Nội dung Tab Trang Chủ', style: TextStyle(fontSize: 24, color: Colors.deepOrange))),
          Center(child: Text('Nội dung Tab Cài Đặt', style: TextStyle(fontSize: 24, color: Colors.deepOrange))),
          Center(child: Text('Nội dung Tab Profile', style: TextStyle(fontSize: 24, color: Colors.deepOrange))),
        ],
      ),
    );
  }
}

Giải thích code:

Gợi Ý Đọc Tiếp

Stepper Flutter: Thầy Creyt giải mã hành trình từng bước cho Gen Z

1 Lượt xem

• Chúng ta tạo một DefaultTabController (hoặc TabController như trong ví dụ) để quản lý các tab.
• Trong TabBar, tabs là danh sách các Tab của chúng ta.
• indicatorColor và indicatorWeight giúp chúng ta tô màu và chỉnh độ dày cho cái "đèn báo" để dễ nhìn hơn.
• Và quan trọng nhất, dòng indicatorSize: TabBarIndicatorSize.label, chính là nơi bạn "xoay chuyển tình thế". Hãy thử đổi TabBarIndicatorSize.label thành TabBarIndicatorSize.tab và chạy lại app để xem sự khác biệt nhé!

Mẹo hay từ Creyt (Best Practices) để "chiến" với TabBarIndicatorSize

1. "Nhất quán là sức mạnh": Đừng hôm nay dùng label, mai lại dùng tab trong cùng một app. Hãy chọn một phong cách và đi theo nó xuyên suốt để UI của bạn trông chuyên nghiệp và dễ hiểu.
2. "Đọc được là thắng": Dù bạn chọn kích thước nào, hãy đảm bảo rằng indicator không che mất nội dung của tab hoặc gây khó chịu khi nhìn. Đôi khi, một indicator quá to lại làm rối mắt.
3. "Hiểu ngữ cảnh": Nếu các tab của bạn chủ yếu là icon hoặc các text ngắn, có độ dài tương đương nhau, TabBarIndicatorSize.tab thường là lựa chọn an toàn, tạo cảm giác liền mạch.
4. "Tinh tế với label": Nếu các tab của bạn có text dài ngắn khác nhau và bạn muốn indicator "ôm" sát lấy chữ, TabBarIndicatorSize.label sẽ giúp UI trông gọn gàng và tinh tế hơn. Nhưng hãy cẩn thận, nếu text quá ngắn, indicator cũng sẽ rất ngắn, có thể khó nhìn.
5. "Kết hợp thần công": Đừng quên kết hợp indicatorSize với indicatorColor và indicatorWeight. Giống như bạn mặc một bộ đồ đẹp, phải có phụ kiện đi kèm mới "chuẩn bài"!

Ứng dụng thực tế: "Ai đã dùng rồi?"

Các bạn có để ý không, rất nhiều ứng dụng "khủng" mà chúng ta dùng hàng ngày đều sử dụng TabBar và tùy chỉnh indicator của nó:

• TikTok / Instagram: Các tab điều hướng chính (Home, Explore, Reels, Profile) ở dưới đáy thường sử dụng indicator rất tinh tế, đôi khi là label hoặc một biến thể tab được tùy chỉnh sâu để tạo điểm nhấn cho tab hiện tại.
• Shopee / Lazada: Trong các trang danh mục sản phẩm hoặc quản lý đơn hàng, các tab "Đang giao", "Đã giao", "Hủy"... thường có indicator giúp người dùng dễ dàng theo dõi trạng thái.
• Google Play Store / App Store: Các tab phân loại ứng dụng (Games, Apps, Books) cũng có indicator để chỉ ra phần đang được xem.

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

Creyt luôn khuyến khích các bạn "vọc vạch" và tự mình thử nghiệm. Đừng ngại thay đổi các giá trị trong code và chạy thử trên emulator hoặc điện thoại thật. Chỉ khi tự mình trải nghiệm, các bạn mới thực sự hiểu được sự khác biệt và tìm ra cái nào phù hợp nhất với thiết kế của mình.

• Nên dùng TabBarIndicatorSize.tab khi:

  • Các tab của bạn chủ yếu là icon hoặc text rất ngắn, và bạn muốn một indicator rõ ràng, chiếm trọn không gian của tab.
  • Bạn muốn tạo cảm giác mạnh mẽ, rõ ràng cho từng lựa chọn.
  • Ví dụ: Một thanh điều hướng dưới đáy (BottomNavigationBar) được tùy biến thành TabBar.

• Nên dùng TabBarIndicatorSize.label khi:

  • Các tab của bạn có nội dung text thay đổi về độ dài và bạn muốn indicator chỉ "ôm" lấy phần chữ để tạo sự gọn gàng, tinh tế.
  • Bạn muốn một thiết kế tối giản, hiện đại.
  • Ví dụ: Các tab lọc sản phẩm theo tên (Phổ biến, Mới nhất, Giá tăng dần) trong một ứng dụng mua sắm.

Lời khuyên từ Creyt: Hãy bắt đầu với TabBarIndicatorSize.label nếu bạn muốn sự tinh tế và gọn gàng. Nếu thấy khó nhìn hoặc cần sự rõ ràng hơn, hãy chuyển sang TabBarIndicatorSize.tab. Quan trọng là phải thử nghiệm và phù hợp với tổng thể UI/UX của app bạn!

Vậy đó, TabBarIndicatorSize tuy là một chi tiết nhỏ nhưng lại là "vũ khí bí mật" giúp bạn "đánh bóng" giao diện TabBar của mình lên một tầm cao mới. Hãy áp dụng ngay vào dự án của mình và khoe với Creyt nhé! Happy coding!