Flutter Web自定义TabBar实现思路咨询及样式名称确认

这种TabBar样式通常被称为动态下划线标签栏（Animated Underline TabBar），核心特点是选中标签时，下划线会平滑滑动到对应标签下方，同时可伴随标签文字的样式（颜色、字号等）动态变化。

1. 基础TabBar结构搭建 #

用Flutter原生TabBar组件配合TabController管理标签切换状态，Web环境下默认无需额外配置即可兼容。

示例基础代码：

TabController? _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}

@override
void dispose() {
  _tabController?.dispose();
  super.dispose();
}

// 构建TabBar
TabBar(
  controller: _tabController,
  tabs: const [
    Tab(text: "首页"),
    Tab(text: "发现"),
    Tab(text: "我的"),
  ],
)

2. 自定义滑动下划线指示器 #

通过重写Decoration和BoxPainter，监听TabController的动画值变化，动态计算下划线的位置与宽度，实现平滑滑动效果。

示例自定义指示器代码：

class AnimatedUnderlineIndicator extends Decoration {
  final double thickness;
  final Color color;

  const AnimatedUnderlineIndicator({
    this.thickness = 2.0,
    this.color = Colors.blue,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _AnimatedUnderlinePainter(this, onChanged);
  }
}

class _AnimatedUnderlinePainter extends BoxPainter {
  final AnimatedUnderlineIndicator decoration;

  _AnimatedUnderlinePainter(this.decoration, VoidCallback? onChanged)
      : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final tabController = DefaultTabController.of(configuration.context);
    if (tabController == null) return;

    final tabWidth = configuration.size!.width;
    final animationValue = tabController.animation!.value;
    final currentIndex = tabController.index;

    // 计算下划线的位置和宽度，实现滑动过渡
    double left = offset.dx + tabWidth * animationValue;
    double width = tabWidth;

    if (animationValue > currentIndex) {
      width = tabWidth * (1 - (animationValue - currentIndex));
      left = offset.dx + tabWidth * currentIndex;
    } else {
      width = tabWidth * (animationValue - currentIndex + 1);
    }

    final rect = Rect.fromLTWH(
      left,
      configuration.size!.height - decoration.thickness,
      width,
      decoration.thickness,
    );
    canvas.drawRect(rect, Paint()..color = decoration.color);
  }
}

在TabBar中使用该指示器：

TabBar(
  controller: _tabController,
  indicator: const AnimatedUnderlineIndicator(),
  tabs: const [
    Tab(text: "首页"),
    Tab(text: "发现"),
    Tab(text: "我的"),
  ],
)

3. 标签文字样式动画 #

通过AnimatedBuilder监听TabController的动画值，动态调整标签文字的颜色、字号、透明度等属性，增强交互反馈。

示例代码：

AnimatedBuilder(
  animation: _tabController!.animation!,
  builder: (context, child) {
    final tabIndex = 0; // 当前标签的索引
    final animationValue = _tabController!.animation!.value;
    final isSelected = animationValue.floor() == tabIndex || animationValue.ceil() == tabIndex;

    return Text(
      "首页",
      style: TextStyle(
        fontSize: isSelected ? 16.0 : 14.0,
        color: isSelected ? Colors.blue : Colors.grey,
        fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
      ),
    );
  },
)

4. Web端适配细节 #

• 当标签数量较多时，设置TabBar的isScrollable: true，避免布局溢出。
• 给Tab添加MouseRegion，设置鼠标悬停样式，提升Web端交互体验：

MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Tab(/* 标签内容 */),
)

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