[Solved] Flutter - How to create a custom indicator for the TabBar that move when I switch tabs - I have a DartPad example

Question

Asked by Millenial2020 on November 19, 2021 (source).

I custom indicator for my TabBar that looks like this. enter image description here

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

enter image description here

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

This is my DartPad with the current problem.

DartPad working example

Answer

Question answered by Martin (source).

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);
  }
FLUTTER
SHARE: