flutter_acrylic
flutter_acrylic copied to clipboard
alexmercerind
[macOS] Is It Possible To Have Multiple Effect In One Window?
Since macOS window's color could change with desktop background, is it possible or is there a workaround to have multiple effect on one window? Like the Email app or Apple Music app on macOS?
Such functionality is not supported at the moment. I'm currently not quite sure what's the best way to implement it, though. I wanted to check how macos_ui goes about solving this issue, however, it turns out that it does, in fact, not support window tinting either.
One way would be to add support for adding multiple NSVisualEffectViews to flutter_acrylic and implement a way to manipulate them through Dart code.
Another way would be to find a way to retrieve the current wallpaper and window position and implement the window tinting yourself. While the window position can be retrieved using window_utils, I have not found a package that allows you to retrieve the system's desktop wallpaper. Perhaps that could be done via the wallpaper crate and Dart/Rust ffi, though?
I'd have to do a little bit of research to find out what's the best way forward.
Turns out that macOS asks the user for permission when a program attempts to retrieve the current wallpaper using the wallpaper crate which might make it less than ideal for this specific use case.
Alright, thanks for answering! And thanks for all the works that you have done!
No problem. I am currently a little busy with some personal matters, but I'll look further into this issue once I'm free.
I managed to add two NSVisualEffectViews to a single window and it now looks like this:
There are still certain issues with this implementation (such as the transparent subview blocking mouse events) but given that what we're after seems very much possible I guess I'd assign myself. :)
Alright, I am now able to manipulate the views through Dart code, and the performance is pretty good as well. I am manipulating the view 125 times per second right here:
https://user-images.githubusercontent.com/86920182/197355337-887118dd-7f3f-44ca-a8fd-dd544b954e57.mov
This means that animations are very well possible. Also, the alpha value of the views can also be changed, so applying them to pop-up windows and the like (which may change their transparency during their open/close animations) is all fair game. :D
Things are certainly going well.
OMG!!!! That's fantastic!!! Thanks you sososososososososo much!!!! 🥳🥳🥳🥳🥳
Alright, I'm slowly approaching the finish line. So, this is the current status:
The library will offer a widget called TransparentMacOSSidebar. Using it is as simple as wrapping it around an existing sidebar in your project.
https://user-images.githubusercontent.com/86920182/198895291-4ae9ad55-77a1-40fc-92db-28883bfd6ca5.mov
As you can see, the widget reacts to resize events automatically. There was nothing “special” I needed to do to make it work with the animation — it “just works” (I just had to make sure the MacOSSidebar was inside the TweenAnimationBuilder's build method, rather than wrapping the TweekAnimationBuilder inside the MacOSSidebar, but that was it). You'll be able to see the example for yourself.
More complex usages might be a little less straightforward, but I will document the library's usage as well as possible.
That's so amazing!!!!! When my app is accomplished you'll be the FIRST ONE on the thank list!!!!! 😘😘😘😘😘😘
@Adrian-Samoticha does this merged? this is exactly I need, does it support windows as well BTW?
@Adrian-Samoticha does this merged? this is exactly I need, does it support windows as well BTW?
This feature has been present in flutter_acrylic for a while now and is fully functional on macOS. Windows doesn't have wallpaper tinting, so I'm not sure how useful this feature would be on Windows. Judging by your recent issue (#60) what you're after is simply an opaque window with a transparent sidebar, though. You could achieve that by setting the material to WindowEffect.acrylic and wrapping your content view with a container that has an opaque background, though.
@Adrian-Samoticha I tried wrapping content in white background, but takes no effect.
@jinfagang Can you show me your code and a screenshot of what you are seeing? If you remember this post of mine, this is basically would you'd need to do on Windows.