如何移除或修复Expanded包裹DefaultTabController与TabBarView产生的多余空间？

1. 修正布局结构（核心解决方法） #

你之前可能错误地给DefaultTabController也包裹了Expanded，这会导致布局额外拉伸。正确的做法是：用Column包裹TabBarView和TabBar，只给TabBarView套Expanded，让它占据除TabBar固定高度外的剩余空间，TabBar直接放在Column的底部即可。

示例代码：

DefaultTabController(
  length: 2, // 你的Tab数量
  child: Column(
    children: [
      // 只给TabBarView套Expanded，让它占满剩余屏幕空间
      Expanded(
        child: TabBarView(
          children: [
            // 你的第一个页面内容
            Container(color: Colors.red),
            // 你的第二个页面内容
            Container(color: Colors.blue),
          ],
        ),
      ),
      // TabBar直接放在下方，无需Expanded，它有固定高度
      TabBar(
        tabs: const [
          Tab(text: "标签1"),
          Tab(text: "标签2"),
        ],
      ),
    ],
  ),
)

2. 清除TabBar的默认间距 #

如果调整布局后仍有空白，检查TabBar的默认内边距或外边距：

• 给TabBar设置padding: EdgeInsets.zero，清除默认的顶部/底部内边距
• 若使用了自定义指示器，确保指示器的height或padding没有额外占用空间

示例：

TabBar(
  padding: EdgeInsets.zero,
  indicatorPadding: EdgeInsets.zero,
  tabs: const [/* 你的Tab项 */],
)

3. 排查子页面的额外空间 #

检查TabBarView的子页面是否有默认的padding（比如使用Scaffold时，body会自动添加SafeArea的padding），如果是子页面顶部的空白导致视觉上TabBarView和TabBar之间有空隙，可以给子页面的Scaffold设置resizeToAvoidBottomInset: false或手动移除不必要的padding。

4. 用DevTool精准定位空白来源 #

打开Flutter DevTool的Layout Inspector，点击TabBar和TabBarView之间的空白区域，查看对应的Widget层级，确认是哪个组件（比如Padding、SizedBox、Theme配置）导致的额外空间，直接针对该组件调整即可。

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