Fix: use the sidebar and endSidebar key parameter (#400)

* Fix: use the `sidebard` and `endSidebar` key parameter

- pass sidebar key to the sidebar root widget (`AnimatedPositioned`)
- create a new sidebar `ScrollController` when the key is change

* Increment version and update changelog

* Apply suggestions from code review

* Update pubspec.lock file in example

---------

Co-authored-by: Reuben Turner <[email protected]>

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"