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.

0

There are 0 answers