Add MacOS support about flutter_acrylic HOT 10 CLOSED

Well, well. Things are going well so far.

from flutter_acrylic.

I have attempted to implement this on macOS and have so far achieved the following result:

The transparency effect works and is even sensitive to macOS' dark mode setting. This is what it looks like when dark mode is enabled:

That said, it seems that moving the window between workspaces causes the window's shadow to break:

Resizing the window fixes the issue. I wonder if the issue could be resolved somehow by calling MainFlutterWindow's invalidateShadow() method when a workspace change is detected, though I'm not sure.

Either way, the way I achieved this is by replacing the MainFlutterWindow.swift file in the Xcode workspace with Oryan Moshe's code I copied from the link you posted above:

import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
    let flutterViewController = FlutterViewController.init()
    let windowFrame = self.frame
    self.contentViewController = flutterViewController
    self.setFrame(windowFrame, display: true)
    RegisterGeneratedPlugins(registry: flutterViewController)

    /* Hiding the window titlebar */
    self.titleVisibility = NSWindow.TitleVisibility.hidden;
    self.titlebarAppearsTransparent = true;
    self.isMovableByWindowBackground = true;
    self.standardWindowButton(NSWindow.ButtonType.miniaturizeButton)?.isEnabled = false;

    /* Making the window transparent */
    self.isOpaque = false
    self.backgroundColor = .clear

    /* Adding a NSVisualEffectView to act as a translucent background */
    let contentView = contentViewController!.view;
    let superView = contentView.superview!;

    let blurView = NSVisualEffectView()
    blurView.frame = superView.bounds
    blurView.autoresizingMask = [.width, .height]
    blurView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow

    /* Pick the correct material for the task */
    blurView.material = NSVisualEffectView.Material.underWindowBackground

    /* Replace the contentView and the background view */
    superView.replaceSubview(contentView, with: blurView)
    blurView.addSubview(contentView)

    super.awakeFromNib()
  }
}

Note: You need to change the Deployment Target to 10.11 (or higher) for this to compile.

I've also edited the MainMenu.xib file, such that the Full Size Content View setting was enabled:

This expands the area of the window that your Flutter app can draw to and would allow you to e.g. recreate the transparent sidebar that has become common these days while keeping the rest of the window opaque.

That said, I am not fluent in Swift and currently have a rather shallow understanding of how Flutter's platform channels work, but I'd assume if I did some reading on these subjects I could successfully implement that functionality into a Flutter package.

from flutter_acrylic.

Not assigning myself, I don't have a mac.

from flutter_acrylic.

Alright, this is how far I've gotten thus far.

The extra functions that let you enter and exit out of fullscreen mode or hide and show the window controls are (currently) not supported, but the transparency effects work fine.

from flutter_acrylic.

@alexmercerind Alright. I've seen that you have approved my pull request. 🙂

The transparency effects are now fully supported, but the extra functions are not. I've decided to close this issue in favor of a newer one that addresses this issue: #10

from flutter_acrylic.

I have attempted to implement this on macOS and have so far achieved the following result:

The transparency effect works and is even sensitive to macOS' dark mode setting. This is what it looks like when dark mode is enabled:

That said, it seems that moving the window between workspaces causes the window's shadow to break:

Resizing the window fixes the issue. I wonder if the issue could be resolved somehow by calling MainFlutterWindow's invalidateShadow() method when a workspace change is detected, though I'm not sure.

Either way, the way I achieved this is by replacing the MainFlutterWindow.swift file in the Xcode workspace with Oryan Moshe's code I copied from the link you posted above:

import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
    let flutterViewController = FlutterViewController.init()
    let windowFrame = self.frame
    self.contentViewController = flutterViewController
    self.setFrame(windowFrame, display: true)
    RegisterGeneratedPlugins(registry: flutterViewController)

    /* Hiding the window titlebar */
    self.titleVisibility = NSWindow.TitleVisibility.hidden;
    self.titlebarAppearsTransparent = true;
    self.isMovableByWindowBackground = true;
    self.standardWindowButton(NSWindow.ButtonType.miniaturizeButton)?.isEnabled = false;

    /* Making the window transparent */
    self.isOpaque = false
    self.backgroundColor = .clear

    /* Adding a NSVisualEffectView to act as a translucent background */
    let contentView = contentViewController!.view;
    let superView = contentView.superview!;

    let blurView = NSVisualEffectView()
    blurView.frame = superView.bounds
    blurView.autoresizingMask = [.width, .height]
    blurView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow

    /* Pick the correct material for the task */
    blurView.material = NSVisualEffectView.Material.underWindowBackground

    /* Replace the contentView and the background view */
    superView.replaceSubview(contentView, with: blurView)
    blurView.addSubview(contentView)

    super.awakeFromNib()
  }
}

Note: You need to change the Deployment Target to 10.11 (or higher) for this to compile.

I've also edited the MainMenu.xib file, such that the Full Size Content View setting was enabled:

This expands the area of the window that your Flutter app can draw to and would allow you to e.g. recreate the transparent sidebar that has become common these days while keeping the rest of the window opaque.

That said, I am not fluent in Swift and currently have a rather shallow understanding of how Flutter's platform channels work, but I'd assume if I did some reading on these subjects I could successfully implement that functionality into a Flutter package.

I'm glad to see I was helpful for your project! It's common practice to mention people using the @ sign in order for them to see that, but as long as someone found my research useful I'm happy (:

from flutter_acrylic.

@Adrian-Samoticha I have added you as a collaborator to the repository, feel free to make your changes to branch & make pull request to master. It will be awesome to get this working on all three platforms.
I'll add you to the README for same contribution.

from flutter_acrylic.

is there any progress about the macOS support?

from flutter_acrylic.

@hzlgnn few people have found way to achieve the blur effect on macOS: here. Although, its not part of any plugin yet. Assuming blur APIs on macOS are well documented, it might not be wrong to enable it globally.

from flutter_acrylic.

@Adrian-Samoticha thanks a lot for your detailed comment, I assume a lot of time went into this study.
I'll appreciate your contribution to the project & it will really help users of the plugin.
Thankyou.

from flutter_acrylic.