Git Product home page Git Product logo

flutter_acrylic's Introduction

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

Install

Mention in your pubspec.yaml.

dependencies:
  ...
  flutter_acrylic: ^1.1.0

Example

Example app running on Microsoft Windows 11 (pre-compiled release mode x64 executable available to test in the "Releases" tab).

Platforms

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

Docs

Initialize Plugin

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

Apply Effects

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

Available Effects

Effect Description Windows macOS Linux
WindowEffect.transparent Transparent window background.
WindowEffect.disabled Default window background.
WindowEffect.solid Solid colored window background.
WindowEffect.aero Aero glass effect. Windows Vista & Windows 7 like glossy blur effect.
WindowEffect.acrylic Acrylic is a type of brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy. Works only on Windows 10 version 1803 or higher.
WindowEffect.mica Mica is an opaque, dynamic material that incorporates theme and desktop wallpaper to paint the background of long-lived windows. Works only on Windows 11 or greater.
WindowEffect.tabbed Tabbed is a Mica like material that incorporates theme and desktop wallpaper, but is more sensitive to desktop wallpaper color. Works only on later Windows 11 versions (builds higher than 22523).
WindowEffect.titlebar The material for a window’s titlebar.
WindowEffect.menu The material for menus.
WindowEffect.popover The material for the background of popover windows.
WindowEffect.sidebar The material for the background of window sidebars.
WindowEffect.headerView The material for in-line header or footer views.
WindowEffect.sheet The material for the background of sheet windows.
WindowEffect.windowBackground The material for the background of opaque windows.
WindowEffect.hudWindow The material for the background of heads-up display (HUD) windows.
WindowEffect.fullScreenUI The material for the background of a full-screen modal interface.
WindowEffect.toolTip The material for the background of a tool tip.
WindowEffect.contentBackground The material for the background of opaque content.
WindowEffect.underWindowBackground The material to show under a window's background.
WindowEffect.underPageBackground The material for the area behind the pages of a document.

Windows 10 versions higher than 1803 & all Windows 11 versions are supported by the plugin, although not all effects might be available to a particular Windows version. See pinned issues if you encounter some problem or feel free to file one yourself.

Other Utilities

  • Enter Fullscreen
Window.enterFullscreen();
  • Exit Fullscreen
Window.exitFullscreen();
  • Hide Controls
Window.hideWindowControls();
  • Show Controls
Window.showWindowControls();

macOS Specific

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);

Add a visual effect subview to the application's window.

final visualEffectSubviewId = Window.addVisualEffectSubview();

Update the properties of a visual effect subview.

Window.updateVisualEffectSubviewProperties(visualEffectSubviewId, VisualEffectSubviewProperties());

Remove a visual effect subview from the application's window.

Window.removeVisualEffectSubview(visualEffectSubviewId);

Override the brightness setting of the window.

Window.overrideMacOSBrightness(dark: true);

Add a toolbar and set its style.

Window.addToolbar();

Window.setToolbarStyle(MacOSToolbarStyle.automatic);
Window.setToolbarStyle(MacOSToolbarStyle.expanded);
Window.setToolbarStyle(MacOSToolbarStyle.preference);
Window.setToolbarStyle(MacOSToolbarStyle.unified);
Window.setToolbarStyle(MacOSToolbarStyle.unifiedCompact);

Enable and disable window shadow.

Window.enableShadow();
Window.disableShadow();

Make window fully transparent (with no blur effect):

Window.makeWindowFullyTransparent();

Acknowledge or ignore mouse events:

Window.acknowledgeMouseEvents();
Window.ignoreMouseEvents();

Set the window's subtitle:

Window.setSubtitle('subtitle');

More features coming soon.

Notes

Windows

No additional setup is required.

On Windows 11 versions higher than or equal to 22523, DwmSetWindowAttribute API is used for WindowEffect.acrylic, WindowEffect.mica & WindowEffect.tabbed effects.

This plugin uses the undocumented SetWindowCompositionAttribute API from user32.dll on Windows 10 & early Windows 11 versions to achieve the acrylic effect. Learn more at Rafael Rivera's amazing blog post about this here.

