Flutter Tabbar容器尺寸不生效及底部白色下划线问题求助

我尝试创建一个包含3个Tab的TabBar，但实现结果不符合预期：设置的Tab容器尺寸未生效，同时Tab下方出现了白色下划线。相关代码、当前效果及预期效果如下：

原代码 #

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[100],
        child: Column(
          children: [
            Expanded(
              child: DefaultTabController(
                length: 3,
                child: Column(
                  children: [
                    Material(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 18.0, right: 18),
                        child: Container(
                          height: 45,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              border: Border.all(
                                color: const Color.fromARGB(255, 225, 220, 220),
                              ),
                              color: const Color.fromARGB(255, 225, 222, 222)),
                          child: TabBar(
                            physics: const ClampingScrollPhysics(),
                            padding: const EdgeInsets.all(10),
                            indicatorSize: TabBarIndicatorSize.label,
                            indicator: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              color: Colors.white,
                            ),
                            tabs: [
                              Container(
                                height: 42,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    "11月分",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                              Container(
                                height: 42,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    "12月分",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                              Container(
                                height: 42,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    "1月分",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        children: [
                          Center(child: Text("chat")),
                          Center(child: Text("messages")),
                          Center(child: Text("request")),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

当前效果 #

预期效果 #

问题分析及修复方案 #

1. 底部白色下划线问题

TabBar默认自带底部指示器，即使自定义了indicator，默认下划线仍会显示。添加两个属性即可彻底移除：

• indicatorWeight: 0：将默认指示器高度设为0
• dividerColor: Colors.transparent：隐藏TabBar底部的分割线

2. Tab容器尺寸不生效问题

原代码中TabBar设置了padding: EdgeInsets.all(10)，会压缩Tab的可用空间，导致自定义Container尺寸失效；同时indicatorSize: TabBarIndicatorSize.label会让指示器仅适配文字宽度，不符合预期的胶囊样式。

修复步骤：

• 移除TabBar的padding属性，释放Tab空间
• 将indicatorSize改为TabBarIndicatorSize.tab，让指示器占满整个Tab宽度
• 简化Tab结构：去掉每个Tab里的Container和Align，TabBar会自动处理文字居中，通过labelStyle和unselectedLabelStyle统一控制文字样式，减少冗余代码

修复后的完整代码 #

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[100],
        child: Column(
          children: [
            Expanded(
              child: DefaultTabController(
                length: 3,
                child: Column(
                  children: [
                    Material(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 18.0, right: 18),
                        child: Container(
                          height: 45,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              border: Border.all(
                                color: const Color.fromARGB(255, 225, 220, 220),
                              ),
                              color: const Color.fromARGB(255, 225, 222, 222)),
                          child: TabBar(
                            physics: const ClampingScrollPhysics(),
                            indicatorSize: TabBarIndicatorSize.tab,
                            indicatorWeight: 0,
                            dividerColor: Colors.transparent,
                            indicator: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              color: Colors.white,
                            ),
                            labelStyle: const TextStyle(color: Colors.black),
                            unselectedLabelStyle: const TextStyle(color: Colors.black),
                            tabs: const [
                              Text("11月份"),
                              Text("12月份"),
                              Text("1月份"),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        children: [
                          Center(child: Text("chat")),
                          Center(child: Text("messages")),
                          Center(child: Text("request")),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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