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

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?

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?

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

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.

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.

https://user-images.githubusercontent.com/46501450/166160284-5e5e42f6-f0b6-45a9-b89b-b89125074325.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

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:

^ Actual window

^ Window preview

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)

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?

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, *) {
	//...
}

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
• Blurred

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

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

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

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)

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

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:

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.

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 ?

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

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?