Sidebar transparency effect

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.10.1]
+* Added support for transparent sidebar
+
 ## [0.10.0+1]
 * Update `native_context_menu` dependency
 

README.md

@@ -113,6 +113,20 @@ class MainFlutterWindow: NSWindow {
     self.isMovableByWindowBackground = true
     self.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)
 
+    self.isOpaque = false
+    self.backgroundColor = .clear
+    let contentView = contentViewController!.view;
+    let superView = contentView.superview!;
+    let blurView = NSVisualEffectView()
+    blurView.frame = superView.bounds
+    blurView.autoresizingMask = [.width, .height]
+    blurView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow
+    if #available(macOS 10.14, *) {
+      blurView.material = .underWindowBackground
+    }
+    superView.replaceSubview(contentView, with: blurView)
+    blurView.addSubview(contentView)
+
     RegisterGeneratedPlugins(registry: flutterViewController)
 
     super.awakeFromNib()

example/lib/pages/dialogs_page.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/material.dart';
 import 'package:macos_ui/macos_ui.dart';
 import 'package:macos_ui/src/library.dart';
 

example/macos/Runner/MainFlutterWindow.swift

@@ -22,6 +22,20 @@ class MainFlutterWindow: NSWindow {
     self.isMovableByWindowBackground = true
     self.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)
 
+    self.isOpaque = false
+    self.backgroundColor = .clear
+    let contentView = contentViewController!.view;
+    let superView = contentView.superview!;
+    let blurView = NSVisualEffectView()
+    blurView.frame = superView.bounds
+    blurView.autoresizingMask = [.width, .height]
+    blurView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow
+    if #available(macOS 10.14, *) {
+      blurView.material = .underWindowBackground
+    }
+    superView.replaceSubview(contentView, with: blurView)
+    blurView.addSubview(contentView)
+
     RegisterGeneratedPlugins(registry: flutterViewController)
 
     super.awakeFromNib()

lib/src/dialogs/macos_alert_dialog.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/material.dart';
 import 'package:flutter/physics.dart';
 import 'package:macos_ui/macos_ui.dart';
 import 'package:macos_ui/src/library.dart';

lib/src/layout/window.dart

@@ -95,7 +95,12 @@ class _MacosWindowState extends State<MacosWindow> {
     late Color sidebarBackgroundColor;
     Color dividerColor = theme.dividerColor;
 
-    if (!theme.brightness.isDark) {
+    // Only show blurry, transparent sidebar when platform brightness and app
+    // brightness are the same, otherwise it looks awful
+    if (MediaQuery.of(context).platformBrightness.isDark ==
+        theme.brightness.isDark) {
+      sidebarBackgroundColor = Colors.transparent;
+    } else if (!theme.brightness.isDark) {
       sidebarBackgroundColor = widget.sidebar?.decoration?.color ??
           CupertinoColors.systemGrey6.color;
     } else {

lib/src/theme/macos_theme.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/foundation.dart';
 import 'package:macos_ui/macos_ui.dart';
-import 'package:macos_ui/src/icon/macos_icon.dart';
 import 'package:macos_ui/src/library.dart';
 
 /// Applies a macOS-style theme to descendant macOS widgets.

pubspec.yaml

@@ -1,6 +1,6 @@
 name: macos_ui
 description: Flutter widgets and themes implementing the current macOS design language.
-version: 0.10.0+1
+version: 0.10.1
 homepage: "https://github.com/GroovinChip/macos_ui"
 
 environment:

test/theme/icon_button_theme_test.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/foundation.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:macos_ui/macos_ui.dart';
 import 'package:macos_ui/src/library.dart';