无需自定义TabBar，如何为未选中Tab设置指示器颜色？

首先你的代码存在语法错误：在paint方法的最后一行canvas.drawRect(orangeRect, paint));多了一个右括号，这会直接导致编译失败，先把这个错误修正。

其次，你的实现逻辑本身是可行的——通过先绘制所有Tab的灰色指示器，再在选中位置覆盖橙色指示器，不需要自定义TabBar，用原生TabBar配合正确的自定义Decoration就能实现需求。但当前代码的偏移计算可能存在问题，导致指示器位置不对，以下是修正后的完整代码：

indicator: CustomTabIndicator(
  height: 4,
  width: MediaQuery.of(context).size.width / 2.9,
  selectedIndex: _selectedIndex,
),

class CustomTabIndicator extends Decoration {
  final double height;
  final double width;
  final int selectedIndex;

  const CustomTabIndicator({
    this.height = 4,
    this.width = 30,
    required this.selectedIndex,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomTabIndicatorPainter(
      height: height,
      width: width,
      selectedIndex: selectedIndex,
    );
  }
}

class _CustomTabIndicatorPainter extends BoxPainter {
  final double height;
  final double width;
  final int selectedIndex;

  _CustomTabIndicatorPainter({
    required this.height,
    required this.width,
    required this.selectedIndex,
  });

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Paint paint = Paint();
    final double tabWidth = configuration.size!.width;
    // 绘制未选中的灰色指示器
    paint.color = Colors.grey.withOpacity(0.5);
    for (int i = 0; i < 2; i++) {
      // 修正偏移计算，确保指示器居中于Tab
      final double indicatorX = offset.dx + (tabWidth * i) + (tabWidth - width) / 2;
      final Rect greyRect = Offset(indicatorX, configuration.size!.height - height - 8) & Size(width, height);
      canvas.drawRect(greyRect, paint);
    }

    // 绘制选中的橙色指示器
    paint.color = Colors.orange;
    final double selectedIndicatorX = offset.dx + (tabWidth * selectedIndex) + (tabWidth - width) / 2;
    final Rect orangeRect = Offset(selectedIndicatorX, configuration.size!.height - height - 8) & Size(width, height);
    canvas.drawRect(orangeRect, paint);
  }
}

关键修正点： #

• 移除了多余的右括号，修复语法错误
• 调整了指示器的X轴偏移计算，使用(tabWidth - width) / 2让指示器在Tab内水平居中，避免位置偏移
• 确保_selectedIndex能正确同步Tab的选中状态（需要在TabBar的onTap回调中更新_selectedIndex的值）

另外要注意：TabBarView仅负责切换展示对应的页面内容，指示器是TabBar的属性，所以你的需求完全可以通过原生TabBar配合自定义indicator实现，不需要自定义整个TabBar。

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