Merge pull request #56 from macosui/issue_53

Version 1.7.0

Author: Adrian-Samoticha

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 1.7.0
+- Add `MacosToolbarPassthrough` to allow for the creation of so-called “passthrough views” on the toolbar that relay mouse events to the Flutter application (thanks to [@Andre-lbc](https://github.com/Andre-lbc) and [@adiletcool](https://github.com/adiletcool)).
+
 ## 1.6.1
 
 - Add instructions on how to setup macos_window_utils for macOS Monterey and earlier versions.

README.md

@@ -38,10 +38,11 @@ English | [简体中文](README_zh.md)
 + An `NSAppPresentationOptions` class that allows modifications to the window's fullscreen presentation options.
 + Methods to get and set the positions of the window’s standard window buttons (such as the close, miniaturize, and zoom buttons).
 + Methods to control whether the window should be closable by the user, as well as methods to close the window programmatically.
++ Widgets to enable passthrough views in the toolbar that pass mouse events (such as clicking or dragging) to the Flutter application.
 
 Additionally, the package ships with an example project that showcases the plugin's features via an intuitive searchable user interface:
 
-<img width="857" alt="screenshot of example project" src="https://user-images.githubusercontent.com/86920182/209587744-b21f2cd1-07a4-43ee-99c8-7cce1d89482d.png">
+<img width="855" alt="Screenshot of Example Project" src="https://github.com/user-attachments/assets/32b58d27-6285-45a2-b79d-39bf49013a8f" />
 
 ## Getting started
 

example/.gitignore

@@ -5,9 +5,11 @@
 *.swp
 .DS_Store
 .atom/
+.build/
 .buildlog/
 .history
 .svn/
+.swiftpm/
 migrate_working_dir/
 
 # IntelliJ related

example/lib/generic_widgets/button.dart

@@ -0,0 +1,80 @@
+import 'package:appkit_ui_element_colors/appkit_ui_element_colors.dart';
+import 'package:flutter/material.dart';
+import 'package:gradient_borders/gradient_borders.dart';
+
+class MacosWindowUtilsButton extends StatefulWidget {
+  const MacosWindowUtilsButton(
+      {super.key, this.onPressed, required this.child});
+
+  final VoidCallback? onPressed;
+  final Widget child;
+
+  @override
+  State<MacosWindowUtilsButton> createState() => _MacosWindowUtilsButtonState();
+}
+
+class _MacosWindowUtilsButtonState extends State<MacosWindowUtilsButton> {
+  bool _isPressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: widget.onPressed,
+      onTapDown: (_) => setState(() => _isPressed = true),
+      onTapCancel: () => setState(() => _isPressed = false),
+      onTapUp: (_) => setState(() => _isPressed = false),
+      child: UiElementColorBuilder(
+          uiElementColorContainerInstanceProvider:
+              OwnedUiElementColorContainerInstanceProvider(),
+          builder: (context, colorContainer) {
+            return Opacity(
+              opacity: _isPressed ? 0.9 : 1.0,
+              child: Container(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      colorContainer.controlAccentColor,
+                      Color.fromRGBO(
+                        (colorContainer.controlAccentColor.r * 200).floor(),
+                        (colorContainer.controlAccentColor.g * 200).floor(),
+                        (colorContainer.controlAccentColor.b * 200).floor(),
+                        1.0,
+                      ),
+                    ],
+                  ),
+                  borderRadius: BorderRadius.circular(8.0),
+                  border: const GradientBoxBorder(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        Color.fromRGBO(255, 255, 255, 0.5),
+                        Color.fromRGBO(255, 255, 255, 0.0),
+                        Color.fromRGBO(255, 255, 255, 0.0),
+                        Color.fromRGBO(255, 255, 255, 0.0),
+                      ],
+                    ),
+                    width: 1.7,
+                  ),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Color.fromRGBO(0, 0, 0, 0.4),
+                      blurRadius: 1,
+                      offset: Offset(0, 1),
+                    ),
+                  ],
+                ),
+                child: DefaultTextStyle(
+                  style: const TextStyle(color: Colors.white),
+                  child: widget.child,
+                ),
+              ),
+            );
+          }),
+    );
+  }
+}

example/lib/global_state.dart

