Sidebar transparency effect (#175)

* Transparency sidebar effect

Added a transparency effect to the sidebar

* fix: Formatted window.dart

* chore: update changelog, version

* fix: removed unused imports

* fix: applied enhancement from @jmatth

this fixes weird behavior on windows and web

* fix: double null check

widget.sidebar.decoration.color was checked twice
(according to suggestion by @jmatth)

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

@@ -1,5 +1,6 @@
 import 'dart:math' as math;
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
 import 'package:macos_ui/src/indicators/scrollbar.dart';
 import 'package:macos_ui/src/layout/content_area.dart';
@@ -95,12 +96,23 @@ class _MacosWindowState extends State<MacosWindow> {
     late Color sidebarBackgroundColor;
     Color dividerColor = theme.dividerColor;
 
-    if (!theme.brightness.isDark) {
-      sidebarBackgroundColor = widget.sidebar?.decoration?.color ??
-          CupertinoColors.systemGrey6.color;
+    final isMac = !kIsWeb && defaultTargetPlatform == TargetPlatform.macOS;
+
+    // Respect the sidebar color override from parent if one is given
+    if (widget.sidebar?.decoration?.color != null) {
+      sidebarBackgroundColor = widget.sidebar!.decoration!.color!;
+    } else if (isMac &&
+        MediaQuery.of(context).platformBrightness.isDark ==
+            theme.brightness.isDark) {
+      // Only show blurry, transparent sidebar when platform brightness and app
+      // brightness are the same, otherwise it looks awful. Also only make the
+      // sidebar transparent on native Mac, or it will just be flat black or
+      // white.
+      sidebarBackgroundColor = Colors.transparent;
     } else {
-      sidebarBackgroundColor = widget.sidebar?.decoration?.color ??
-          CupertinoColors.tertiarySystemBackground.darkColor;
+      sidebarBackgroundColor = theme.brightness.isDark
+          ? CupertinoColors.tertiarySystemBackground.darkColor
+          : CupertinoColors.systemGrey6.color;
     }
 
     final curve = Curves.linearToEaseOut;

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';