Notes by Lesnitsky Subscribe

#flutter, macos ยท 2021-09-09 05:25 PM Twitter Logo

How to make titlebar in Flutter macOS app transparent?

To make your app's titlebar transparent:

  1. open macos/Runner.xcworkspace
  2. open MainFlutterWindow.swift
  3. add these 2 lines of code
self.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)
self.titlebarAppearsTransparent = true

You'd also need to override a MediaQuery, so that your flutter canvas color is visible under the titlebar as well. You can do this with the following code:

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(brightness: Brightness.dark),
home: MediaQuery(
data: MediaQueryData(
padding: const EdgeInsets.only(top: 15),
),
child: Home(),
),
);
}
}

Hope this helps! ๐Ÿ˜‰