@@ -0,0 +1,31 @@
+import 'dart:async';
+
+class GlobalState {
+  static final GlobalState instance = GlobalState();
+
+  final StreamController<GlobalState> _streamController =
+      StreamController<GlobalState>.broadcast();
+
+  Stream<GlobalState> get stream => _streamController.stream;
+
+  bool _isTabExampleEnabled = false;
+
+  /// Whether the tab example is enabled and displayed in the toolbar.
+  bool get isTabExampleEnabled => _isTabExampleEnabled;
+
+  set isTabExampleEnabled(bool value) {
+    _isTabExampleEnabled = value;
+    _streamController.add(this);
+  }
+
+  bool _enableDebugLayersForToolbarPassthroughViews = false;
+
+  /// Whether to enable debug layers for the toolbar passthrough views.
+  bool get enableDebugLayersForToolbarPassthroughViews =>
+      _enableDebugLayersForToolbarPassthroughViews;
+
+  set enableDebugLayersForToolbarPassthroughViews(bool value) {
+    _enableDebugLayersForToolbarPassthroughViews = value;
+    _streamController.add(this);
+  }
+}

example/lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:appkit_ui_element_colors/appkit_ui_element_colors.dart';
+import 'package:example/global_state.dart';
 import 'package:example/main_area/main_area.dart';
 import 'package:example/sidebar_content.dart';
+import 'package:example/toolbar_passthrough_demo/tab_example.dart';
 import 'package:example/util/transparent_sidebar_and_content.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:macos_window_utils/macos_window_utils.dart';
@@ -85,44 +87,54 @@ class _MyHomePageState extends State<MyHomePage> {
 
   @override
   Widget build(BuildContext context) {
-    return TransparentSidebarAndContent(
-      isOpen: _isSidebarOpen,
-      width: 280.0,
-      sidebarBuilder: () => const TitlebarSafeArea(
-        child: SidebarContent(),
-      ),
-      child: TitlebarSafeArea(
-        child: CupertinoPageScaffold(
-          navigationBar: CupertinoNavigationBar(
-            middle: const Text('macos_window_utils demo'),
-            leading: CupertinoButton(
-              padding: EdgeInsets.zero,
-              child: UiElementColorBuilder(
-                  uiElementColorContainerInstanceProvider:
-                      OwnedUiElementColorContainerInstanceProvider(),
-                  builder: (context, colorContainer) {
-                    return Icon(
-                      CupertinoIcons.sidebar_left,
-                      color: colorContainer.controlAccentColor,
-                    );
-                  }),
-              onPressed: () => setState(
-                () {
-                  _isSidebarOpen = !_isSidebarOpen;
-                },
-              ),
+    return StreamBuilder<Object>(
+        stream: GlobalState.instance.stream,
+        builder: (context, snapshot) {
+          return TransparentSidebarAndContent(
+            isOpen: _isSidebarOpen,
+            width: 280.0,
+            sidebarBuilder: () => const TitlebarSafeArea(
+              child: SidebarContent(),
             ),
-          ),
-          child: DefaultTextStyle(
-            style: CupertinoTheme.of(context).textTheme.textStyle,
-            child: SafeArea(
-              child: MainArea(
-                setState: setState,
+            child: TitlebarSafeArea(
+              isEnabled: !GlobalState.instance.isTabExampleEnabled,
+              child: CupertinoPageScaffold(
+                navigationBar: CupertinoNavigationBar(
+                  middle: GlobalState.instance.isTabExampleEnabled
+                      ? const Padding(
+                          padding: EdgeInsets.only(left: 52.0),
+                          child: TabExample(),
+                        )
+                      : const Text('macos_window_utils demo'),
+                  leading: GlobalState.instance.isTabExampleEnabled
+                      ? const SizedBox()
+                      : CupertinoButton(
+                          padding: EdgeInsets.zero,
+                          child: UiElementColorBuilder(
+                              uiElementColorContainerInstanceProvider:
+                                  OwnedUiElementColorContainerInstanceProvider(),
+                              builder: (context, colorContainer) {
+                                return Icon(
+                                  CupertinoIcons.sidebar_left,
+                                  color: colorContainer.controlAccentColor,
+                                );
+                              }),
+                          onPressed: () => setState(
+                            () => _isSidebarOpen = !_isSidebarOpen,
+                          ),
+                        ),
+                ),
+                child: DefaultTextStyle(
+                  style: CupertinoTheme.of(context).textTheme.textStyle,
+                  child: SafeArea(
+                    child: MainArea(
+                      setState: setState,
+                    ),
+                  ),
+                ),
               ),
             ),
-          ),
-        ),
-      ),
-    );
+          );
+        });
   }
 }

example/lib/main_area/main_area.dart

@@ -1,5 +1,6 @@
 import 'package:example/main_area/ns_window_delegate_demo/ns_window_delegate_demo.dart';
 import 'package:example/main_area/window_manipulator_demo/window_manipulator_demo.dart';
+import 'package:example/toolbar_passthrough_demo/toolbar_passthrough_demo.dart';
 import 'package:flutter/cupertino.dart';
 
 class MainArea extends StatefulWidget {
@@ -33,6 +34,7 @@ class _MainAreaState extends State<MainArea> {
                 setState: widget.setState,
               ),
               const NSWindowDelegateDemo(),
+              const ToolbarPassthroughDemo(),
             ],
           ),
         ),
@@ -52,23 +54,32 @@ class _SegmentedControl extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return CupertinoSlidingSegmentedControl(
-      groupValue: currentTabIndex,
-      onValueChanged: onTabIndexChanged,
-      children: const {
-        0: Padding(
-          padding: EdgeInsets.symmetric(horizontal: 20),
-          child: Text(
-            'WindowManipulator demo',
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 20),
+      child: CupertinoSlidingSegmentedControl(
+        groupValue: currentTabIndex,
+        onValueChanged: onTabIndexChanged,
+        children: const {
+          0: Padding(
+            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 4),
+            child: Text(
+              'WindowManipulator demo',
+            ),
           ),
-        ),
-        1: Padding(
-          padding: EdgeInsets.symmetric(horizontal: 20),
-          child: Text(
-            'NSWindowDelegate demo',
+          1: Padding(
+            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 4),
+            child: Text(
+              'NSWindowDelegate demo',
+            ),
           ),
-        ),
-      },
+          2: Padding(
+            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 4),
+            child: Text(
+              'MacosToolbarPassthrough demo',
+            ),
+          ),
+        },
+      ),
     );
   }
 }