[ONLY on Windows 10] In most cases, you might wanna render custom window frame because the blur effect might leak outside the window boundary. 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. This issue can be prevented by a "hack", however nothing has been done within the plugin to circumvent this on Windows 10.

WindowEffect.mica & WindowEffect.tabbed only works on Windows 11.

You can see the example application for further details.

macOS

Additional setup for macOS:

flutter_acrylic depends on the macos_window_utils plugin, which requires macOS 10.14.6 or above. Please update your macOS deployment target as follows:

Open the macos/Runner.xcworkspace folder of your project using Xcode, press ⇧ + ⌘ + O and search for Runner.xcodeproj. Go to Info > Deployment Target and set the macOS Deployment Target to 10.14.6 or above.

Additionally, you may need to open the Podfile in your Xcode project and make sure the deployment target in the first line is set to 10.14.6 or above as well:

platform :osx, '10.14.6'

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.

Additionally, it may be worth considering to split your sidebar and your main view into multiple NSVisualEffectView's inside your app. This is because macOS has a feature called “wallpaper tinting,” which is enabled by default. This feature allows windows to blend in with the desktop wallpaper:

macos_wallpaper_tint_70%

To achieve the same effect in your Flutter application, you can set the window's window effect to WindowEffect.solid and wrap your sidebar widget with a TransparentMacOSSidebar widget like so:

TransparentMacOSSidebar(
  child: YourSidebarWidget(),
)

Note: The widget will automatically resize the NSVisualEffectView when a resize is detected in the widget's build method. If you are animating your sidebar's size using a TweenAnimationBuilder, please make sure that the TransparentMacOSSidebar widget is built within the TweenAnimationBuilder's build method, in order to guarantee that a rebuild is triggered when the size changes. For reference, there is a working example in the sidebar_frame.dart file of the example project.

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.

License

MIT License. Contributions welcomed.

Aero blur effect.

Transparent Flutter window.

image

Transparent Flutter window on macOS Monterey with dark mode enabled.

flutter_acrylic's People

Contributors

adrian-samoticha avatar advaitjayadevannair avatar alexmercerind avatar devmil avatar kacikgoez avatar wisetarman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

flutter_acrylic's Issues

Allow displaying subtitles on macOS windows.

NSWindow has a property called subtitle. Changing it allows the application window to display a subtitle like so:

image

... or when a toolbar is added and its style set to unified:

image

Highlight still visible after calling `Window.makeWindowFullyTransparent()`

Calling Window.makeWindowFullyTransparent() (introduced in #48) is supposed to make the window fully transparent (with only flutter-drawn widgets, the title, and the traffic light buttons remaining visible), however, a thin, white line, which is supposed to represent a highlight on top of the window, still remains visible:

image

Since this is unintended, it is currently considered a bug. Ideally, there would be methods called Window.enableHighlight() and Window.disableHighlight() which could be called by Window.makeWindowFullyTransparent() to remove the line, however, I could not find a way to achieve this.

For this reason, I am opening this issue with a “help wanted” label. If anybody knows of a way to disable the highlight of an NSWindow within Swift, please reach out to me.

Mica does not react to window blurring when title bar is hidden

Hi, I'm using flutter_acrylic together with window_manager. My main() function writes as shown below.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Window.initialize();

  await windowManager.ensureInitialized();
  const windowOptions = WindowOptions(
    title: _appName,
    size: Size(800, 600),
    center: true,
    // titleBarStyle: TitleBarStyle.hidden, // <- this line is the case
  );
  await windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
  });

  runApp(const GalleryApp());
}

And in my app widget's initState():

  @override
  void initState() {
    super.initState();

    Window.setEffect(
      effect: WindowEffect.mica,
      dark: FluffApp.dark,
    );
  }

With titleBarStyle: TitleBarStyle.normal (the default value), mica works perfectly and turns solid properly when the window is blurred (losing focus).

  • Focused
    image
  • Blurred
    image

However after I set titleBarStyle: TitleBarStyle.hidden, the mica background does not react to focus changes any more.

  • Focused
    image
  • Blurred. The focus is in the terminal app, but tbe mica background is still transparent.
    image

Please help to look into this problem, and let me know if I'm doing anything wrong. Thanks in advance.

