trackoffical_app/lib/view/ingame/process_bar.dart

import 'dart:math';

import 'package:flutter/material.dart';






class ProcessBar extends StatelessWidget{
  final double process;
  final int pointCount;

  const ProcessBar({super.key, required this.process, required this.pointCount});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(7)),
      height: 227,
      width: 14,
      padding:  const EdgeInsets.all(2),
      child: CustomPaint(painter: Pentagram(process, pointCount)),
    );
  }
}


class Pentagram extends CustomPainter {
  Pentagram(this.process, this.pointCount);

  final double process;
  final int pointCount;

  @override
  void paint(Canvas canvas, Size size) {
    var radius = 7.0;
    var process = min(this.process, 1.0);
    process = max(process, 0.0);

    var height = size.height * (1-process);
    var paint = Paint()..color = const Color(0xffd8d8d8);
    var rect = Offset.zero & Size(size.width, height);
    var rRect = RRect.fromRectXY(rect, radius, radius);
    canvas.drawRRect(rRect, paint);
    paint.color = const Color(0xffff870d);
    rect = Offset(0, height) & Size(size.width, size.height - height);
    rRect = RRect.fromRectXY(rect, radius, radius);
    canvas.drawRRect(rRect, paint);
    final xCenter = size.width /2;
    final pointCount = min(this.pointCount, 20);
    // final pointCount = 20;
    paint.color = const Color(0xffffffff).withAlpha(125);
    radius = 3;
    var padding = 3.0;
    if (pointCount >1){
      var space = (size.height - (padding+ radius) *2)/(pointCount-1);
      var offset = Offset(xCenter, padding + radius);
      for (var i = 0; i < pointCount; i++){
        canvas.drawCircle(offset, radius, paint);
        offset += Offset(0, space);
      }
    }


    paint.color =  const Color(0xffd8d8d8).withAlpha(50);
    radius = 10;
    var offset = Offset(xCenter, height);
    canvas.drawCircle(offset, radius, paint);
    radius = 8;
    paint.color = Colors.white;
    offset = Offset(xCenter, height);
    canvas.drawCircle(offset, radius, paint);

    paint.color = const Color(0xffff0000);
    final path = Path();
    path.moveTo(xCenter, height-5);
    path.lineTo(xCenter+4, height+4);
    path.lineTo(xCenter-4, height+4);
    path.close();
    canvas.drawPath(path, paint);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}