From a9acdce0ec90147f8f5f86ac0b867fd5dd349fba Mon Sep 17 00:00:00 2001 From: mj-shifu <77107165+mj-shifu@users.noreply.github.com> Date: Sun, 6 Mar 2022 18:44:22 +0100 Subject: [PATCH] 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 | 3 +++ README.md | 14 +++++++++++++ example/lib/pages/dialogs_page.dart | 1 - example/macos/Runner/MainFlutterWindow.swift | 14 +++++++++++++ lib/src/dialogs/macos_alert_dialog.dart | 1 - lib/src/layout/window.dart | 22 +++++++++++++++----- lib/src/theme/macos_theme.dart | 1 - pubspec.yaml | 2 +- test/theme/icon_button_theme_test.dart | 1 - 9 files changed, 49 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 586ed83e..834e3f49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## [0.10.1] +* Added support for transparent sidebar + ## [0.10.0+1] * Update `native_context_menu` dependency diff --git a/README.md b/README.md index 8bfd90bd..cf0f5fb7 100644 --- a/README.md +++ b/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() diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index 91a38832..20aedf2a 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/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'; diff --git a/example/macos/Runner/MainFlutterWindow.swift b/example/macos/Runner/MainFlutterWindow.swift index 20bbb84c..5b629b6a 100644 --- a/example/macos/Runner/MainFlutterWindow.swift +++ b/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() diff --git a/lib/src/dialogs/macos_alert_dialog.dart b/lib/src/dialogs/macos_alert_dialog.dart index 74254f45..7797515e 100644 --- a/lib/src/dialogs/macos_alert_dialog.dart +++ b/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'; diff --git a/lib/src/layout/window.dart b/lib/src/layout/window.dart index f7380515..e573692c 100644 --- a/lib/src/layout/window.dart +++ b/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 { 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; diff --git a/lib/src/theme/macos_theme.dart b/lib/src/theme/macos_theme.dart index 95795ba1..b979bc85 100644 --- a/lib/src/theme/macos_theme.dart +++ b/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. diff --git a/pubspec.yaml b/pubspec.yaml index c40c41a0..d7a030f4 100644 --- a/pubspec.yaml +++ b/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: diff --git a/test/theme/icon_button_theme_test.dart b/test/theme/icon_button_theme_test.dart index 34b9486f..fd28c516 100644 --- a/test/theme/icon_button_theme_test.dart +++ b/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';