'Flutter-desktop Frameless window support

just started with flutter and I am playing with macos desktop app. I wonder if flutter has support for frameless window. For example in Electron.js we can define frameless window and our app window can have really custom shape. We can recreate our title bar according app needs and so on.

Example of frameless electron app:

I was trying to find any info about this feature but I was not success.

Is this feature planned, or can we do this now for example on macOS using Xcode? I know that desktop support is in early stage so maybe it is very soon to ask.

flutter flutter-desktop

Solution 1:^[1]

For Windows:

To do a frameless window in Flutter, you need to change window properties from the Project Directory/windows/runner/win32_window.cpp file.

First, go find the section on creating a window. Here is a built-in code by Flutter:

     HWND window = CreateWindow(
       window_class, title.c_str(), WS_OVERLAPPEDWINDOW | WS_VISIBLE,
       Scale(origin.x, scale_factor), Scale(origin.y, scale_factor),
       Scale(size.width, scale_factor), Scale(size.height, scale_factor),
       nullptr, nullptr, GetModuleHandle(nullptr), this);

You only need to change the WS_OVERLAPPEDWINDOW value to WS_POPUPWINDOW to make a frameless window.

Our final code will be look like this:

     HWND window = CreateWindow(
       window_class, title.c_str(), WS_POPUPWINDOW | WS_VISIBLE,
       Scale(origin.x, scale_factor), Scale(origin.y, scale_factor),
       Scale(size.width, scale_factor), Scale(size.height, scale_factor),
       nullptr, nullptr, GetModuleHandle(nullptr), this);

Remember if you do this you will lose the ability to drag the window. But there are some solutions to it.

EDIT (01/03/2022): You can use WS_THICKFRAME instead of WS_POPUPWINDOW This is more dynamic for window management.

For macOS:

I found this article that can be helpful -> Medium: Hide title bar on macOS with Flutter

Solution 2:^[2]

There is currently no built-in support for frameless windows in Flutter. However, as on other platforms the desktop applications created by flutter create are yours to alter however you like, so you can change the window's native properties just as you would if it were any other native application.

Solution 3:^[3]

You can use package bitsdojo_window

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	smorgan
Solution 3	Anton Ilyin

'Flutter-desktop Frameless window support

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]