'What is the right gradient to use to achieve the inner shadow effect of the native macOS graphical time picker with Flutter CustomPainter?

I'm recreating the graphical macOS time picker for macos_ui and I'm having some difficulty painting the inner shadow gradient correctly. This shadow, along with the gradient of the clock's border, help give the clock a sort of 3D look.

Here is a screenshot of the native time picker:

enter image description here

As you can see, there is a shadow effect for the inner top half of the clock. It starts out white right around hour 9, then gets gradually darker and thicker as it reaches hour 12, and reverses back down to white at hour 3.

I've so far achieved the following:

enter image description here

As you can see, this is not correct. Here is the code I'm using to achieve this incorrect effect:

  void _paintInnerShadow(Canvas canvas, Size size) {
    Paint innerShadowPainter = Paint()
      ..strokeWidth = 3.0
      ..isAntiAlias = true
      ..shader = const LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.bottomLeft,
        stops: [0.0, 0.5],
        colors: [
          MacosColor(0xFFA3A4A5),
          MacosColors.white,
        ],
      ).createShader(
        Rect.fromCircle(
          center: size.center(Offset.zero),
          radius: clockHeight / 2,
        ),
      )
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(
      size.center(Offset.zero),
      size.shortestSide / 2.0,
      innerShadowPainter,
    );
  }

What is the correct gradient I need to use to match the native look? I've experimented with Linear, Radial, and Sweep gradients and while I think LinearGradient is the right one, I haven't been able to work out the correct parameters for it.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source