Flutter技术问题：如何为TabBar实现未选中状态指示器？

要给未选中的Tab加上指示器，默认TabBar无法直接实现，我们可以通过自定义Tab布局、隐藏默认指示器的方式来实现选中/未选中的底部样式区分，下面是最直观的落地方案：

方案：自定义Tab组件，区分选中状态 #

核心思路：隐藏TabBar默认的选中指示器，给每个Tab单独添加底部线条，根据当前选中状态切换样式。

完整代码示例 #

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(
      home: const TabBarDemo(),
    );
  }
}

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

  @override
  State<TabBarDemo> createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            // 隐藏默认选中指示器
            indicator: const BoxDecoration(),
            // 切换Tab时触发状态刷新，让Tab重新判断选中状态
            onTap: (_) => setState(() {}),
            tabs: List.generate(3, (index) {
              final isSelected = DefaultTabController.of(context).index == index;
              return _CustomTab(
                title: "Tab $index",
                isSelected: isSelected,
              );
            }),
          ),
        ),
        body: TabBarView(
          children: List.generate(
            3,
            (index) => Center(child: Text("页面 $index")),
          ),
        ),
      ),
    );
  }
}

// 自定义Tab组件，包含标题和底部指示器
class _CustomTab extends StatelessWidget {
  final String title;
  final bool isSelected;

  const _CustomTab({
    required this.title,
    required this.isSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 12),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            title,
            style: TextStyle(
              color: isSelected ? Colors.blue : Colors.grey,
              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
            ),
          ),
          const SizedBox(height: 8),
          Container(
            height: 2,
            width: 24,
            // 选中用高亮色，未选中用浅灰色
            color: isSelected ? Colors.blue : Colors.grey.shade300,
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• 隐藏默认指示器：通过indicator: const BoxDecoration()清空默认的选中指示器样式
• 状态同步：Tab切换时调用setState，确保每个Tab能实时获取当前选中状态
• 样式扩展：可以根据需求自由调整指示器的高度、宽度、颜色，甚至改成圆角、渐变等复杂效果

内容的提问来源于stack exchange，提问作者Flutter kyoto