Flutter TabBar项无法填充剩余空间，指示器仅包裹文本求助

你的问题出在两个点：一是给Tab套Expanded完全无效，TabBar的tabs容器不支持这种嵌套；二是默认的指示器尺寸跟随文本内容，没有设置为填充整个Tab宽度。

修改方案 #

1. 删除Tab外层的Expanded组件
2. 在TabBar中添加indicatorSize: TabBarIndicatorSize.tab属性，让指示器填充整个Tab宽度
3. 保留tabAlignment: TabAlignment.fill，确保Tab项占满TabBar的可用空间

修改后的完整代码 #

Container(
  height: 45,
  decoration: BoxDecoration(
    color: Theme.of(context).primaryColor,
    borderRadius: BorderRadius.circular(8),
  ),
  child: TabBar(
    indicator: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.lightBlueAccent,
    ),
    dividerColor: Colors.transparent,
    tabAlignment: TabAlignment.fill,
    // 添加此行，让指示器匹配Tab整体尺寸
    indicatorSize: TabBarIndicatorSize.tab,
    labelColor: Colors.white,
    unselectedLabelColor: Colors.white,
    controller: tabController,
    tabs: const [
      Tab(text: 'Upload Video Url'),
      Tab(text: 'Upload File'),
    ],
  ),
)

原理说明 #

• indicatorSize: TabBarIndicatorSize.tab会强制指示器尺寸与Tab项完全一致，替代默认的跟随文本标签大小的行为
• tabAlignment: TabAlignment.fill让所有Tab项平均分配TabBar的宽度，填满整个容器空间

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