Flutter设置TabBar indicator宽度（爆改UnderlineTabIndicator ）

最新推荐文章于 2025-03-09 19:25:30 发布

xudailong_blog

最新推荐文章于 2025-03-09 19:25:30 发布

阅读量1.1w

点赞数 3

分类专栏： Flutter开发文章标签： Flutter tabbar TabBar indicator indicator 宽度 Flutter app

本文链接：https://blog.csdn.net/xudailong_blog/article/details/98965866

版权

本文介绍了如何修改Flutter TabBar的indicator宽度。在默认情况下，indicator宽度是平分每个Tab的，但通过源码探索，我们可以创建自定义的UnderlineTabIndicator并调整其宽度。文章提供了详细的源码修改步骤和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

在默认的TabBar中，indicator的宽度是不可以修改的，每个长度都是平分一个Item的，如下图：

在这里插入图片描述

这个是未修改的图，下面是修改的图，总的宽度为20

在这里插入图片描述

总的在源码里翻来翻去，发现并没有可以设置Indicator的字段，这时候，尝试着通过源码来修改indicator的宽度，同时也是借助了这篇文章，不过，给的有些随意，故在这记录之。

源码探索：

点进TabBar的源码

  const TabBar({
   
    Key key,
    @required this.tabs,
    this.controller,
    this.isScrollable = false,
    this.indicatorColor,
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,  //这是我们要修改的indicator
    this.indicatorSize,
    this.labelColor,
    this.labelStyle,
    this.labelPadding,
    this.unselectedLabelColor,
    this.unselectedLabelStyle,
    this.dragStartBehavior = DragStartBehavior.start,
    this.onTap,
  }) : assert(tabs != null),
       assert(isScrollable != null),
       assert(dragStartBehavior != null),
       assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
       assert(indicator != null || (indicatorPadding != null)),

最低0.47元/天解锁文章