Build example failed

First build example

cd example
flutter pub get
flutter build windows -v
Error Log

[  +23 ms] Build process failed.
[   +3 ms]
           #0      throwToolExit (package:flutter_tools/src/base/common.dart:10:3)
           #1      _runBuild (package:flutter_tools/src/windows/build_windows.dart:299:5)
           <asynchronous suspension>
           #2      buildWindows (package:flutter_tools/src/windows/build_windows.dart:78:5)
           <asynchronous suspension>
           #3      BuildWindowsCommand.runCommand (package:flutter_tools/src/commands/build_windows.dart:55:5)
           <asynchronous suspension>
           #4      FlutterCommand.run.<anonymous closure>
(package:flutter_tools/src/runner/flutter_command.dart:1102:27)
           <asynchronous suspension>
           #5      AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
           <asynchronous suspension>
           #6      CommandRunner.runCommand (package:args/command_runner.dart:196:13)
           <asynchronous suspension>
           #7      FlutterCommandRunner.runCommand.<anonymous closure>
           (package:flutter_tools/src/runner/flutter_command_runner.dart:284:9)
           <asynchronous suspension>
           #8      AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
           <asynchronous suspension>
           #9      FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:232:5)
           <asynchronous suspension>
           #10     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
           <asynchronous suspension>
           #11     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
           <asynchronous suspension>
           #12     main (package:flutter_tools/executable.dart:91:3)
           <asynchronous suspension>


[  +22 ms] Running shutdown hooks
[   +2 ms] Shutdown hooks complete
[   +2 ms] exiting with code 1

Second try

I remove folders 'example\windows' and 'example\build'
and run

cd example
flutter create . 
flutter build windows

The build went well, but the flutter window got additional frames.

Screenshot

image

flutter doctor -v

[√] Flutter (Channel dev, 2.3.0-16.0.pre, on Microsoft Windows [Version 10.0.18363.535], locale en-US)
    • Flutter version 2.3.0-16.0.pre at C:\Users\ilopX\fvm\default
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fa5883b78e (5 weeks ago), 2021-05-21 13:04:03 -0700
    • Engine revision 2f067fc4c5
    • Dart version 2.14.0 (build 2.14.0-136.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\ilopX\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Enterprise 2019 16.4.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise
    • Visual Studio Enterprise 2019 version 16.4.29613.14
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Ultimate Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code (version 1.56.0)
    • VS Code at C:\Users\ilopX\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.22.0

[√] VS Code, 64-bit edition (version 1.49.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.22.0

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.18363.535]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 91.0.4472.106

• No issues found!

Windows 11 title bar customization

As explained in Microsoft's Docs, in Windows 11 the title bar can be customized to fit the design language of the application. For example, the settings app now does this. It would be nice to have this feature in this plugin so that having a custom window isn't necessary. I can implement it myself if anyone is willing to explain to me how I can edit the windows module with lining(for some reason it doesn't work)

can not get windows dark -> light switch, but macOS is OK

Hi, I have a same logic like this:

if (brightness == InterfaceBrightness.dark) {
                            brightness = InterfaceBrightness.light;
                          } else if (brightness == InterfaceBrightness.light) {
                            brightness = InterfaceBrightness.dark;
                          } else {
                            brightness = InterfaceBrightness.dark;
                          }
                          bool v = brightness == InterfaceBrightness.dark;
                          // aboutBloc.setForceDark(v);
                          if (v) {
                            Get.changeTheme(themeDataDark);
                          } else {
                            Get.changeTheme(themeData);
                          }
                          print('[brightness] crt brightness: ${brightness}');
                          this.setWindowEffect(WindowEffect.acrylic,
                              brightness == InterfaceBrightness.dark);

...

void setWindowEffect(WindowEffect value, bool dark) {
    Window.setEffect(
      effect: value,
      color: this.color,
      dark: dark,
    );
    if (Platform.isMacOS) {
      if (brightness != InterfaceBrightness.auto) {
        Window.overrideMacOSBrightness(
            dark: brightness == InterfaceBrightness.dark);
      }
    }
    this.setState(() => this.effect = value);
  }



the printed out brightness is dark and light when switch.

But the setWindowEffect can not make window to bright. While same code on macOS is ok.

what'sthe problem here?

Continuous Frame creation

Hi,
When using flutter_acrylic I see a continuous frame creation and a CPU load of ~10% even if no rebuild happens.
The moment I remove flutter_acrylic the issue is gone.

I can also reproduce this with the example app from this repository.

Is this intended / needed / known?

CleanShot 2022-05-18 at 23 30 02

flutter doctor -v                                        
[✓] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-arm, locale en-DE)
    • Flutter version 3.0.0 at /Users/mlamers/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ee4e09cce0 (9 days ago), 2022-05-09 16:45:18 -0700
    • Engine revision d1b9a6938a
    • Dart version 2.17.0
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mlamers/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Users/mlamers/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Users/mlamers/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/213.6777.52/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.1)
    • IntelliJ at /Users/mlamers/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/213.6461.79/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (1 available)
    • macOS (desktop) • macos • darwin-arm64 • macOS 12.3.1 21E258 darwin-arm

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

