Mention in your pubspec.yaml.

dependencies:
  ...
  flutter_acrylic: ^0.0.2

You can download & try out the example application.

Initialize the plugin inside the main method.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Acrylic.initialize();
  runApp(MyApp());
}

Apply the effect to Flutter window.

Acrylic.setEffect(
  effect: AcrylicEffect.aero,
  gradientColor: this.color
);

Following effects are available.

• AcrylicEffect.disabled.
• AcrylicEffect.solid.
• AcrylicEffect.transparent.
• AcrylicEffect.aero.
• AcrylicEffect.acrylic.

Other utility features offered by the plugin.

Enter fullscreen.

Window.enterFullscreen();

Exit fullscreen.

Window.exitFullscreen();

More features coming soon.

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.

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. You can use bitsdojo_window to make a custom window for your Flutter application.

Currently AcrylicEffect.acrylic causes lag on window drag, this is a bug in Windows itself. Latest Windows 11 build appears to be fixing this issue.

You can see the example application for further details.

MIT License. Contributions welcomed.

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