Flutter-desktop Frameless window support

Question

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.

Answer 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

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

Answer 3

You can use package bitsdojo_window

Answer 4

After searching, I found the win32 doc:
https://learn.microsoft.com/en-us/windows/win32/winmsg/window-styles

Change
WS_OVERLAPPEDWINDOW | WS_VISIBLE
to
WS_VISIBLE | WS_POPUP
in /windows/runner/win32_window.cpp c

    HWND window = CreateWindow(
       window_class, title.c_str(), WS_VISIBLE | WS_POPUP,
       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);