0

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.

GroovinChip
  • 339
  • 4
  • 17
  • You need `MaskFilter.blur` – pskink May 02 '22 at 16:13
  • @pskink I suppose that is somewhat closer to the original, but it's still not quite correct. I used `const MaskFilter.blur(BlurStyle.normal, 2.0)`. – GroovinChip May 02 '22 at 16:45
  • Seems like using a `strokeWidth` of `2.0` and `const MaskFilter.blur(BlurStyle.inner, 1.0)` is even closer, but still not quite it. – GroovinChip May 02 '22 at 16:50
  • Just played around with it and while it's interesting, and I appreciate you providing it, it doesn't seem to be what I need. Thank you again for your help, though! – GroovinChip May 03 '22 at 15:25
  • i dont know how you used that but when i run the code i posted as a part of `CustomPainter` it casts shadows exactly like in the first image you posted - this is a normal way flutter draws shadws - for more see [_paintShadows](https://github.com/flutter/flutter/blob/5464c5bac7/packages/flutter/lib/src/painting/shape_decoration.dart#L355-L360) – pskink May 03 '22 at 17:52
  • this is how it looks like: https://pasteboard.co/qJ4V5AJq5gsQ.png – pskink May 03 '22 at 18:12
  • Well, for one thing, I had to remove the gray square around the green ring. Also, is the shadow painted as part of that green ring or is it separate? (the code you posted isn't available any more) And is the teal ring intended to approximate the silver ring around the clock? – GroovinChip May 04 '22 at 14:20
  • Wow that actually looks like what I want, thank you so much! – GroovinChip May 05 '22 at 13:33
  • That works even better, thank you! – GroovinChip May 05 '22 at 14:02

0 Answers0