Flutter中如何去除TabBar标签之间的多余空白间距

核心原因 #

你设置各类padding参数不生效，主要是两个默认规则导致：

• Material 3设计规范下，Tab组件默认存在最小宽度限制，优先级高于自定义padding参数
• TabBar默认isScrollable为false时，会自动将所有Tab宽度均匀分配撑满父容器，额外产生空白间距

修复方案 #

方案1：Tab宽度自适应内容（无需平分父容器） #

直接给TabBar添加isScrollable: true属性，同时覆盖TabBarTheme取消最小宽度限制即可：

Widget build(BuildContext context) {
  return Container(
    height: height,
    color: Colors.white,
    child: Theme(
      data: Theme.of(context).copyWith(
        // 覆盖Tab默认配置
        tabBarTheme: const TabBarTheme(
          // Material3 配置：让Tab宽度自适应内容
          tabSize: TabBarTabSize.min,
          // 按需调整Tab内部左右边距
          labelPadding: EdgeInsets.symmetric(horizontal: 8),
          // 如果是Material2项目，替换为下面的配置即可
          // minWidth: 40,
          // labelPadding: EdgeInsets.symmetric(horizontal: 8),
        ),
      ),
      child: TabBar(
        // 新增：让Tab宽度自适应内容，不强制平分父容器
        isScrollable: true,
        indicatorColor: Colors.black,
        unselectedLabelColor: Colors.black54,
        indicatorSize: TabBarIndicatorSize.label,
        labelColor: Colors.black,
        padding: EdgeInsets.zero,
        indicatorPadding: EdgeInsets.zero,
        labelStyle: const TextStyle(
          fontSize: 12,
        ),
        tabs: [
          const Tab(
            icon: Icon(Icons.home_rounded),
            text: "Home",
            iconMargin: EdgeInsets.zero,
          ),
          const Tab(
            icon: Icon(Icons.groups_rounded),
            iconMargin: EdgeInsets.zero,
            text: "My Network",
          ),
          const Tab(
            iconMargin: EdgeInsets.zero,
            icon: Icon(Icons.work_rounded),
            text: "Jobs",
          ),
          const Tab(
            iconMargin: EdgeInsets.zero,
            icon: Icon(Icons.message_rounded),
            text: "Messaging",
          ),
          const Tab(
            iconMargin: EdgeInsets.zero,
            icon: Icon(Icons.notifications_rounded),
            text: "Notification",
          ),
        ],
      ),
    ),
  );
}

方案2：Tab平分父容器宽度（无需滚动） #

如果你希望所有Tab均匀占满父容器宽度，只需保留isScrollable: false的默认值，仅按上面的方法修改TabBarTheme调整最小宽度和内边距即可。

问题原效果示意图：

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