example/lib/main_area/window_manipulator_demo/command_list_provider/command_list_provider.dart

@@ -628,7 +628,7 @@ class CommandListProvider {
             buttonType: NSWindowButtonType.closeButton, offset: null),
       ),
       Command(
-        name: 'WindowManipulator.getStandardWindowButtonPosition(buttonType: '
+        name: 'getStandardWindowButtonPosition(buttonType: '
             'NSWindowButtonType.closeButton)',
         description: 'Prints the position of the close button.\n\n'
             '**Note:** The y position is measured as the distance from the '
@@ -639,7 +639,7 @@ class CommandListProvider {
                 .toString()),
       ),
       Command(
-        name: 'WindowManipulator.centerWindow()',
+        name: 'centerWindow()',
         description: 'Sets the window’s location to the center of the screen.'
             '\n\nThe window is placed exactly in the center horizontally and '
             'somewhat above center vertically. Such a placement carries a '
@@ -649,7 +649,7 @@ class CommandListProvider {
         function: () => WindowManipulator.centerWindow(),
       ),
       Command(
-        name: 'WindowManipulator.getWindowFrame()',
+        name: 'getWindowFrame()',
         description: 'Returns the window’s window’s frame rectangle in screen '
             'coordinates, including the title bar.\n\n'
             'Keep in mind that the y-coordinate returned is measured from the '
@@ -658,7 +658,7 @@ class CommandListProvider {
             debugPrint((await WindowManipulator.getWindowFrame()).toString()),
       ),
       Command(
-        name: 'WindowManipulator.setWindowFrame('
+        name: 'setWindowFrame('
             'const Offset(64, 32) & const Size(512, 512),'
             'animate: true)',
         description: 'Sets the window’s frame rectangle in screen coordinates, '
@@ -668,25 +668,25 @@ class CommandListProvider {
             animate: true),
       ),
       Command(
-        name: 'WindowManipulator.preventWindowClosure()',
+        name: 'preventWindowClosure()',
         description: 'Prevents the window from being closed by the user.\n\n'
             'The window will still be closable programmatically by calling '
             '`closeWindow`.',
         function: () => WindowManipulator.preventWindowClosure(),
       ),
       Command(
-        name: 'WindowManipulator.allowWindowClosure()',
+        name: 'allowWindowClosure()',
         description: 'Allows the window to be closed by the user.',
         function: () => WindowManipulator.allowWindowClosure(),
       ),
       Command(
-        name: 'WindowManipulator.isWindowClosureAllowed()',
+        name: 'isWindowClosureAllowed()',
         description: 'Returns whether the window can be closed by the user.',
         function: () async => debugPrint(
             (await WindowManipulator.isWindowClosureAllowed()).toString()),
       ),
       Command(
-        name: 'WindowManipulator.closeWindow()',
+        name: 'closeWindow()',
         description: 'Removes the window from the screen. \n\n'
             'The close method differs in two important ways from the '
             '`performClose` method:\n'
@@ -699,7 +699,7 @@ class CommandListProvider {
         function: () => WindowManipulator.closeWindow(),
       ),
       Command(
-        name: 'WindowManipulator.performClose()',
+        name: 'performClose()',
         description: 'Simulates the user clicking the close button by '
             'momentarily highlighting the button and then closing the window.',
         function: () => WindowManipulator.performClose(),