So I recently started developing a new app for macOS with Flutter. While I know Mac support still in development and not available on Beta or Stable, it is still fun to try it out while it matures and document my finding and tips as I go.

Something that I wanted to do from the outset as I personally like the look of it. Plus it is a growing trend among Mac apps, is have a transparent title bar. This is where there is no distinction between the apps main background and the title bar. An example of this is in Sublime for example:

Non-transparent title bar

Transparent title bar

How to achieve this in Flutter?

Currently, the only way to achieve this in Flutter is by opening Xcode and making a change. There is no inbuild ability to do this right now in Flutter.

The solution was provided in an issue on GitHub (link at the end) and I felt it was worth documenting the steps as people who are not familiar with Xcode may struggle to find the settings.

Prerequisites:

• Mac with Xcode installed
• A Flutter project with MacOS support enabled

#flutter #xcode #mac #macos