PS I had to do flutter pub upgrade in order to get rid of some problems in the win32 package in combination with Flutter 3

Example fails to build on Linux

Example (and my own implementation) throws an exception.

Running on openSUSE Tumbleweed.

Exception has occurred.
MissingPluginException (MissingPluginException(No implementation found for method Initialize on channel com.alexmercerind/flutter_acrylic))

macos transparency and effects only when focused

Seems like the macos effects are only available when the window focused. Is there some way around this? The Mac Terminal Silver Aero does this kind of...

(I was hoping for a see-thru window)

How to dynamic set effect based on system version?

Hello, I using this to dynamic set window effect, but have no reasponse:


  DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();

  void getWindowEffect() async {
    if (Platform.isWindows) {
      var sysProductName = await deviceInfo.windowsInfo;
      var pn = sysProductName.productName;
      print("--- windows information:::: ${pn}");
      if (pn.contains("Windows 10")) {
        setState(() {
          this.effect = WindowEffect.disabled;
        });

        print("effect set to: ${this.effect}");
      } else {
        this.effect = WindowEffect.acrylic;
      }
    } else {
      this.effect = WindowEffect.acrylic;
    }
  }

Am using Windowefffect.acrylic as default, but this should change if on windows 10, since it has bug when mouse dragging on window.

How should I do properly? thanks

The Effect cannot be seen when the window is inactive

I am also facing this issue, when i click in the application, only then the effect is seen, but when i click in another window, the effect is not seen.
So, only when the window is active the effect is seen.
But i want the effect to remain always.

When active:
image

When not active:
image

[windows] Switch to XAML islands.

Switching to XAML islands on Windows can be a great step towards:

  • Improving performance.
  • Depending on officially documented APIs.
  • Dealing with changes & providing Windows like exposed APIs.
  • Allowing to add effect to particular part of the window.
  • Removing bitsdojo_window as a dependency.

I'll be trying to do this in future & switch away from SetWindowCompositionAttribute.

Windows 7 support

Will you add windows 7 support? Right now any app that uses this plugin can not be even launched on this windows version due to bitsdojo incompatibility but if you get rid of it and try to launch example app without it - any mode will show a black screen

[Question] got flutter_acrylic/FlutterAcrylicPlugin.swift:471: Fatal error: Unexpectedly found nil while unwrapping an Optional value when intergate in a not-nullsafety project

Hi, my project not fully using nullsafety. when intergate to my project, the window appear a second and crash, error:

flutter_acrylic/FlutterAcrylicPlugin.swift:471: Fatal error: Unexpectedly found nil while unwrapping an Optional value

do u know why?

I have init it:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Window.initialize();
  if (Platform.isWindows) {
    await Window.hideWindowControls();
  }

  initializeDateFormatting().then((_) => runApp(MyApp()));

  if (Platform.isWindows) {
    doWhenWindowReady(() {
      appWindow
        ..minSize = Size(640, 360)
        ..size = Size(720, 540)
        ..alignment = Alignment.center
        ..show();
    });
  }
}


the rest of the thing are exactly same on example app, the example app I can run it sucess.

