I am trying to design Custom tababr with time line

Question

I am designing this screen with a tab bar view and sharp indicator design but I am unable to make it like shown on the screen and also I don't know how to make selected tab underline like shown in the given design and also calculate the timeline progress on index tap on tab bar with design if anyone could help please let me know my tab bar code is given below. Thanks in Advance

Trying to make Custom Tabbar but the radius does not work for a sharp cut

import 'package:flutter/material.dart';

class CustomTabIndicator extends Decoration {
  final double radius;

  final Color color;


  final double indicatorHeight;

  const CustomTabIndicator({
    this.radius = 8,
    this.indicatorHeight = 20,
    this.color = Colors.white,
  });

  @override
  _CustomPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomPainter(
      this,
      onChanged,
      radius,
      color,
      indicatorHeight,
    );
  }
}

class _CustomPainter extends BoxPainter {
  final CustomTabIndicator decoration;
  final double radius;
  final Color color;
  final double indicatorHeight;

  _CustomPainter(
    this.decoration,
    VoidCallback? onChanged,
    this.radius,
    this.color,
    this.indicatorHeight,
  ) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration.size != null);

    final Paint paint = Paint();
    double xAxisPos = offset.dx + configuration.size!.width / 2;
    double yAxisPos = offset.dy + configuration.size!.height - indicatorHeight/2;
    paint.color = color;

    RRect fullRect = RRect.fromRectAndCorners(
      Rect.fromCenter(
        center: Offset(xAxisPos, yAxisPos),
        width: configuration.size!.width / 1.3,
        height: indicatorHeight,
      ),
                     bottomLeft: Radius.elliptical(100, 50),
                     bottomRight: Radius.elliptical(100, 50),

    );

    canvas.drawRRect(fullRect, paint);
  }
}