Fix: use the sidebar and endSidebar key parameter

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [1.12.5]
+* Fixed a bug where the `Sidebar.key` parameter wasn't used, which caused certain layouts to be unachievable.
+
 ## [1.12.4]
 * Default the `_selectedDay` state variable to be 1 when selecting the previous/next month from widget to ensure new date is valid for `_formatAsDateTime()` method (https://github.com/flutter/flutter/issues/123669 & https://github.com/macosui/macos_ui/pull/402)
 

example/pubspec.lock

@@ -97,7 +97,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.12.3"
+    version: "1.12.5"
   matcher:
     dependency: transitive
     description:

lib/src/layout/window.dart

@@ -52,8 +52,8 @@ class MacosWindow extends StatefulWidget {
 }
 
 class _MacosWindowState extends State<MacosWindow> {
-  final _sidebarScrollController = ScrollController();
-  final _endSidebarScrollController = ScrollController();
+  var _sidebarScrollController = ScrollController();
+  var _endSidebarScrollController = ScrollController();
   double _sidebarWidth = 0.0;
   double _sidebarDragStartWidth = 0.0;
   double _sidebarDragStartPosition = 0.0;
@@ -74,39 +74,59 @@ class _MacosWindowState extends State<MacosWindow> {
     _endSidebarWidth =
         (widget.endSidebar?.startWidth ?? widget.endSidebar?.minWidth) ??
             _endSidebarWidth;
-    if (widget.sidebar?.builder != null) {
-      _sidebarScrollController.addListener(() => setState(() {}));
-    }
-    if (widget.endSidebar?.builder != null) {
-      _endSidebarScrollController.addListener(() => setState(() {}));
-    }
+    _addSidebarScrollControllerListenerIfNeeded();
+    _addEndSidebarScrollControllerListenerIfNeeded();
   }
 
   @override
   void didUpdateWidget(covariant MacosWindow old) {
     super.didUpdateWidget(old);
-    if (widget.sidebar == null) {
+    final sidebar = widget.sidebar;
+    if (sidebar == null) {
       _sidebarWidth = 0.0;
-    } else if (widget.sidebar!.minWidth != old.sidebar!.minWidth ||
-        widget.sidebar!.maxWidth != old.sidebar!.maxWidth) {
-      if (widget.sidebar!.minWidth > _sidebarWidth) {
-        _sidebarWidth = widget.sidebar!.minWidth;
+    } else if (sidebar.minWidth != old.sidebar!.minWidth ||
+        sidebar.maxWidth != old.sidebar!.maxWidth) {
+      if (sidebar.minWidth > _sidebarWidth) {
+        _sidebarWidth = sidebar.minWidth;
       }
-      if (widget.sidebar!.maxWidth! < _sidebarWidth) {
-        _sidebarWidth = widget.sidebar!.maxWidth!;
+      if (sidebar.maxWidth! < _sidebarWidth) {
+        _sidebarWidth = sidebar.maxWidth!;
       }
     }
-    if (widget.endSidebar == null) {
+    if (sidebar?.key != old.sidebar?.key) {
+      _sidebarScrollController.dispose();
+      _sidebarScrollController = ScrollController();
+      _addSidebarScrollControllerListenerIfNeeded();
+    }
+    final endSidebar = widget.endSidebar;
+    if (endSidebar == null) {
       _endSidebarWidth = 0.0;
-    } else if (widget.endSidebar!.minWidth != old.endSidebar!.minWidth ||
-        widget.endSidebar!.maxWidth != old.endSidebar!.maxWidth) {
-      if (widget.endSidebar!.minWidth > _endSidebarWidth) {
-        _endSidebarWidth = widget.endSidebar!.minWidth;
+    } else if (endSidebar.minWidth != old.endSidebar!.minWidth ||
+        endSidebar.maxWidth != old.endSidebar!.maxWidth) {
+      if (endSidebar.minWidth > _endSidebarWidth) {
+        _endSidebarWidth = endSidebar.minWidth;
       }
-      if (widget.endSidebar!.maxWidth! < _endSidebarWidth) {
-        _endSidebarWidth = widget.endSidebar!.maxWidth!;
+      if (endSidebar.maxWidth! < _endSidebarWidth) {
+        _endSidebarWidth = endSidebar.maxWidth!;
       }
     }
+    if (endSidebar?.key != old.endSidebar?.key) {
+      _endSidebarScrollController.dispose();
+      _endSidebarScrollController = ScrollController();
+      _addEndSidebarScrollControllerListenerIfNeeded();
+    }
+  }
+
+  void _addSidebarScrollControllerListenerIfNeeded() {
+    if (widget.sidebar?.builder != null) {
+      _sidebarScrollController.addListener(() => setState(() {}));
+    }
+  }
+
+  void _addEndSidebarScrollControllerListenerIfNeeded() {
+    if (widget.endSidebar?.builder != null) {
+      _endSidebarScrollController.addListener(() => setState(() {}));
+    }
   }
 
   @override
@@ -120,13 +140,15 @@ class _MacosWindowState extends State<MacosWindow> {
   // ignore: code-metrics
   Widget build(BuildContext context) {
     assert(debugCheckHasMacosTheme(context));
-    if (widget.sidebar?.startWidth != null) {
-      assert((widget.sidebar!.startWidth! >= widget.sidebar!.minWidth) &&
-          (widget.sidebar!.startWidth! <= widget.sidebar!.maxWidth!));
+    final sidebar = widget.sidebar;
+    final endSidebar = widget.endSidebar;
+    if (sidebar?.startWidth != null) {
+      assert((sidebar!.startWidth! >= sidebar.minWidth) &&
+          (sidebar.startWidth! <= sidebar.maxWidth!));
     }
-    if (widget.endSidebar?.startWidth != null) {
-      assert((widget.endSidebar!.startWidth! >= widget.endSidebar!.minWidth) &&
-          (widget.endSidebar!.startWidth! <= widget.endSidebar!.maxWidth!));
+    if (endSidebar?.startWidth != null) {
+      assert((endSidebar!.startWidth! >= endSidebar.minWidth) &&
+          (endSidebar.startWidth! <= endSidebar.maxWidth!));
     }
     final MacosThemeData theme = MacosTheme.of(context);
     late Color backgroundColor = widget.backgroundColor ?? theme.canvasColor;
@@ -137,8 +159,8 @@ class _MacosWindowState extends State<MacosWindow> {
     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!;
+    if (sidebar?.decoration?.color != null) {
+      sidebarBackgroundColor = sidebar!.decoration!.color!;
     } else if (isMac &&
         MediaQuery.of(context).platformBrightness.isDark ==
             theme.brightness.isDark) {
@@ -154,8 +176,8 @@ class _MacosWindowState extends State<MacosWindow> {
     }
 
     // Respect the end sidebar color override from parent if one is given
-    if (widget.endSidebar?.decoration?.color != null) {
-      endSidebarBackgroundColor = widget.endSidebar!.decoration!.color!;
+    if (endSidebar?.decoration?.color != null) {
+      endSidebarBackgroundColor = endSidebar!.decoration!.color!;
     } else if (isMac &&
         MediaQuery.of(context).platformBrightness.isDark ==
             theme.brightness.isDark) {
@@ -173,9 +195,8 @@ class _MacosWindowState extends State<MacosWindow> {
       builder: (context, constraints) {
         final width = constraints.maxWidth;
         final height = constraints.maxHeight;
-        final isAtBreakpoint = width <= (widget.sidebar?.windowBreakpoint ?? 0);
-        final isAtEndBreakpoint =
-            width <= (widget.endSidebar?.windowBreakpoint ?? 0);
+        final isAtBreakpoint = width <= (sidebar?.windowBreakpoint ?? 0);
+        final isAtEndBreakpoint = width <= (endSidebar?.windowBreakpoint ?? 0);
         final canShowSidebar = _showSidebar && !isAtBreakpoint;
         final canShowEndSidebar = _showEndSidebar && !isAtEndBreakpoint;
         final visibleSidebarWidth = canShowSidebar ? _sidebarWidth : 0.0;
@@ -195,8 +216,9 @@ class _MacosWindowState extends State<MacosWindow> {
             ),
 
             // Sidebar
-            if (widget.sidebar != null)
+            if (sidebar != null)
               AnimatedPositioned(
+                key: sidebar.key,
                 curve: curve,
                 duration: duration,
                 height: height,
@@ -206,39 +228,39 @@ class _MacosWindowState extends State<MacosWindow> {
                   curve: Curves.easeInOut,
                   color: sidebarBackgroundColor,
                   constraints: BoxConstraints(
-                    minWidth: widget.sidebar!.minWidth,
-                    maxWidth: widget.sidebar!.maxWidth!,
+                    minWidth: sidebar.minWidth,
+                    maxWidth: sidebar.maxWidth!,
                     minHeight: height,
                     maxHeight: height,
                   ).normalize(),
                   child: Column(
                     children: [
-                      if ((widget.sidebar?.topOffset ?? 0) > 0)
-                        SizedBox(height: widget.sidebar?.topOffset),
+                      if (sidebar.topOffset > 0)
+                        SizedBox(height: sidebar.topOffset),
                       if (_sidebarScrollController.hasClients &&
                           _sidebarScrollController.offset > 0.0)
                         Divider(thickness: 1, height: 1, color: dividerColor),
-                      if (widget.sidebar!.top != null &&
-                          constraints.maxHeight > 81)
+                      if (sidebar.top != null && constraints.maxHeight > 81)
                         Padding(
                           padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                          child: widget.sidebar!.top!,
+                          child: sidebar.top!,
                         ),
                       Expanded(
                         child: MacosScrollbar(
                           controller: _sidebarScrollController,
                           child: Padding(
-                            padding: widget.sidebar?.padding ?? EdgeInsets.zero,
-                            child: widget.sidebar!
-                                .builder(context, _sidebarScrollController),
+                            padding: sidebar.padding,
+                            child: sidebar.builder(
+                              context,
+                              _sidebarScrollController,
+                            ),
                           ),
                         ),
                       ),
-                      if (widget.sidebar?.bottom != null &&
-                          constraints.maxHeight > 141)
+                      if (sidebar.bottom != null && constraints.maxHeight > 141)
                         Padding(
                           padding: const EdgeInsets.all(16.0),
-                          child: widget.sidebar!.bottom!,
+                          child: sidebar.bottom!,
                         ),
                     ],
                   ),
@@ -273,7 +295,7 @@ class _MacosWindowState extends State<MacosWindow> {
             ),
 
             // Sidebar resizer
-            if (widget.sidebar?.isResizable ?? false)
+            if (sidebar?.isResizable ?? false)
               AnimatedPositioned(
                 curve: curve,
                 duration: duration,
@@ -287,13 +309,12 @@ class _MacosWindowState extends State<MacosWindow> {
                     _sidebarDragStartPosition = details.globalPosition.dx;
                   },
                   onHorizontalDragUpdate: (details) {
-                    final sidebar = widget.sidebar!;
                     setState(() {
                       var newWidth = _sidebarDragStartWidth +
                           details.globalPosition.dx -
                           _sidebarDragStartPosition;
 
-                      if (sidebar.startWidth != null &&
+                      if (sidebar!.startWidth != null &&
                           sidebar.snapToStartBuffer != null &&
                           (newWidth - sidebar.startWidth!).abs() <=
                               sidebar.snapToStartBuffer!) {
@@ -338,8 +359,9 @@ class _MacosWindowState extends State<MacosWindow> {
               ),
 
             // End sidebar
-            if (widget.endSidebar != null)
+            if (endSidebar != null)
               AnimatedPositioned(
+                key: endSidebar.key,
                 left: width - visibleEndSidebarWidth,
                 curve: curve,
                 duration: duration,
@@ -350,46 +372,47 @@ class _MacosWindowState extends State<MacosWindow> {
                   curve: Curves.easeInOut,
                   color: endSidebarBackgroundColor,
                   constraints: BoxConstraints(
-                    minWidth: widget.endSidebar!.minWidth,
-                    maxWidth: widget.endSidebar!.maxWidth!,
+                    minWidth: endSidebar.minWidth,
+                    maxWidth: endSidebar.maxWidth!,
                     minHeight: height,
                     maxHeight: height,
                   ).normalize(),
                   child: Column(
                     children: [
-                      if ((widget.endSidebar?.topOffset ?? 0) > 0)
-                        SizedBox(height: widget.endSidebar?.topOffset),
+                      if (endSidebar.topOffset > 0)
+                        SizedBox(height: endSidebar.topOffset),
                       if (_endSidebarScrollController.hasClients &&
                           _endSidebarScrollController.offset > 0.0)
                         Divider(thickness: 1, height: 1, color: dividerColor),
-                      if (widget.endSidebar!.top != null)
+                      if (endSidebar.top != null)
                         Padding(
                           padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                          child: widget.endSidebar!.top!,
+                          child: endSidebar.top!,
                         ),
                       Expanded(
                         child: MacosScrollbar(
                           controller: _endSidebarScrollController,
                           child: Padding(
-                            padding:
-                                widget.endSidebar?.padding ?? EdgeInsets.zero,
-                            child: widget.endSidebar!
-                                .builder(context, _endSidebarScrollController),
+                            padding: endSidebar.padding,
+                            child: endSidebar.builder(
+                              context,
+                              _endSidebarScrollController,
+                            ),
                           ),
                         ),
                       ),
-                      if (widget.endSidebar?.bottom != null)
+                      if (endSidebar.bottom != null)
                         Padding(
                           padding: const EdgeInsets.all(16.0),
-                          child: widget.endSidebar!.bottom!,
+                          child: endSidebar.bottom!,
                         ),
                     ],
                   ),
                 ),
               ),
 
             // End sidebar resizer
-            if (widget.endSidebar?.isResizable ?? false)
+            if (endSidebar?.isResizable ?? false)
               AnimatedPositioned(
                 curve: curve,
                 duration: duration,
@@ -403,13 +426,12 @@ class _MacosWindowState extends State<MacosWindow> {
                     _endSidebarDragStartPosition = details.globalPosition.dx;
                   },
                   onHorizontalDragUpdate: (details) {
-                    final endSidebar = widget.endSidebar!;
                     setState(() {
                       var newWidth = _endSidebarDragStartWidth -
                           details.globalPosition.dx +
                           _endSidebarDragStartPosition;
 
-                      if (endSidebar.startWidth != null &&
+                      if (endSidebar!.startWidth != null &&
                           endSidebar.snapToStartBuffer != null &&
                           (newWidth + endSidebar.startWidth!).abs() <=
                               endSidebar.snapToStartBuffer!) {

pubspec.yaml

@@ -1,6 +1,6 @@
 name: macos_ui
 description: Flutter widgets and themes implementing the current macOS design language.
-version: 1.12.4
+version: 1.12.5
 homepage: "https://macosui.dev"
 repository: "https://github.com/GroovinChip/macos_ui"