Not fully transparent on MacOS

[dlewis2017]

System

• MacOS Monterey Pro, V12.2, M1 Chip

Flutter

Flutter 2.10.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7e9793dee1 (13 days ago) • 2022-03-02 11:23:12 -0600
Engine • revision bd539267b4
Tools • Dart 2.16.1 • DevTools 2.9.2

Issue

• Same code on MacOS and a windows PC. The Windows machine shows the background as it should when transparency is set but the MacOS machine doesn't show with 100% transparency. It's like 20% transparent maybe.
• I did follow the extra steps for MacOS found here: https://alexmercerind.github.io/docs/flutter_acrylic/#macos but still no luck

Any advice? Thanks

[dlewis2017]

Not a bug. Just make sure to set the alpha to 0.
await Window.setWindowAlphaValue(0.5);

[dlewis2017]

Sorry for all the comments but this may actually be a bug. I want just the background to be transparent. Not all components within it. Equivalent code should ideally produce the same effect in different systems for Flutter.
As you can see with the Mac application, the whole screen is see through when the alpha is set. When the alpha is not set, the transparency isn't working well. In Windows it works as intended.

no alpha set

alpha set to .5

windows

[alexmercerind]

Not all the effects are available on every platform, same for the available functions.
Both, macOS & Windows do it differently, we do not mimic the effect within Flutter but use system's APIs to achieve it. There is no way to make behaviour exactly the same, just pick the best one you find according to your requirement on each platform.
Infact, on Windows this acrylic effect is limited to UWP apps, but this plugin does achieve it after a "hack" in Windows 10.

[Adrian-Samoticha]

The macOS port offers a variety of different WindowEffects that map to equivalent NSVisualEffectView.Materials.

I have tried to make the Windows-only WindowEffects map to macOS Materials that are “as close as possible” to their Windows counterparts, but obviously, they aren't going to be the same.

None of those materials are completely invisible, though. That said, I believe there is some way to achieve what you want. The macOS terminal offers a way to customize both the opacity and the blur effect of the terminal window:

I'm not going to assign myself just yet, but I might do some research to find out if (and how) something like this may be possible.

[dlewis2017]

Okay cool, I appreciate you potentially looking into it! I'll use the alpha for now set to .6/7 if Mac is the OS

[Adrian-Samoticha]

Apparently making it possible to control the window's opacity and blur radius the same way the macOS terminal does is not really feasible since it relies on CGSSetWindowBackgroundBlurRadius, which is part of a non-public API whose usage may result in your app breaking in the future (and Apple does indeed deny App Store submissions if they happen to contain calls to this API).

Though if I understand correctly, all you're after is a way to make the window completely transparent, leaving only the Flutter view to be visible? That may be possible, although I'm unsure how well that would integrate into the current project structure.

[alexmercerind]

Windows implementation is also completely undocumented in this plugin for Windows 10.
However, I guess real issue will be rejection by Apple's App Store. And I guess, not a good thing.

[dlewis2017]

@Adrian-Samoticha Thanks for looking into that. My goal was to make the Flutter window transparent while leaving inside components visible. So to mimic how it looks in Windows above, but in MacOS. As of now it seems MacOS doesn't make the window transparent, and using the work around (setting the alpha) causes everything to be transparent.

[qshanahan-springhealth]

Electron seems to support this out of the box:

https://www.electronjs.org/docs/latest/api/browser-window
search for "transparent"

seems to also have cross platform support. I don't see any usages of CGSSetWindowBackgroundBlurRadius, is it a special case somehow because they are using chromium?

[krjw-eyev]

Any update on this?

[Adrian-Samoticha]

Any update on this?

It's on my radar, though not actively being worked on at the moment.

EDIT: What's interesting, is that while I was initially developing the macOS support, I somehow managed to trigger a bug that actually achieved exactly what @dlewis2017 is requesting (the window got entirely invisible), but I cannot remember how I triggered it, nor do I know how well it can be implemented in the code base.

I'll take a look at that when I get some free time.

[Adrian-Samoticha]

Alright, some progress: 🙂

What's cool is that Visual Effect Subviews still work perfectly fine. What isn't cool is that miniaturizing/restoring the window causes significant performance issues and interestingly, Flutter-drawn widgets have a shadow applied to them, but it isn't being updated, so the window can quickly end up looking like this:

Either way, I'm happy to have progressed on this issue and will try to fix those issues.

[Adrian-Samoticha]

Alright. I am sorry that it took me over eight months to resolve this issue, but #48 finally resolves it. However, there is a little bug that I couldn't fix (#49), so please be aware of that.

[dlewis2017]

Appreciate it! @Adrian-Samoticha