Add MacOS support

[aguilaair]

An extension to #4, support MacOS

[alexmercerind]

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

[hzlgnn]

is there any progress about the macOS support?

[alexmercerind]

@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.

[Adrian-Samoticha]

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.

[alexmercerind]

@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.

[alexmercerind]

@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.

[Adrian-Samoticha]

Well, well. Things are going well so far.

https://user-images.githubusercontent.com/86920182/138774433-aa6b78cd-e0e2-4764-a83f-042d5388645f.mov

[Adrian-Samoticha]

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

https://user-images.githubusercontent.com/86920182/139503010-342bbd92-78b9-42f5-a1ad-6dfdc7475988.mov

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.

[Adrian-Samoticha]

@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

[oryanmoshe]

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 (: