flutter_acrylic

Window acrylic, mica & transparency effects for Flutter on Windows, macOS & Linux

Installation

Mention in your pubspec.yaml.

dependencies:
  ...
  flutter_acrylic: ^0.1.0

Example

Documentation

Initialize the plugin inside the main method.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Window.initialize();
  runApp(MyApp());
}

Apply the effect to Flutter window.

await Window.setEffect(
  effect: WindowEffect.acrylic,
  color: Color(0xCC222222),
);

await Window.setEffect(
  effect: WindowEffect.mica,
  dark: true,
);

Following effects are available.

• WindowEffect.disabled.
• WindowEffect.solid.
• WindowEffect.transparent.
• WindowEffect.aero.
• WindowEffect.acrylic.
• WindowEffect.mica.
• WindowEffect.titlebar.
• WindowEffect.selection.
• WindowEffect.menu.
• WindowEffect.popover.
• WindowEffect.sidebar.
• WindowEffect.headerView.
• WindowEffect.sheet.
• WindowEffect.windowBackground.
• WindowEffect.hudWindow.
• WindowEffect.fullScreenUI.
• WindowEffect.toolTip.
• WindowEffect.contentBackground.
• WindowEffect.underWindowBackground.
• WindowEffect.underPageBackground.

Other utility features offered by the plugin:

Enter fullscreen.

Window.enterFullscreen();

Exit fullscreen.

Window.exitFullscreen();

Hide controls.

Window.hideWindowControls();

Show controls.

Window.showWindowControls();

macOS only utility features:

Get the height of the titlebar when the full-size content view is enabled.

final titlebarHeight = Window.getTitlebarHeight();

Set the document to be edited.

Window.setDocumentEdited();

Set the document to be unedited.

Window.setDocumentUnedited();

Set the represented file of the window.

Window.setRepresentedFilename('path/to/file.txt');

Set the represented URL of the window.

Window.setRepresentedUrl('https://flutter.dev');

Hide the titlebar of the window.

Window.hideTitle();

Show the titlebar of the window.

Window.showTitle();

Make the window's titlebar transparent.

Window.makeTitlebarTransparent();

Make the window's titlebar opaque.

Window.makeTitlebarOpaque();

Enable the window's full-size content view. It is recommended to enable the full-size content view when making the titlebar transparent.

Window.enableFullSizeContentView();

Disable the window's full-size content view.

Window.disableFullSizeContentView();

Zoom the window.

Window.zoomWindow();

Unzoom the window.

Window.unzoomWindow();

Get if the window is zoomed.

final isWindowZoomed = Window.isWindowZoomed();

Get if the window is fullscreened.

final isWindowFullscreened = Window.isWindowFullscreened();

Hide/Show the window's zoom button.

Window.hideZoomButton();
Window.showZoomButton();

Hide/Show the window's miniaturize button.

Window.hideMiniaturizeButton();
Window.showMiniaturizeButton();

Hides/Show the window's close button.

Window.hideCloseButton();
Window.showCloseButton();

Enable/Disable the window's zoom button.

Window.enableZoomButton();
Window.disableZoomButton();

Enable/Disable the window's miniaturize button.

Window.enableMiniaturizeButton();
Window.disableMiniaturizeButton();

Enable/Disable the window's close button.

Window.enableCloseButton();
Window.disableCloseButton();

Get whether the window is currently being resized by the user.

final isWindowInLiveResize = Window.isWindowInLiveResize();

Set the window's alpha value.

Window.setWindowAlphaValue(0.75);

Get if the window is visible.

final isWindowVisible = Window.isWindowVisible();

Set the window's titlebar to the default (opaque) color.

Window.setWindowBackgroundColorToDefaultColor()

Make the window's titlebar clear.

Window.setWindowBackgroundColorToClear()

Set the window's blur view state.

Window.setBlurViewState(MacOSBlurViewState.active);
Window.setBlurViewState(MacOSBlurViewState.inactive);
Window.setBlurViewState(MacOSBlurViewState.followsWindowActiveState);

