{"id":13551846,"url":"https://github.com/alexmercerind/flutter_acrylic","last_synced_at":"2025-10-23T17:02:23.565Z","repository":{"id":39972056,"uuid":"379316177","full_name":"alexmercerind/flutter_acrylic","owner":"alexmercerind","description":"Flutter library for window acrylic, mica \u0026 transparency effects.","archived":false,"fork":false,"pushed_at":"2024-06-11T19:57:38.000Z","size":8630,"stargazers_count":620,"open_issues_count":23,"forks_count":55,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T05:05:17.687Z","etag":null,"topics":["acrylic","acrylic-material","blur","flutter","linux","macos","mica","window-blur","windows"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexmercerind.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-22T15:25:01.000Z","updated_at":"2025-04-02T02:01:01.000Z","dependencies_parsed_at":"2024-01-18T18:25:36.536Z","dependency_job_id":"dff9fe99-d605-4a4d-9de5-7d21971b5360","html_url":"https://github.com/alexmercerind/flutter_acrylic","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_acrylic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_acrylic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_acrylic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_acrylic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexmercerind","download_url":"https://codeload.github.com/alexmercerind/flutter_acrylic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acrylic","acrylic-material","blur","flutter","linux","macos","mica","window-blur","windows"],"created_at":"2024-08-01T12:01:54.452Z","updated_at":"2025-10-23T17:02:23.510Z","avatar_url":"https://github.com/alexmercerind.png","language":"Dart","funding_links":[],"categories":["Dart","Packages"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003ca href=\"https://github.com/alexmercerind/flutter_acrylic\"\u003eflutter_acrylic\u003c/a\u003e\u003c/h1\u003e\n\u003cp align=\"center\"\u003eWindow acrylic, mica \u0026 transparency effects for Flutter on Windows, macOS \u0026 Linux\u003c/p\u003e\n\n## Install\n\nMention in your `pubspec.yaml`.\n\n```yaml\ndependencies:\n  ...\n  flutter_acrylic: ^1.1.0\n```\n\n## Example\n\n![](https://github.com/alexmercerind/flutter_acrylic/blob/assets/mug8J4efWu.gif?raw=true)\n\n_Example app running on Microsoft Windows 11 (pre-compiled release mode x64 executable available to test in the \"Releases\" tab)._\n\n## Platforms\n\n| Platform | Status | Maintainer                                              |\n| -------- | ------ | ------------------------------------------------------- |\n| Windows  | ✅      | [Hitesh Kumar Saini](https://github.com/alexmercerind)  |\n| macOS    | ✅      | [Adrian Samoticha](https://github.com/Adrian-Samoticha) |\n| Linux    | ✅      | [Hitesh Kumar Saini](https://github.com/alexmercerind)  |\n\n## Docs\n\n### Initialize Plugin\n\n```dart\nFuture\u003cvoid\u003e main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  await Window.initialize();\n  runApp(MyApp());\n}\n```\n\n### Apply Effects\n\n```dart\nawait Window.setEffect(\n  effect: WindowEffect.acrylic,\n  color: Color(0xCC222222),\n);\n```\n\n```dart\nawait Window.setEffect(\n  effect: WindowEffect.mica,\n  dark: true,\n);\n```\n\n## Available Effects\n\n| Effect                               | Description                                                                                                                                                                                               | Windows | macOS | Linux |\n| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----- | ----- |\n| `WindowEffect.transparent`           | Transparent window background.                                                                                                                                                                            | ✅       | ✅     | ✅     |\n| `WindowEffect.disabled`              | Default window background.                                                                                                                                                                                | ✅       | ✅     | ✅     |\n| `WindowEffect.solid`                 | Solid colored window background.                                                                                                                                                                          | ✅       | ✅     | ✅     |\n| `WindowEffect.aero`                  | Aero glass effect. Windows Vista \u0026 Windows 7 like glossy blur effect.                                                                                                                                     | ✅       | ✅     |       |\n| `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. | ✅       | ✅     |       |\n| `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.                                     | ✅       | ✅     |       |\n| `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).       | ✅       | ✅     |       |\n| `WindowEffect.titlebar`              | The material for a window’s titlebar.                                                                                                                                                                     |         | ✅     |       |\n| `WindowEffect.menu`                  | The material for menus.                                                                                                                                                                                   |         | ✅     |       |\n| `WindowEffect.popover`               | The material for the background of popover windows.                                                                                                                                                       |         | ✅     |       |\n| `WindowEffect.sidebar`               | The material for the background of window sidebars.                                                                                                                                                       |         | ✅     |       |\n| `WindowEffect.headerView`            | The material for in-line header or footer views.                                                                                                                                                          |         | ✅     |       |\n| `WindowEffect.sheet`                 | The material for the background of sheet windows.                                                                                                                                                         |         | ✅     |       |\n| `WindowEffect.windowBackground`      | The material for the background of opaque windows.                                                                                                                                                        |         | ✅     |       |\n| `WindowEffect.hudWindow`             | The material for the background of heads-up display (HUD) windows.                                                                                                                                        |         | ✅     |       |\n| `WindowEffect.fullScreenUI`          | The material for the background of a full-screen modal interface.                                                                                                                                         |         | ✅     |       |\n| `WindowEffect.toolTip`               | The material for the background of a tool tip.                                                                                                                                                            |         | ✅     |       |\n| `WindowEffect.contentBackground`     | The material for the background of opaque content.                                                                                                                                                        |         | ✅     |       |\n| `WindowEffect.underWindowBackground` | The material to show under a window's background.                                                                                                                                                         |         | ✅     |       |\n| `WindowEffect.underPageBackground`   | The material for the area behind the pages of a document.                                                                                                                                                 |         | ✅     |       |\n\n\n_Windows 10 versions higher than 1803 \u0026 all Windows 11 versions are supported by the plugin, although not all effects might be available to a particular Windows version. See [pinned issues](https://github.com/alexmercerind/flutter_acrylic/issues) if you encounter some problem or feel free to file one yourself._\n\n\n### Other Utilities\n\n- Enter Fullscreen\n\n```dart\nWindow.enterFullscreen();\n```\n\n- Exit Fullscreen\n\n```dart\nWindow.exitFullscreen();\n```\n\n- Hide Controls\n\n```dart\nWindow.hideWindowControls();\n```\n\n- Show Controls\n\n```dart\nWindow.showWindowControls();\n```\n\n### macOS Specific\n\nGet the height of the titlebar when the full-size content view is enabled.\n\n```dart\nfinal titlebarHeight = Window.getTitlebarHeight();\n```\n\nSet the document to be edited.\n\n```dart\nWindow.setDocumentEdited();\n```\n\nSet the document to be unedited.\n\n```dart\nWindow.setDocumentUnedited();\n```\n\nSet the represented file of the window.\n\n```dart\nWindow.setRepresentedFilename('path/to/file.txt');\n```\n\nSet the represented URL of the window.\n\n```dart\nWindow.setRepresentedUrl('https://flutter.dev');\n```\n\nHide the titlebar of the window.\n\n```dart\nWindow.hideTitle();\n```\n\nShow the titlebar of the window.\n\n```dart\nWindow.showTitle();\n```\n\nMake the window's titlebar transparent.\n\n```dart\nWindow.makeTitlebarTransparent();\n```\n\nMake the window's titlebar opaque.\n\n```dart\nWindow.makeTitlebarOpaque();\n```\n\nEnable the window's full-size content view.\nIt is recommended to enable the full-size content view when making\nthe titlebar transparent.\n\n```dart\nWindow.enableFullSizeContentView();\n```\n\nDisable the window's full-size content view.\n\n```dart\nWindow.disableFullSizeContentView();\n```\n\nZoom the window.\n\n```dart\nWindow.zoomWindow();\n```\n\nUnzoom the window.\n\n```dart\nWindow.unzoomWindow();\n```\n\nGet if the window is zoomed.\n\n```dart\nfinal isWindowZoomed = Window.isWindowZoomed();\n```\n\nGet if the window is fullscreened.\n\n```dart\nfinal isWindowFullscreened = Window.isWindowFullscreened();\n```\n\nHide/Show the window's zoom button.\n\n```dart\nWindow.hideZoomButton();\nWindow.showZoomButton();\n```\n\nHide/Show the window's miniaturize button.\n\n```dart\nWindow.hideMiniaturizeButton();\nWindow.showMiniaturizeButton();\n```\n\nHides/Show the window's close button.\n\n```dart\nWindow.hideCloseButton();\nWindow.showCloseButton();\n```\n\nEnable/Disable the window's zoom button.\n\n```dart\nWindow.enableZoomButton();\nWindow.disableZoomButton();\n```\n\nEnable/Disable the window's miniaturize button.\n\n```dart\nWindow.enableMiniaturizeButton();\nWindow.disableMiniaturizeButton();\n```\n\nEnable/Disable the window's close button.\n\n```dart\nWindow.enableCloseButton();\nWindow.disableCloseButton();\n```\n\nGet whether the window is currently being resized by the user.\n\n```dart\nfinal isWindowInLiveResize = Window.isWindowInLiveResize();\n```\n\nSet the window's alpha value.\n\n```dart\nWindow.setWindowAlphaValue(0.75);\n```\n\nGet if the window is visible.\n\n```dart\nfinal isWindowVisible = Window.isWindowVisible();\n```\n\nSet the window's titlebar to the default (opaque) color.\n\n```dart\nWindow.setWindowBackgroundColorToDefaultColor()\n```\n\nMake the window's titlebar clear.\n\n```dart\nWindow.setWindowBackgroundColorToClear()\n```\n\nSet the window's blur view state.\n\n```dart\nWindow.setBlurViewState(MacOSBlurViewState.active);\nWindow.setBlurViewState(MacOSBlurViewState.inactive);\nWindow.setBlurViewState(MacOSBlurViewState.followsWindowActiveState);\n```\n\nAdd a visual effect subview to the application's window.\n\n```dart\nfinal visualEffectSubviewId = Window.addVisualEffectSubview();\n```\n\nUpdate the properties of a visual effect subview.\n\n```dart\nWindow.updateVisualEffectSubviewProperties(visualEffectSubviewId, VisualEffectSubviewProperties());\n```\n\nRemove a visual effect subview from the application's window.\n\n```dart\nWindow.removeVisualEffectSubview(visualEffectSubviewId);\n```\n\nOverride the brightness setting of the window.\n\n```dart\nWindow.overrideMacOSBrightness(dark: true);\n```\n\nAdd a toolbar and set its style.\n\n```dart\nWindow.addToolbar();\n\nWindow.setToolbarStyle(MacOSToolbarStyle.automatic);\nWindow.setToolbarStyle(MacOSToolbarStyle.expanded);\nWindow.setToolbarStyle(MacOSToolbarStyle.preference);\nWindow.setToolbarStyle(MacOSToolbarStyle.unified);\nWindow.setToolbarStyle(MacOSToolbarStyle.unifiedCompact);\n```\n\nEnable and disable window shadow.\n\n```dart\nWindow.enableShadow();\nWindow.disableShadow();\n```\n\nMake window fully transparent (with no blur effect):\n\n```dart\nWindow.makeWindowFullyTransparent();\n```\n\nAcknowledge or ignore mouse events:\n\n```dart\nWindow.acknowledgeMouseEvents();\nWindow.ignoreMouseEvents();\n```\n\nSet the window's subtitle:\n\n```dart\nWindow.setSubtitle('subtitle');\n```\n\nMore features coming soon.\n\n## Notes\n\n### Windows\n\n**No additional setup is required.**\n\nOn Windows 11 versions higher than or equal to 22523, `DwmSetWindowAttribute` API is used for `WindowEffect.acrylic`, `WindowEffect.mica` \u0026 `WindowEffect.tabbed` effects.\n\nThis plugin uses the undocumented `SetWindowCompositionAttribute` API from `user32.dll` on Windows 10 \u0026 early Windows 11 versions to achieve the acrylic effect.\nLearn more at [Rafael Rivera](https://github.com/riverar)'s amazing blog post about this [here](https://withinrafael.com/2015/07/08/adding-the-aero-glass-blur-to-your-windows-10-apps).\n\n\n[ONLY on Windows 10] In most cases, you might wanna render custom window frame because the blur effect might leak outside the window boundary.\nYou can use [bitsdojo_window](https://github.com/bitsdojo/bitsdojo_window) to make a custom window for your Flutter application.\n\n`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.\n\n`WindowEffect.mica` \u0026 `WindowEffect.tabbed` only works on Windows 11.\n\nYou can see the [example](https://github.com/alexmercerind/flutter_acrylic/blob/master/example/lib/main.dart) application for further details.\n\n### macOS\n\n**Additional setup for macOS:**\n\nflutter_acrylic depends on the [macos_window_utils](https://pub.dev/packages/macos_window_utils) plugin, which requires macOS 10.14.6 or above. Please update your macOS deployment target as follows:\n\nOpen the `macos/Runner.xcworkspace` folder of your project using Xcode, press ⇧ + ⌘ + O and search for `Runner.xcodeproj`. Go to `Info` \u003e `Deployment Target` and set the `macOS Deployment Target` to `10.14.6` or above.\n\nAdditionally, 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:\n\n```podspec\nplatform :osx, '10.14.6'\n```\n\nDepending 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).\n\nTo do so, enable the full-size content view with the following Dart code:\n\n```dart\nWindow.makeTitlebarTransparent();\nWindow.enableFullSizeContentView();\n```\n\nWhen you decide to do this, it is recommended to wrap your application (or parts of it) in a `TitlebarSafeArea` widget as follows:\n\n```dart\nTitlebarSafeArea(\n  child: YourApp(),\n)\n```\n\nThis ensures that your app is not covered by the window's title bar.\n\nAdditionally, it may be worth considering to split your sidebar and your main view into multiple `NSVisualEffectView`'s inside your\napp. This is because macOS has a feature called “wallpaper tinting,” which is enabled by default. This feature allows windows to\nblend in with the desktop wallpaper:\n\n![macos_wallpaper_tint_70%](https://user-images.githubusercontent.com/86920182/199122746-ccbc61a6-b5cf-4f36-bd37-7b63b4426a28.jpg)\n\n\nTo achieve the same effect in your Flutter application, you can set the window's window effect to `WindowEffect.solid` and wrap\nyour sidebar widget with a `TransparentMacOSSidebar` widget like so:\n\n```dart\nTransparentMacOSSidebar(\n  child: YourSidebarWidget(),\n)\n```\n\n**Note:** The widget will automatically resize the `NSVisualEffectView` when a resize is detected in the widget's `build` method.\nIf you are animating your sidebar's size using a `TweenAnimationBuilder`, please make sure that the `TransparentMacOSSidebar` widget\nis built *within* the `TweenAnimationBuilder`'s `build` method, in order to guarantee that a rebuild is triggered when the size\nchanges. For reference, there is a working example in the `sidebar_frame.dart` file of the `example` project.\n\n### Linux\n\n**Additional setup for Linux.**\n\nFind `my_application.cc` inside the `linux` directory of your Flutter project \u0026 remove following lines from it.\n\n```cpp\ngtk_widget_show(GTK_WIDGET(window));\n```\n\n```cpp\ngtk_widget_show(GTK_WIDGET(view));\n```\n\n**Adding blur to the Window.**\n\nSince current Flutter embedder on Linux uses GTK 3.0, so there is no official API available for backdrop blur of the window.\n\nHowever, some desktop environments like KDE Plasma (with KWin compositor) have some third party scripts like [kwin-forceblur](https://github.com/esjeon/kwin-forceblur) from [Eon S. Jeon](https://github.com/esjeon), 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.\n\nBlur on Linux is more dependent on the compositor, some compositors like compiz or wayfire also seem to support blur effects.\n\n## License\n\nMIT License. Contributions welcomed.\n\n![](https://github.com/alexmercerind/flutter_acrylic/blob/assets/aero.jpg?raw=true)\n\nAero blur effect.\n\n![](https://github.com/alexmercerind/flutter_acrylic/blob/assets/linux_blur.png?raw=true)\n\n![](https://github.com/alexmercerind/flutter_acrylic/blob/assets/transparent.jpg?raw=true)\n\nTransparent Flutter window.\n\n![image](https://user-images.githubusercontent.com/86920182/139502224-a1a25c9d-a945-4685-be3b-715d83ce52ae.png)\n\nTransparent Flutter window on macOS Monterey with dark mode enabled.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmercerind%2Fflutter_acrylic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexmercerind%2Fflutter_acrylic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmercerind%2Fflutter_acrylic/lists"}