macosui / macos_ui

Flutter widgets and themes implementing the current macOS design language.

https://macosui.github.io/macos_ui/#/

MIT License

1.81k stars 178 forks source link

Rewritten `MacosSwitch` #409

Closed GroovinChip closed 1 year ago

GroovinChip commented 1 year ago

This PR completely revamps the MacosSwitch widget. Previously, it provided a thin wrapper around the CupertinoSwitch, and the widget therefore did not conform to proper specification.

This PR also updates MacosColor to more closely match Color.

Additionally, this PR introduces the ControlSize enum. Some native components may have "mini", "small", "regular", and "large" sizes. MacosSwitch now makes use of this new enum to size itself properly.

Closes #406 and #386.

Pre-launch Checklist

[x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
[x] I have added/updated relevant documentation
[x] I have run "optimize/organize imports" on all changed files
[x] I have addressed all analyzer warnings as best I could

GroovinChip commented 1 year ago

@Adrian-Samoticha would you mind reviewing this for color accuracy (and in general), please? Let's focus on colors with wallpaper tinting off, to start with.

I'm marking this as a draft until color accuracy is at 100% certainty.

github-actions[bot] commented 1 year ago

Dart Code Metrics analyze report of macos_ui. ✅

Summary

Scanned folders: lib
Total scanned files: 82
Total lines of source code: 9642
Total classes: 207
Average Cyclomatic Number per line of code: 0.23 / 5
Average Source Lines of Code per method: 11
Total tech debt: not found
Found issues: 0 ✅

Adrian-Samoticha commented 1 year ago

It appears that the knob itself has an incorrect color in dark mode. It’s supposed to have a brightness of 202:

It appears to have a brightness of 207, instead:

Additionally, you may want to take a closer look at the shadows of the switch:

bitmap

The knob itself has a shadow that is much sharper/less blurry in the native version than it is in the macos_ui version, while the “container” it is located in has an inner drop shadow that is missing from the macos_ui version (inner drop shadows are difficult to recreate in Flutter, though).

GroovinChip commented 1 year ago

Weird - I'm showing 207 for the knob color.

Any thoughts on how to achieve the correct shadow?

Adrian-Samoticha commented 1 year ago

Apparently, the knob is transparent. I ran the numbers and got this color in dark mode:

Color.fromRGBO(255, 255, 255, 0.721)

The color of the “container” should be

Color.fromRGBO(255, 255, 255, 0.102)

I’m not quite sure about the drop shadow. Perhaps BlurStyle.inner might help, but I can’t say for sure.

You see, the go-to approach for this was to add a light shadow with a negative spread radius to kind of “fake” the light in the middle of the container, but this doesn’t work very well for transparent widgets.

EDIT: If all else fails, you can render the drop shadow yourself using a custom painter. I’m a little busy right now, but if you need any assistance I’d of course be glad to help.

GroovinChip commented 1 year ago

@Adrian-Samoticha given my general lack of bandwidth, I'm inclined to say let's merge this into dev and worry about the minor color inconsistencies later. Thoughts?

Adrian-Samoticha commented 1 year ago

I’m still a little busy right now as well, so sure thing. We’ll worry about it when we get to worrying about the color accuracy of the other widgets as well.

GroovinChip commented 1 year ago

I’m still a little busy right now as well, so sure thing. We’ll worry about it when we get to worrying about the color accuracy of the other widgets as well.

Cool. I'll call this ready for review, then.

GroovinChip commented 1 year ago

Ah wait, I forgot to update the README

GroovinChip commented 1 year ago

@Adrian-Samoticha re-requested review for updated readme