Flutter TabBar自定义标签宽度：如何缩小图标标签宽度？

默认情况下，Flutter的TabBar会强制所有标签均分宽度，因此直接用Container包裹Tab组件无法改变标签宽度。要实现图标标签宽度小于文本标签的需求，可通过以下方式解决：

核心方案：开启TabBar可滚动模式 #

设置isScrollable: true，让TabBar放弃均分宽度的逻辑，标签宽度由子容器的宽度决定。修改后的代码如下：

return TabBar(
  labelColor: Colors.black,
  unselectedLabelColor: Colors.blue,
  indicatorColor: Colors.blue,
  indicatorSize: TabBarIndicatorSize.label,
  isScrollable: true, // 关键配置：取消宽度均分
  tabs: [
    Container(
      color: Colors.purple,
      width: widthScreen * .10,
      alignment: Alignment.center,
      child: Icon(
        CustomIcons.arrow_back,
        size: 30,
      ),
    ),
    Container(
      color: Colors.amber,
      width: widthScreen * .40,
      alignment: Alignment.center,
      child: Text('TEST 1'),
    ),
    Container(
      color: Colors.red,
      width: widthScreen * .40,
      alignment: Alignment.center,
      child: Text('TEST 2'),
    ),
  ],
);

关键说明 #

• 开启isScrollable: true后，TabBar不再强制拉伸所有标签，子容器的宽度设置会生效
• 移除了原代码中的Tab组件，直接用Container包裹图标和文本，减少不必要的层级
• 调整文本标签的宽度比例为各占屏幕40%，避免总宽度超出屏幕范围
• 添加alignment: Alignment.center确保标签内容居中显示

如果需要标签固定在一行不可滚动，可通过自定义TabBar的布局逻辑实现，但复杂度较高。对于大多数场景，开启可滚动模式是最简洁的解决方案。

内容的提问来源于stack exchange，提问作者Lucas Barreto Luz