Version 1.7.0: MacosImageIcon & sidebar updates

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.7.0]
+* ✨ New
+  * `MacosImageIcon` widget. Identical to the `ImageIcon` from `flutter/widgets.dart` except it will obey a 
+`MacosIconThemeData` instead of an `IconThemeData`
+  * `SidebarItemSize` enum, which determines the height of sidebar items and the maximum size their `leading` widgets.
+  * `SidebarItem` now accepts an optional `trailing` widget.
+* 🔄 Updated
+  * `SidebarItems` now supports `SidebarItemSize` via the `itemSize` property, which defaults to 
+`SidebarItemSize.medium`. The widget has been updated to manage the item's height, the maximum size of the item's 
+leading widget, and the font size of the item's label widget according to the given `SidebarItemSize`.
+  * The example app has been tweaked to use some icons from the SF Symbols 4 Beta via the new `MacosImageIcon` widget.
+
 ## [1.6.0]
 * New widgets: `MacosTabView` and `MacosTabView`
 * BREAKING CHANGE: `Label.yAxis` has been renamed to `Label.crossAxisAlignment`

example/lib/main.dart

@@ -176,47 +176,77 @@ class _WidgetGalleryState extends State<WidgetGallery> {
               currentIndex: pageIndex,
               onChanged: (i) => setState(() => pageIndex = i),
               scrollController: controller,
-              items: const [
-                SidebarItem(
-                  leading: MacosIcon(CupertinoIcons.square_on_circle),
+              itemSize: SidebarItemSize.large,
+              items: [
+                const SidebarItem(
+                  // leading: MacosIcon(CupertinoIcons.square_on_circle),
+                  leading: MacosImageIcon(
+                    AssetImage(
+                      'assets/sf_symbols/button_programmable_2x.png',
+                    ),
+                  ),
                   label: Text('Buttons'),
                 ),
-                SidebarItem(
-                  leading: MacosIcon(CupertinoIcons.arrow_2_circlepath),
+                const SidebarItem(
+                  leading: MacosImageIcon(
+                    AssetImage(
+                      'assets/sf_symbols/lines_measurement_horizontal_2x.png',
+                    ),
+                  ),
                   label: Text('Indicators'),
                 ),
-                SidebarItem(
-                  leading: MacosIcon(CupertinoIcons.textbox),
+                const SidebarItem(
+                  leading: MacosImageIcon(
+                    AssetImage(
+                      'assets/sf_symbols/character_cursor_ibeam_2x.png',
+                    ),
+                  ),
                   label: Text('Fields'),
                 ),
                 SidebarItem(
-                  leading: Icon(CupertinoIcons.folder),
-                  label: Text('Disclosure'),
+                  leading: const MacosIcon(CupertinoIcons.folder),
+                  label: const Text('Disclosure'),
+                  trailing: Text(
+                    '2',
+                    style: TextStyle(
+                      color: MacosTheme.brightnessOf(context) == Brightness.dark
+                          ? MacosColors.tertiaryLabelColor.darkColor
+                          : MacosColors.tertiaryLabelColor,
+                    ),
+                  ),
                   disclosureItems: [
-                    SidebarItem(
-                      leading: MacosIcon(CupertinoIcons.infinite),
+                    const SidebarItem(
+                      leading: MacosImageIcon(
+                        AssetImage(
+                          'assets/sf_symbols/rectangle_3_group_2x.png',
+                        ),
+                      ),
                       label: Text('Colors'),
                     ),
-                    SidebarItem(
+                    const SidebarItem(
                       leading: MacosIcon(CupertinoIcons.infinite),
                       label: Text('Item 3'),
                     ),
                   ],
                 ),
-                SidebarItem(
-                  leading: MacosIcon(CupertinoIcons.rectangle),
+                const SidebarItem(
+                  leading: MacosIcon(CupertinoIcons.square_on_square),
                   label: Text('Dialogs & Sheets'),
                 ),
-                SidebarItem(
+                const SidebarItem(
                   leading: MacosIcon(CupertinoIcons.macwindow),
                   label: Text('Toolbar'),
                 ),
-                SidebarItem(
-                  leading: MacosIcon(CupertinoIcons.calendar),
+                const SidebarItem(
+                  leading: MacosImageIcon(
+                    AssetImage(
+                      'assets/sf_symbols/filemenu_and_selection_2x.png',
+                    ),
+                  ),
                   label: Text('Selectors'),
                 ),
-                SidebarItem(
-                  leading: MacosIcon(CupertinoIcons.table_fill),
+                const SidebarItem(
+                  leading: MacosIcon(CupertinoIcons.uiwindow_split_2x1),
                   label: Text('TabView'),
                 ),
               ],

example/pubspec.lock

@@ -49,7 +49,7 @@ packages:
       name: cupertino_icons
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   fake_async:
     dependency: transitive
     description:
@@ -87,7 +87,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.6.0"
+    version: "1.7.0"
   matcher:
     dependency: transitive
     description:
@@ -129,7 +129,7 @@ packages:
       name: provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.2"
+    version: "6.0.3"
   sky_engine:
     dependency: transitive
     description: flutter

example/pubspec.yaml

@@ -10,12 +10,16 @@ dependencies:
   flutter:
     sdk: flutter
 
-  cupertino_icons: ^1.0.4
+  cupertino_icons: ^1.0.5
   macos_ui:
     path: ..
-  provider: ^6.0.2
+  provider: ^6.0.3
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
   flutter_lints: ^2.0.1
+
+flutter:
+  assets:
+    - assets/sf_symbols/

lib/macos_ui.dart

@@ -30,6 +30,7 @@ export 'src/buttons/toolbar/toolbar_pulldown_button.dart';
 export 'src/dialogs/macos_alert_dialog.dart';
 export 'src/fields/search_field.dart';
 export 'src/fields/text_field.dart';
+export 'src/icon/image_icon.dart';
 export 'src/icon/macos_icon.dart';
 export 'src/indicators/capacity_indicators.dart';
 export 'src/indicators/progress_indicators.dart';

lib/src/icon/image_icon.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:macos_ui/macos_ui.dart';
+
+/// {@template macosImageIcon}
+/// An icon that comes from an [ImageProvider], e.g. an [AssetImage].
+///
+/// The [size] and [color] default to the value given by the current [MacosIconTheme].
+///
+/// See also:
+///  * [MacosIconButton], for interactive icons.
+///  * [MacosIconTheme], which provides ambient configuration for icons.
+///  * [MacosIcon], for icons based on glyphs from fonts instead of images.
+/// {@endtemplate}
+class MacosImageIcon extends StatelessWidget {
+  /// {@macro macosImageIcon}
+  const MacosImageIcon(
+    this.image, {
+    super.key,
+    this.size,
+    this.color,
+    this.semanticLabel,
+  });
+
+  /// The image to display as the icon.
+  ///
+  /// The icon can be null, in which case the widget will render as an empty
+  /// space of the specified [size].
+  final ImageProvider? image;
+
+  /// The size of the icon in logical pixels.
+  ///
+  /// Icons occupy a square with width and height equal to size.
+  ///
+  /// Defaults to the current [MacosIconTheme] size, if any. If there is no
+  /// [MacosIconTheme], or it does not specify an explicit size, then it
+  /// defaults to 24.0.
+  final double? size;
+
+  /// The color to use when drawing the icon.
+  ///
+  /// Defaults to the current [MacosIconTheme] color, if any. If there is
+  /// no [MacosIconTheme], then it defaults to not recolorizing the image.
+  ///
+  /// The image will be additionally adjusted by the opacity of the current
+  /// [MacosIconTheme], if any.
+  final Color? color;
+
+  /// Semantic label for the icon.
+  ///
+  /// Announced in accessibility modes (e.g TalkBack/VoiceOver).
+  /// This label does not show in the UI.
+  ///
+  ///  * [SemanticsProperties.label], which is set to [semanticLabel] in the
+  ///    underlying	 [Semantics] widget.
+  final String? semanticLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    final iconTheme = MacosIconTheme.of(context);
+    final iconSize = size ?? iconTheme.size;
+
+    if (image == null) {
+      return Semantics(
+        label: semanticLabel,
+        child: SizedBox(width: iconSize, height: iconSize),
+      );
+    }
+
+    final iconOpacity = iconTheme.opacity;
+    Color iconColor = color ?? iconTheme.color!;
+
+    if (iconOpacity != null && iconOpacity != 1.0) {
+      iconColor = iconColor.withOpacity(iconColor.opacity * iconOpacity);
+    }
+
+    return Semantics(
+      label: semanticLabel,
+      child: Image(
+        image: image!,
+        width: iconSize,
+        height: iconSize,
+        color: iconColor,
+        fit: BoxFit.scaleDown,
+        excludeFromSemantics: true,
+      ),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DiagnosticsProperty<ImageProvider>(
+      'image',
+      image,
+      ifNull: '<empty>',
+      showName: false,
+    ));
+    properties.add(DoubleProperty('size', size, defaultValue: null));
+    properties.add(ColorProperty('color', color, defaultValue: null));
+  }
+}

lib/src/layout/sidebar/sidebar_item.dart

@@ -19,6 +19,7 @@ class SidebarItem with Diagnosticable {
     this.focusNode,
     this.semanticLabel,
     this.disclosureItems,
+    this.trailing,
   });
 
   /// The widget before [label].
@@ -57,6 +58,13 @@ class SidebarItem with Diagnosticable {
   /// If non-null and [leading] is null, a local animated icon is created
   final List<SidebarItem>? disclosureItems;
 
+  /// An optional trailing widget.
+  ///
+  /// Typically a text indicator of a count of items, like in this
+  /// screenshots from the Apple Notes app:
+  /// {@image <img src="https://imgur.com/REpW9f9.png" height="88" width="219" />}
+  final Widget? trailing;
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
@@ -69,5 +77,6 @@ class SidebarItem with Diagnosticable {
       'disclosure items',
       disclosureItems,
     ));
+    properties.add(DiagnosticsProperty<Widget?>('trailing', trailing));
   }
 }