Flutter中移除DefaultTabController两侧空白区域的方法

你遇到的TabBar左右白色背景问题，根源在于包裹TabBar的Material组件默认使用白色背景，而外层Container设置了水平margin，导致Material的背景区域暴露出来。可以通过以下两种方式解决：

方法一：给Material设置匹配的背景色 #

直接为Material组件添加color属性，将其设置为与AppBar一致的背景色（或你需要的深色）：

bottom: PreferredSize(
  preferredSize: _tabBar.preferredSize,
  child: Material(
    color: Theme.of(context).backgroundColor, // 添加该行，统一背景色
    borderRadius: BorderRadius.circular(10.w),
    child: Container(
      child: _tabBar,
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          color: lightYellowColor,
          borderRadius: BorderRadius.circular(10.w)),
      margin: EdgeInsets.symmetric(horizontal: 24.w),
    ),
  ),
),

方法二：移除多余的Material组件 #

如果你的Container已经通过BoxDecoration实现了圆角和背景色，完全可以去掉外层的Material组件，消除额外的白色背景：

bottom: PreferredSize(
  preferredSize: _tabBar.preferredSize,
  child: Container( // 直接用Container包裹TabBar
    child: _tabBar,
    decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: lightYellowColor,
        borderRadius: BorderRadius.circular(10.w)),
    margin: EdgeInsets.symmetric(horizontal: 24.w),
  ),
),

你的TabBar本身已经设置了padding: EdgeInsets.zero，这部分配置没有问题，核心问题就出在外层的Material组件上。

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