Flutter TabBar底部下划线无法移除，求有效解决方案

我在使用Flutter的TabBar组件时，发现底部出现了下划线，尝试多种方法都无法移除。截图如下：

当前使用的build方法代码：

Widget build(BuildContext context) {
    TabController tabController = TabController(length: 2, vsync: this);
  return Scaffold(
      backgroundColor: Palette.white,
      body:  Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: BoxDecoration(color: const Color(0x1E767680), borderRadius: BorderRadius.circular(7)),
              height: 36,
              child: TabBar(
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorPadding: const EdgeInsets.all(2),
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(7),
                  color: Colors.deepPurple,
                ),
                controller: tabController,
                labelStyle: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w500),
                unselectedLabelStyle: const TextStyle(color: Color(0xFF5B5B5B), fontSize: 13, fontWeight: FontWeight.w400),
                indicatorWeight: 0,
                indicatorColor: Colors.transparent,
                tabs: const [
                  Tab(text: 'Page 1'),
                  Tab(text: 'Page 2'),
                ],
              ),
            ),

            const SizedBox(height: 16),
            //TabBarView
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  _buildAttendanceView(),
                  Tab2(),
                ],
              ),
            )
          ],
        ), );
}

已尝试但无效的方法：

• 添加border: Border.all(color: Colors.transparent)移除可见边框
• 设置indicatorWeight: 0
• 设置indicatorColor: Colors.transparent
• 将TabBar包裹在Material组件内并设置borderOnForeground: false

有效解决方法 #

你遇到的下划线是TabBar默认的分割线（divider），并非指示器边框，所以之前的方法没命中关键点。只需在TabBar中添加dividerColor: Colors.transparent即可彻底移除这条线。

修改后的TabBar代码片段：

TabBar(
  indicatorSize: TabBarIndicatorSize.tab,
  indicatorPadding: const EdgeInsets.all(2),
  indicator: BoxDecoration(
    borderRadius: BorderRadius.circular(7),
    color: Colors.deepPurple,
  ),
  controller: tabController,
  labelStyle: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w500),
  unselectedLabelStyle: const TextStyle(color: Color(0xFF5B5B5B), fontSize: 13, fontWeight: FontWeight.w400),
  indicatorWeight: 0,
  indicatorColor: Colors.transparent,
  // 新增此行解决问题
  dividerColor: Colors.transparent,
  tabs: const [
    Tab(text: 'Page 1'),
    Tab(text: 'Page 2'),
  ],
)

如果需要全局统一配置（适用于Flutter 3.10+版本），可以通过TabBarTheme设置：

MaterialApp(
  theme: ThemeData(
    tabBarTheme: const TabBarTheme(
      dividerColor: Colors.transparent,
    ),
  ),
  home: YourHomePage(),
)

内容的提问来源于stack exchange，提问作者Star Shadow