Sidebar top

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.3.0]
+* Add a `top` property to `Sidebar`
+* Tweak the default `primaryColor` value in `MacosThemeData`.
+
 ## [1.2.1+1]
 * Fix `MacosApp` documentation
 

example/lib/main.dart

@@ -51,6 +51,8 @@ class _DemoState extends State<Demo> {
 
   int pageIndex = 0;
 
+  late final searchFieldController = TextEditingController();
+
   final List<Widget> pages = [
     CupertinoTabView(
       builder: (_) => const ButtonsPage(),
@@ -80,6 +82,67 @@ class _DemoState extends State<Demo> {
       //   title: Text('macOS App Name'),
       // ),
       sidebar: Sidebar(
+        top: MacosSearchField(
+          placeholder: 'Search',
+          controller: searchFieldController,
+          onResultSelected: (result) {
+            switch (result.searchKey) {
+              case 'Buttons':
+                setState(() {
+                  pageIndex = 0;
+                  searchFieldController.clear();
+                });
+                break;
+              case 'Indicators':
+                setState(() {
+                  pageIndex = 1;
+                  searchFieldController.clear();
+                });
+                break;
+              case 'Fields':
+                setState(() {
+                  pageIndex = 2;
+                  searchFieldController.clear();
+                });
+                break;
+              case 'Colors':
+                setState(() {
+                  pageIndex = 3;
+                  searchFieldController.clear();
+                });
+                break;
+              case 'Dialogs and Sheets':
+                setState(() {
+                  pageIndex = 5;
+                  searchFieldController.clear();
+                });
+                break;
+              case 'Toolbar':
+                setState(() {
+                  pageIndex = 6;
+                  searchFieldController.clear();
+                });
+                break;
+              case 'Selectors':
+                setState(() {
+                  pageIndex = 7;
+                  searchFieldController.clear();
+                });
+                break;
+              default:
+                searchFieldController.clear();
+            }
+          },
+          results: const [
+            SearchResultItem('Buttons'),
+            SearchResultItem('Indicators'),
+            SearchResultItem('Fields'),
+            SearchResultItem('Colors'),
+            SearchResultItem('Dialogs and Sheets'),
+            SearchResultItem('Toolbar'),
+            SearchResultItem('Selectors'),
+          ],
+        ),
         minWidth: 200,
         builder: (context, controller) {
           return SidebarItems(
@@ -127,13 +190,10 @@ class _DemoState extends State<Demo> {
             ],
           );
         },
-        bottom: const Padding(
-          padding: EdgeInsets.all(16.0),
-          child: MacosListTile(
-            leading: MacosIcon(CupertinoIcons.profile_circled),
-            title: Text('Tim Apple'),
-            subtitle: Text('tim@apple.com'),
-          ),
+        bottom: const MacosListTile(
+          leading: MacosIcon(CupertinoIcons.profile_circled),
+          title: Text('Tim Apple'),
+          subtitle: Text('tim@apple.com'),
         ),
       ),
     );

example/macos/Podfile.lock

@@ -19,4 +19,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 6eac6b3292e5142cfc23bdeb71848a40ec51c14c
 
-COCOAPODS: 1.10.2
+COCOAPODS: 1.11.3

example/pubspec.lock

@@ -87,7 +87,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.2.1+1"
+    version: "1.3.0"
   matcher:
     dependency: transitive
     description:

lib/macos_ui.dart

@@ -37,8 +37,9 @@ export 'src/layout/content_area.dart';
 export 'src/layout/macos_list_tile.dart';
 export 'src/layout/resizable_pane.dart';
 export 'src/layout/scaffold.dart';
-export 'src/layout/sidebar.dart';
-export 'src/layout/sidebar_item.dart';
+export 'src/layout/sidebar/sidebar.dart';
+export 'src/layout/sidebar/sidebar_item.dart';
+export 'src/layout/sidebar/sidebar_items.dart';
 export 'src/layout/title_bar.dart';
 export 'src/layout/toolbar/custom_toolbar_item.dart';
 export 'src/layout/toolbar/toolbar.dart';

lib/src/layout/scaffold.dart

@@ -3,7 +3,7 @@ import 'dart:math' as math;
 import 'package:flutter/rendering.dart';
 import 'package:macos_ui/src/layout/content_area.dart';
 import 'package:macos_ui/src/layout/resizable_pane.dart';
-import 'package:macos_ui/src/layout/sidebar.dart';
+import 'package:macos_ui/src/layout/sidebar/sidebar.dart';
 import 'package:macos_ui/src/layout/title_bar.dart';
 import 'package:macos_ui/src/layout/toolbar/toolbar.dart';
 import 'package:macos_ui/src/layout/window.dart';

lib/src/layout/sidebar.dart → lib/src/layout/sidebar/sidebar.dart

@@ -20,6 +20,7 @@ class Sidebar {
     this.startWidth,
     this.padding = EdgeInsets.zero,
     this.windowBreakpoint = 556.0,
+    this.top,
     this.bottom,
     this.topOffset = 51.0,
   }) : dragClosedBuffer = dragClosedBuffer ?? minWidth / 2;
@@ -96,7 +97,14 @@ class Sidebar {
   /// Specifies the width of the window at which this [Sidebar] will be hidden.
   final double windowBreakpoint;
 
-  /// Widget that should be displayed at the Bottom of the Sidebar
+  /// Widget that should be displayed at the top of the [Sidebar].
+  ///
+  /// Commonly a [MacosSearchField].
+  final Widget? top;
+
+  /// Widget that should be displayed at the bottom of the [Sidebar].
+  ///
+  /// Commonly a [MacosListTile].
   final Widget? bottom;
 
   /// Specifies the top offset of the sidebar.

lib/src/layout/sidebar/sidebar_item.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/foundation.dart';
+import 'package:macos_ui/macos_ui.dart';
+import 'package:macos_ui/src/library.dart';
+
+/// A macOS style navigation-list item intended for use in a [Sidebar]
+///
+/// See also:
+///
+///  * [Sidebar], a side bar used alongside [MacosScaffold]
+///  * [SidebarItems], the widget that displays [SidebarItem]s vertically
+class SidebarItem with Diagnosticable {
+  /// Creates a sidebar item.
+  const SidebarItem({
+    this.leading,
+    required this.label,
+    this.selectedColor,
+    this.unselectedColor,
+    this.shape,
+    this.focusNode,
+    this.semanticLabel,
+    this.disclosureItems,
+  });
+
+  /// The widget before [label].
+  ///
+  /// Typically an [Icon]
+  final Widget? leading;
+
+  /// Indicates what content this widget represents.
+  ///
+  /// Typically a [Text]
+  final Widget label;
+
+  /// The color to paint this widget as when selected.
+  ///
+  /// If null, [MacosThemeData.primaryColor] is used.
+  final Color? selectedColor;
+
+  /// The color to paint this widget as when unselected.
+  ///
+  /// Defaults to transparent.
+  final Color? unselectedColor;
+
+  /// The [shape] property specifies the outline (border) of the
+  /// decoration. The shape must not be null. It's used alonside
+  /// [selectedColor].
+  final ShapeBorder? shape;
+
+  /// The focus node used by this item.
+  final FocusNode? focusNode;
+
+  /// The semantic label used by screen readers.
+  final String? semanticLabel;
+
+  /// The disclosure items. If null, there will be no disclosure items.
+  ///
+  /// If non-null and [leading] is null, a local animated icon is created
+  final List<SidebarItem>? disclosureItems;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(ColorProperty('selectedColor', selectedColor));
+    properties.add(ColorProperty('unselectedColor', unselectedColor));
+    properties.add(StringProperty('semanticLabel', semanticLabel));
+    properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape));
+    properties.add(DiagnosticsProperty<FocusNode>('focusNode', focusNode));
+    properties.add(IterableProperty<SidebarItem>(
+      'disclosure items',
+      disclosureItems,
+    ));
+  }
+}