I custom indicator for my TabBar that looks like this.

The problem is when I move to another Tab the indicator stays at the same index.

How can I make the bottom indicator move when I select another Tab.

This is my DartPad with the current problem.

DartPad working example

CodePudding user response：

You're almost there! You just need to add the offset to the x coordinate within your painter.

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Path _trianglePath = Path();

    _trianglePath.moveTo(offset.dx   cfg.size!.width / 2 - 10, cfg.size!.height);
    _trianglePath.lineTo(offset.dx   cfg.size!.width / 2   10, cfg.size!.height);
    _trianglePath.lineTo(offset.dx   cfg.size!.width / 2, cfg.size!.height - 10);
    _trianglePath.lineTo(offset.dx   cfg.size!.width / 2 - 10, cfg.size!.height);
    _trianglePath.close();
    canvas.drawPath(_trianglePath, _paint);
  }

CodePudding user response：

Just move your offset from drawpath

class _CirclePainter extends BoxPainter {
  final Paint _paint;

  _CirclePainter(Color color)
      : _paint = Paint()
    ..color = color
    ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Path _trianglePath = Path();

    _trianglePath.moveTo(cfg.size.width / 2 - 10, cfg.size.height);
    _trianglePath.lineTo(cfg.size.width / 2   10, cfg.size.height);
    _trianglePath.lineTo(cfg.size.width / 2, cfg.size.height - 10);
    _trianglePath.lineTo(cfg.size.width / 2 - 10, cfg.size.height);
    _trianglePath.close();
    canvas.drawPath(_trianglePath.shift(offset), _paint);// here need to pass offset

  }
}