I'm trying to make a loading icon for my loading screen using CustomPaint widget. Unfortunally, it doesn't work as expected...

My quarter circle does not fit in my primary circle, here's a screen of it :

I don't understand why it is doing this...

Here's the code:

import 'package:flutter/material.dart';
import 'package:responsive_sizer/responsive_sizer.dart';
import 'dart:math' as math;

class LoadingPage extends StatelessWidget {
  const LoadingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 25.h,
        ),
        Stack(
          alignment: Alignment.center,
          children: [
            Container(
              width: 28.w,
              height: 28.w,
              decoration: BoxDecoration(
                color: Colors.transparent,
                shape: BoxShape.circle,
                border: Border.all(width: 3.w, color: Colors.white.withOpacity(0.2)),
              ),
            ),
            CustomPaint(
              painter: MyPainter(),
              size: Size(28.w, 28.w),
            ),
          ]
        ),
        SizedBox(
          height: 6.h,
        ),
        Text(
          "LOADING",
          style: Theme.of(context).textTheme.headline2,
        )
      ],
    );
  }
}

class MyPainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..strokeWidth = 3.w
      ..style = PaintingStyle.stroke
      ..color = Colors.blue;

    double degToRad(double deg) => deg * (math.pi / 180.0);

    final path = Path()
      ..arcTo(
          Rect.fromCircle(
            center: Offset(size.width/2, size.height/2),
            radius: 28.w/2,
          ),
          degToRad(90),
          degToRad(90),
          false);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Does anyone knows why ? :)

Thanks for your answers,

Chris