More features coming soon.

Notes

Linux

Additional setup for Linux.

Find my_application.cc inside the linux directory of your Flutter project & remove following lines from it.

gtk_widget_show(GTK_WIDGET(window));

gtk_widget_show(GTK_WIDGET(view));

Adding blur to the Window.

Since current Flutter embedder on Linux uses GTK 3.0, so there is no official API available for backdrop blur of the window.

However, some desktop environments like KDE Plasma (with KWin compositor) have some third party scripts like kwin-forceblur from Eon S. Jeon, which allow to add blur to GTK 3.0 windows aswell (when the window is transparent, which you can certainly achieve using the plugin). Thus, this setup can be used to obtain result as shown in the picture.

Blur on Linux is more dependent on the compositor, some compositors like compiz or wayfire also seem to support blur effects.

Windows

This plugin exposes the undocumented SetWindowCompositionAttribute API from user32.dll on Windows 10. Learn more at Rafael Rivera's amazing blog post about this here.

In most cases, you might wanna render custom window frame because the blur effect might leak outside the window boundary (only on Windows 10). You can use bitsdojo_window to make a custom window for your Flutter application.

WindowEffect.acrylic causes lag on window drag in Windows 10, this issue is fixed by Microsoft in Windows 11. WindowEffect.mica only works on Windows 11.

You can see the example application for further details.

macOS

Additional setup for macOS:

Open the macos/Runner.xcworkspace folder of your project using Xcode, press ⇧ + ⌘ + O and search for MainFlutterWindow.swift.

Insert import flutter_acrylic at the top of the file. Then, replace the code above the super.awakeFromNib()-line with the following code:

let windowFrame = self.frame
let blurryContainerViewController = BlurryContainerViewController()
self.contentViewController = blurryContainerViewController
self.setFrame(windowFrame, display: true)

/* Initialize the flutter_acrylic plugin */
MainFlutterWindowManipulator.start(mainFlutterWindow: self)

RegisterGeneratedPlugins(registry: blurryContainerViewController.flutterViewController)

Assuming you're starting with the default configuration, the finished code should look something like this:

import Cocoa
import FlutterMacOS
+import flutter_acrylic

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)
    
+   let windowFrame = self.frame
+   let blurryContainerViewController = BlurryContainerViewController()
+   self.contentViewController = blurryContainerViewController
+   self.setFrame(windowFrame, display: true)

+   /* Initialize the flutter_acrylic plugin */
+   MainFlutterWindowManipulator.start(mainFlutterWindow: self)

+   RegisterGeneratedPlugins(registry: blurryContainerViewController.flutterViewController)

    super.awakeFromNib()
  }
}

Now press ⇧ + ⌘ + O once more and search for Runner.xcodeproj. Go to info > Deployment Target and set the macOS Deployment Target to 10.11 or above.

Depending on your use case, you may want to extend the area of the window that Flutter can draw to to the entire window, such that you are able to draw onto the window's title bar as well (for example when you're only trying to make the sidebar transparent while the rest of the window is meant to stay opaque).

To do so, enable the full-size content view with the following Dart code:

Window.makeTitlebarTransparent();
Window.enableFullSizeContentView();

When you decide to do this, it is recommended to wrap your application (or parts of it) in a TitlebarSafeArea widget as follows:

TitlebarSafeArea(
  child: YourApp(),
)

This ensures that your app is not covered by the window's title bar.

Platforms

Platform	Status	Maintainer
Windows	✅	Hitesh Kumar Saini
macOS	✅	Adrian Samoticha
Linux	✅	Hitesh Kumar Saini

License

MIT License. Contributions welcomed.

More

Checkout other awesome projects for Flutter on Windows

(Irrespective of order)

• bitsdojo_window
  • A Flutter package that makes it easy to customize and work with your Flutter desktop app window.
• fluent_ui
  • Implements Microsoft's Fluent Design System in Flutter.

Aero blur effect.

Transparent Flutter window.

Transparent Flutter window on macOS Monterey with dark mode enabled.