Window effects look strange on Windows 7 & 8.1

I rewrote the example with the window_manager library (because bitsdojo_window doesn't work on these systems) and ran it on virtual machines with Windows 7 and 8.1. And it looks... weird.

vmware_xa5XpK6Pb4.mp4

(I also ran an example from fluent_ui library.)

In Windows 8.1 (and in Windows 8, I guess) the effect is the same as in the video

Weird performance issues while dragging app's window

Hi there.

First of all, thank you for tackling on the issue of translucent windows in desktop apps.

As stated in the title, I get really poor and weird performance when dragging my window: it is very laggy and depending on the effect, it behaves erratically.

I have tested Windows only for now.

Using the following effects:

  • Transparent: no issue, perfectly smooth
  • Areo: quite laggy (definitely around 30 FPS, possily less)
  • Acrylic: somewhat not that laggy, but slow as hell and erratic. When I drag the window, it lags behind my mouse. There is an after-effect where the mouse is stuck in the app. When I release my mouse, it re-appears and a few seconds later the app's window arrives at final position.
  • Mica: cannot test (not using Windows 11).

Obviously I tried in profile & release mode but there is no effect. My computer is now slow:

  • i don't get the same behavior with other Windows apps
  • It sports a 7th Gen i7 Intel Core and a RTX 2070.

Does anyone get that issue ?

Transparent window mode

Mouse events cannot be passed to the window beneath especially in the transparent window mode, it just view the elements but prevent interaction.

Issue with example project on flutter 3.0, a conflict between dart:ffi and dart:ui

Hello, I tried to run the example app and I get this errors:

/E:/flutter/.pub-cache/hosted/pub.dartlang.org/bitsdojo_window_windows-0.1.0/lib/src/window.dart(72,36): error GF1577525: 'Size' is imported from both 'dart:ffi' and 'dart:ui'. [E:\Playground\Flutter\flutter_acrylic\example\build\windows\flutter\flutter_assemble.vcxproj]
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/bitsdojo_window_windows-0.1.0/lib/src/window.dart(84,12): error GF1577525: 'Size' is imported from both 'dart:ffi' and 'dart:ui'. [E:\Playground\Flutter\flutter_acrylic\example\build\windows\flutter\flutter_assemble.vcxproj]
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/bitsdojo_window_windows-0.1.0/lib/src/window.dart(126,12): error GF1577525: 'Size' is imported from both 'dart:ffi' and 'dart:ui'. [E:\Playground\Flutter\flutter_acrylic\example\build\windows\flutter\flutter_assemble.vcxproj]
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/bitsdojo_window_windows-0.1.0/lib/src/window.dart(133,12): error GF1577525: 'Size' is imported from both 'dart:ffi' and 'dart:ui'. [E:\Playground\Flutter\flutter_acrylic\example\build\windows\flutter\flutter_assemble.vcxproj]
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/bitsdojo_window_windows-0.1.0/lib/src/window.dart(140,12): error GF1577525: 'Size' is imported from both 'dart:ffi' and 'dart:ui'. [E:\Playground\Flutter\flutter_acrylic\example\build\windows\flutter\flutter_assemble.vcxproj]
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/bitsdojo_window_windows-0.1.0/lib/src/window.dart(199,22): error GF1577525: 'Size' is imported from both 'dart:ffi' and 'dart:ui'. [E:\Playground\Flutter\flutter_acrylic\example\build\windows\flutter\flutter_assemble.vcxproj]

What am I suppose to do? I have flutter 3.0. I don't think I am suppose to modify library code to make it run.

Not fully transparent on MacOS

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

Release 1.1.0 on pub.dev

The latest release is nearly a year old. Would it be possible for the contributors to release a new version to pub.dev since there have been some changes which would really justify a new version?

macOS platform support badge on pub.dev

In version 1.1.0 flutter_acrylic has been migrated to macos_window_utils, which has led to the package losing its macOS support badge on pub.dev:

image

A way to re-enable the macOS support badge while still depending on macos_window_utils needs to be found.

Linux not supported

Hello, this lib works like a charm on macOS and windows, but not for linux, is there a way to make linux also have same experience?

Depend on macos_window_utils

Since flutter_acrylic is slowly getting bloated with macOS-related features which are not directly related to flutter_acrylic's primary purpose (which is to make windows transparent), I have developed a new package called macos_window_utils. The plan is to ultimately depend on that package, instead.

[BUG] Window shadows and window preview bugs

I have found two bugs:

  1. When mica is enabled and set to dark mode, the window shadow is twice as thick as it would be if it was disabled or set to light mode.
  2. The window preview (hovering the mouse over the app icon) is transparent where the mica effect should be shown, this is especially noticeable in light mode:

image
^ Actual window

image
^ Window preview

Fix warning message: NSWindow warning: adding an unknown subview: <NSVisualEffectView: 0x7fe74ef4d490>. Break on NSLog to debug.

Currently, launching an app that has flutter_acrylic enabled on macOS causes the following warning message to be printed to the console:

2021-11-01 09:43:20.415804+0100 new_flutter_project[64015:19213583] NSWindow warning: adding an unknown subview: <NSVisualEffectView: 0x7fe74ef4d490>. Break on NSLog to debug.
2021-11-01 09:43:20.423862+0100 new_flutter_project[64015:19213583] Call stack:
(
	0   AppKit                              0x00007ff80b5daa26 -[NSThemeFrame addSubview:] + 112
	1   AppKit                              0x00007ff80b61d281 -[NSView replaceSubview:with:] + 154
	2   flutter_acrylic                     0x000000010b5fbc2a $s15flutter_acrylic28MainFlutterWindowManipulatorC11setMaterial8materialySo014NSVisualEffectH0V_tFZ + 1322
	3   flutter_acrylic                     0x000000010b5fbdf5 $s15flutter_acrylic28MainFlutterWindowManipulatorC9setEffect8materialySo08NSVisualH8MaterialV_tFZ + 37
	4   flutter_acrylic                     0x000000010b5fcb1a $s15flutter_acrylic20FlutterAcrylicPluginC6handle_6resultySo0C10MethodCallC_yypSgctF + 1050
	5   flutter_acrylic                     0x000000010b5fd9b6 $s15flutter_acrylic20FlutterAcrylicPluginC6handle_6resultySo0C10MethodCallC_yypSgctFTo + 118
	6   FlutterMacOS                        0x000000010e4190ad __56-[FlutterEngineRegistrar addMethodCallDelegate:channel:]_block_invoke + 45
	7   FlutterMacOS                        0x000000010f006a97 __45-[FlutterMethodChannel setMethodCallHandler:]_block_invoke + 119
	8   FlutterMacOS                        0x000000010e41b6a1 -[FlutterEngine engineCallbackOnPlatformMessage:] + 289
	9   FlutterMacOS                        0x000000010e419eac _ZL17OnPlatformMessagePK22FlutterPlatformMessageP13FlutterEngine + 44
	10  FlutterMacOS                        0x000000010ec52fbd _ZNSt3__110__function6__funcIZ23FlutterEngineInitializeE4$_49NS_9allocatorIS2_EEFvNS_10unique_ptrIN7flutter15PlatformMessageENS_14default_deleteIS7_EEEEEEclEOSA_ + 141
	11  FlutterMacOS                        0x000000010ec6420a _ZN7flutter20PlatformViewEmbedder21HandlePlatformMessageENSt3__110unique_ptrINS_15PlatformMessageENS1_14default_deleteIS3_EEEE + 74
	12  FlutterMacOS                        0x000000010e9beb84 _ZNSt3__110__function6__funcIN3fml8internal14CopyableLambdaIZN7flutter5Shell29OnEngineHandlePlatformMessageENS_10unique_ptrINS5_15PlatformMessageENS_14default_deleteIS8_EEEEE4$_16EENS_9allocatorISD_EEFvvEEclEv + 132
	13  FlutterMacOS                        0x000000010ec61522 _ZN7flutter18EmbedderTaskRunner8PostTaskEy + 738
	14  FlutterMacOS                        0x000000010ec4957c FlutterEngineRunTask + 44
	15  FlutterMacOS                        0x000000010e41c807 __60-[FlutterEngine postMainThreadTask:targetTimeInNanoseconds:]_block_invoke + 71
	16  libdispatch.dylib                   0x000000010bb29634 _dispatch_call_block_and_release + 12
	17  libdispatch.dylib                   0x000000010bb2a874 _dispatch_client_callout + 8
	18  libdispatch.dylib                   0x000000010bb3aea9 _dispatch_main_queue_callback_4CF + 1129
	19  CoreFoundation                      0x00007ff808ca13b8 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
	20  CoreFoundation                      0x00007ff808c629a6 __CFRunLoopRun + 2760
	21  CoreFoundation                      0x00007ff808c61809 CFRunLoopRunSpecific + 567
	22  HIToolbox                           0x00007ff811cce3e1 RunCurrentEventLoopInMode + 292
	23  HIToolbox                           0x00007ff811cce137 ReceiveNextEventCommon + 587
	24  HIToolbox                           0x00007ff811ccded5 _BlockUntilNextEventMatchingListInModeWithFilter + 70
	25  AppKit                              0x00007ff80b5b38f0 _DPSNextEvent + 886
	26  AppKit                              0x00007ff80b5b1f5c -[NSApplication(NSEvent) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 1411
	27  AppKit                              0x00007ff80b5a4359 -[NSApplication run] + 586
	28  AppKit                              0x00007ff80b5781f8 NSApplicationMain + 816
	29  new_flutter_project                 0x0000000102f016f9 main + 9
	30  dyld                                0x00000002030da4fe start + 462
	31  ???                                 0x0000000000000003 0x0 + 3

The warning is harmless, however, it indicates that messing around with the window's contentView is not recommended. Additionally, according to this post, it also affects the window's resize handle cursors, thus making the window harder to resize, which I can confirm.

The post I linked above also outlines a way to fix this issue, which is why I am opening this issue.

[Windows 10] Dragging window causes large amount of lag

First of all: Thanks for the nice package!

I have a little problem. When I use AcrylicEffect.acrylic, moving the window behaves lagging and with a huge delay. See the video.

I am on latest master channel and I am using the same setup like the one in the example for bitsdojo_window .

VID20210720113427.1.1.mp4

Error with `Window.addToolbar()`

When building the app that has the code Window.addToolbar() in it, it fails to build with the following message:

/Users/USR1132/flutter/.pub-cache/git/flutter_acrylic-49776d5078b2c482e552fa090a8db948c66b3ec6/macos/Classes/MainFlutterWindowManipulator.swift:391:26: error: 'init()' is only available in macOS 10.13 or newer
        let newToolbar = NSToolbar()
                         ^
        let newToolbar = NSToolbar()
                         ^
    public static func addToolbar() {
                       ^
public class MainFlutterWindowManipulator {

This can be fixed by wrapping the code within addToolbar() function with this:

if #available(macOS 10.13, *) {
	//...
}

cold start still shows white background color before acrylic loaded

When the application starts for the first time on Windows, there is a white background color show first then change to acrylic after 1 sec.

How can I prevent this??

I try to set MaterialApp to transparent, but no hope

import 'package:flutter/material.dart';
import 'package:flutter_acrylic/flutter_acrylic.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Window.initialize();
  await Window.setEffect(
    effect: WindowEffect.acrylic,
    color: const Color(0xCC222222),
  );
  // await Window.enterFullscreen();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        backgroundColor: Colors.transparent
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page')
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      // appBar: AppBar(
      //   // Here we take the value from the MyHomePage object that was created by
      //   // the App.build method, and use it to set our appbar title.
      //   title: Text(widget.title),
      // ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      backgroundColor: Colors.transparent,
    );
  }
}

App looks transparent on taskbar

The app is transparent on the taskbar, is there any way to not make it so?

image

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Window.initialize();
  await Window.setEffect(
    effect: WindowEffect.mica,
    dark: false,
  );
  runApp(AppWrapper());
}

Add support for extra functions on macOS

An extension to #5. The transparency effects are now fully supported on macOS, but the following extra functions are not:

Enter fullscreen.

Window.enterFullscreen();

Exit fullscreen.

Window.exitFullscreen();

Hide controls.

Window.hideWindowControls();

Show controls.

Window.showWindowControls();

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.