Как мне использовать Neumorphics во Flutter?

Question

Я пытаюсь воссоздать этот циферблат neumorphi c. Однако каждый раз, когда я отлаживаю его на планшете или любом более крупном устройстве, ограничения становятся неуместными. Я пытался исправить это несколько раз, но это постоянно меняется.

Вот как сейчас выглядит циферблат:

This is my code:

  Widget build(BuildContext context) {
    final percentage = 50.0;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(80.0),
            child: Align(
              child: Neumorphic(
                padding: EdgeInsets.all(20),
                style: NeumorphicStyle(
                  boxShape: NeumorphicBoxShape.circle(),
                  depth: NeumorphicTheme.embossDepth(context),
                ),
                child: CustomPaint(
                  painter: NeuProgressPainter(
                    circleWidth: 20,
                    completedPercentage: percentage,
                    defaultCircleColor: Colors.transparent,
                  ),
                  child: Center(),
                ),
              ),
            ),
          ),
          Align(
            child: Neumorphic(
              padding: EdgeInsets.all(80),
              style: NeumorphicStyle(
                boxShape: NeumorphicBoxShape.circle(),
                color: Colors.white,
                depth: NeumorphicTheme.depth(context),
              ),
            ),
          ),
        ],
      ),
    );
  }

Where Custom Paint is:

class NeuProgressPainter extends CustomPainter {
  //
  Color defaultCircleColor;
  Color percentageCompletedCircleColor;
  double completedPercentage;
  double circleWidth;

  NeuProgressPainter(
      {this.defaultCircleColor,
      this.percentageCompletedCircleColor,
      this.completedPercentage,
      this.circleWidth});

  getPaint(Color color) {
    return Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = circleWidth;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Paint defaultCirclePaint = getPaint(defaultCircleColor);

    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);
    Rect boundingSquare = Rect.fromCircle(center: center, radius: radius);

    paint(
      List colors,
    ) {
      final Gradient gradient = LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomRight,
        colors: colors,
      );

      return Paint()
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke
        ..strokeWidth = circleWidth
        ..shader = gradient.createShader(boundingSquare);
    }

    canvas.drawCircle(center, radius, defaultCirclePaint);

    double arcAngle = 2 * pi * (completedPercentage / 100);
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      arcAngle,
      false,
      paint(
        [
          kOrange,
          kDarkOrange,
          kOrange,
        ],
      ),
    );
  }

  @override
  bool shouldRepaint(CustomPainter painter) {
    return true;
  }
}

This is what I'm trying to recreate:

введите описание изображения здесь