Hide title bar on macOS with Flutter

An example of a transparent title bar in iTerm2

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

Step 1

Navigate to your Flutter project on the terminal and type:

open macos/Runner.xcworkspace

This will open Xcode.

Step 2

Open MainMenu.xib. This is under Runner>Runner>Resources (labelled 1 on the image.

Select the icon labelled 2 in the image.

Finally, ensure you have the Attribute Inspector open as the diagram as per label 3.

Steps needed to open the correct Xcode view

Step 3

Now to make the change.

This is what the config will look like before you change any configuration:

Default configuration

Which will result in your title bar looking like this with a clear distinct area where the title bar is.

Output with this configuration

To configure this you need to:

• Hide title = TRUE
• Title bar = TRUE
• Transparent Title Bar = TRUE
• Full-Size Content View = TRUE

It should look like this:

Configuration to hide the title bar

Resulting output

Step 3a — Keep the title

I have made an assumption your app will have some sort of AppBar that will house the title of your app etc. If however, you do not have this and want to keep the APP_NAME in your title bar just uncheck the Hide Title

Flag to show title again

This will result in a view that has the title as part of the view. Ensure you consider this when designing your interface as it has the potential to overlap content!

Transparent title bar with a title

Summary

A helping hand!

So as you have seen there is no Dart being written here and I am sure in the future this might be a configurable option but for now, you have to change the underlying code in Xcode.

Hope that helps.

Links

GitHub Issue

MacOs hide titlebar · Issue #571 · google/flutter-desktop-embedding

My Twitter

JavaScript is not available.

Flutter Community Twitter

Flutter Community (@FlutterComm) | Twitter