Skip to content

Commit e24816e

Browse files
Updated documentation
1 parent 2c33a30 commit e24816e

1 file changed

Lines changed: 36 additions & 5 deletions

File tree

README.md

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h1 align="center"><a href="https://github.com/alexmercerind/flutter_acrylic">flutter_acrylic</a></h1>
2-
<h4 align="center">Acrylic & aero blur effect on Flutter Windows.</h4>
2+
<h4 align="center">Window blur & transparency effects for Flutter on Windows & Linux</h4>
33

44

55
## Installation
@@ -8,14 +8,17 @@ Mention in your `pubspec.yaml`.
88
```yaml
99
dependencies:
1010
...
11-
flutter_acrylic: ^0.0.1
11+
flutter_acrylic: ^0.0.2
1212
```
1313
1414
## Example
1515
1616
You can [download](https://github.com/alexmercerind/flutter_acrylic/releases/download/v0.0.1/flutter_acrylic_example.zip) & try out the example application.
1717
18-
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/acrylic.jpg' height='512'></img>
18+
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/linux_blur.png' width='640'></img>
19+
20+
21+
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/acrylic.jpg' width='640'></img>
1922
2023
## Documentation
2124
@@ -67,6 +70,31 @@ More features coming soon.
6770

6871
## Notes
6972

73+
### Linux
74+
75+
76+
**Additional setup for Linux.**
77+
78+
Find `my_application.cc` inside the `linux` directory of your Flutter project & remove following lines from it.
79+
80+
```cpp
81+
gtk_widget_show(GTK_WIDGET(window));
82+
```
83+
84+
```cpp
85+
gtk_widget_show(GTK_WIDGET(view));
86+
```
87+
88+
**Adding blur to the Window.**
89+
90+
Since current Flutter embedder on Linux uses GTK 3.0, so there is no official API available for backdrop blur of the window.
91+
92+
However, 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.
93+
94+
Blur on Linux is more dependent on the compositor, some compositors like compiz or wayfire also seem to support blur effects.
95+
96+
### Windows
97+
7098
This plugin exposes the undocumented `SetWindowCompositionAttribute` API from `user32.dll` on Windows 10.
7199
Learn 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).
72100

@@ -90,10 +118,13 @@ MIT License. Contributions welcomed.
90118
- [fluent_ui](https://github.com/bdlukaa/fluent_ui)
91119
- Implements Microsoft's Fluent Design System in Flutter.
92120

93-
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/aero.jpg' height='512'></img>
121+
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/aero.jpg' width='640'></img>
94122

95123
Aero blur effect.
96124

97-
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/transparent.jpg' height='512'></img>
125+
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/linux_transparent.png' width='640'></img>
126+
127+
128+
<img src='https://github.com/alexmercerind/flutter_acrylic/blob/assets/transparent.jpg' width='640'></img>
98129

99130
Transparent Flutter window.

0 commit comments

Comments
 (0)