How to cerate custom spinner in flutter

This is a my code snippet you could try to work from it:

class FourColorSpinner extends CustomPainter {
  final double rotation;
  final List<Color> colors;

  FourColorSpinner(this.rotation, this.colors);

  @override
  void paint(Canvas canvas, Size size) {
    double center = size.width / 2;
    double radius = size.width / 4;

    canvas.translate(center, center);
    canvas.rotate(rotation * 2 * pi);

    double colorStep = 1.0 / colors.length;
    double currentStep = 0.0;

    for (int i = 0; i < colors.length; i++) {
      Paint paint = Paint()
        ..color = colors[i % colors.length]
        ..style = PaintingStyle.stroke
        ..strokeWidth = 4.0;

      double startAngle = currentStep * 2 * pi;
      double sweepAngle = colorStep * 2 * pi;

      canvas.drawArc(
        Rect.fromCircle(center: Offset(0, 0), radius: radius),
        startAngle,
        sweepAngle,
        false,
        paint,
      );

      currentStep += colorStep;
    }
  }

  @override
  bool shouldRepaint(FourColorSpinner oldDelegate) {
    return oldDelegate.rotation != rotation;
  }
}




class FourSpinner extends StatefulWidget {
  @override
  _FourSpinnerState createState() => _FourSpinnerState();
}

class _FourSpinnerState extends State<FourSpinner>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  double _rotation = 0.0;
  List<Color> _spinnerColors = [Colors.blue, Colors.red, Colors.green, Colors.orange];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..addListener(() {
        setState(() {
          _rotation = _controller.value;
        });
      });

    _controller.repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: FourColorSpinner(_rotation, _spinnerColors),
      child: Container(
        width: 100.0,
        height: 100.0,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Center(child: FourSpinner()),
                ],
              ),
          ),
    );
  }
}