Flutter TabBar 去除左侧边距，去除底部黑线

image.png

Flutter TabBar 在设置【isScrollable: true】后存在左侧边距和底部黑线

TabBar(
        tabs: [
          Text("第一个"),
          Text("第2个"),
          Text("第一个"),
          Text("第一个"),
          Text("第一个"),
          Text("第一个"),
          Text("第一个"),
        ],
        controller: _tabController,
        isScrollable: true,
      )

去除方法

dividerHeight: 0,
tabAlignment: TabAlignment.start,

例子代码👇

TabBar(
        dividerHeight: 0,
        tabAlignment: TabAlignment.start,
        tabs: [
          Text("第一个"),
          Text("第2个"),
          Text("第一个"),
          Text("第一个"),
          Text("第一个"),
          Text("第一个"),
          Text("第一个"),
        ],
        controller: _tabController,
        isScrollable: true,
      )

问题原因

image.png

左侧边距问题

TabBar源码中 如果 tabAlignment 不设置，默认是TabAlignment.startOffset，会使用【const double _kStartOffset = 52.0;】设置左侧偏移量52。导致左侧存在很大边距

底侧黑线问题

dividerHeight 和 dividerColor 可以设置线的高度和颜色，高度改成0 或者 将颜色改成透明即可

END