如何移除Flutter中isScrollable为true时TabBar左侧内边距

当isScrollable: true时，TabBar左侧出现的空白是组件默认添加的水平内边距，常规的labelPadding无法修改这个内边距，你可以通过以下方法解决：

方法一：直接设置TabBar的padding为零 #

修改代码，给TabBar添加padding: EdgeInsets.zero属性，覆盖默认内边距：

TabBar(
  controller: _tabController,
  isScrollable: true,
  padding: EdgeInsets.zero, // 消除左侧空白的关键
  tabs: [
    const Tab(text: 'Info'),
    const Tab(text: 'Products'),
    const Tab(text: 'Browse'),
    const Tab(text: 'Queries'),
    const Tab(text: 'Activities'),
    const Tab(text: 'Staffs'),
  ],
)

方法二：配合tabAlignment（Flutter 3.3+） #

如果你的Flutter版本在3.3及以上，可以同时设置tabAlignment: TabAlignment.start，确保Tab从最左侧开始排列，避免额外的偏移：

TabBar(
  controller: _tabController,
  isScrollable: true,
  tabAlignment: TabAlignment.start,
  padding: EdgeInsets.zero,
  tabs: [
    const Tab(text: 'Info'),
    const Tab(text: 'Products'),
    const Tab(text: 'Browse'),
    const Tab(text: 'Queries'),
    const Tab(text: 'Activities'),
    const Tab(text: 'Staffs'),
  ],
)

原因说明 #

当isScrollable开启时，TabBar会遵循Material设计规范，默认添加水平内边距，这个内边距不属于标签内部的间距（由labelPadding控制），因此需要直接修改TabBar自身的padding属性来消除。

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