Version 1.7.0 (#282)

* Sidebar top (#244) * chore: refactor dir structure * feat: Sidebar top & updated default control color * feat(example): search results in top * chore: bump version, changelog * chore: run flutter pub upgrade * Update CHANGELOG.md * Update lib/src/layout/sidebar/sidebar.dart Co-authored-by: Minas Giannekas <whiplashoo@users.noreply.github.com> * chore: update issue templates * chore: update pr_prelaunch script * Flutter 3 upgrade & MacosColor update (#248) * chore: Update pubspec.yaml files to support Flutter 3 * chore: run dart fix --apply * chore: migrate Scrollbar to Flutter 3 * chore: update flutter_lints & subsequent fixes * feat: add missing functions to MacosColor the Color class has a number of functions that MacosColor had not implemented * chore: use super parameters * chore: update changelog * chore: tweak example app Uses the new PlatformMenuBar. Also update product name. * chore: small changelog tweak * chore: run flutter format . * chore: run dart fix --apply * chore: run flutter format . * chore: remove unused code in example * chore: remove unused import * chore: remove unused code * Starter app (#251) * chore: Update pubspec.yaml files to support Flutter 3 * chore: run dart fix --apply * chore: migrate Scrollbar to Flutter 3 * chore: update flutter_lints & subsequent fixes * feat: add missing functions to MacosColor the Color class has a number of functions that MacosColor had not implemented * chore: use super parameters * chore: update changelog * chore: tweak example app Uses the new PlatformMenuBar. Also update product name. * chore: small changelog tweak * chore: run flutter format . * chore: run dart fix --apply * chore: run flutter format . * chore: remove unused code in example * chore: remove unused import * feat: first pass at starter app brick * chore: improve starter app brick * chore: fix widget test in starter app * feat: conditional prompts & running pub get * chore: finalize brick * chore: run flutter format * chore: exclude starter app from analyzer * Full screen opaque toolbar issue (closes #249) (#252) * fix: don't show app window toolbar when in full screen * chore: update README * chore: update brick app window code * chore: update pubspec and changelog * chore: update actions Co-authored-by: Reuben Turner <groovinchip@gmail.com> * Version 1.4.1 (#255) * Sidebar top (#244) * chore: refactor dir structure * feat: Sidebar top & updated default control color * feat(example): search results in top * chore: bump version, changelog * chore: run flutter pub upgrade * Update CHANGELOG.md * Update lib/src/layout/sidebar/sidebar.dart Co-authored-by: Minas Giannekas <whiplashoo@users.noreply.github.com> * chore: update issue templates * chore: update pr_prelaunch script * Flutter 3 upgrade & MacosColor update (#248) * chore: Update pubspec.yaml files to support Flutter 3 * chore: run dart fix --apply * chore: migrate Scrollbar to Flutter 3 * chore: update flutter_lints & subsequent fixes * feat: add missing functions to MacosColor the Color class has a number of functions that MacosColor had not implemented * chore: use super parameters * chore: update changelog * chore: tweak example app Uses the new PlatformMenuBar. Also update product name. * chore: small changelog tweak * chore: run flutter format . * chore: run dart fix --apply * chore: run flutter format . * chore: remove unused code in example * chore: remove unused import * chore: remove unused code * Starter app (#251) * chore: Update pubspec.yaml files to support Flutter 3 * chore: run dart fix --apply * chore: migrate Scrollbar to Flutter 3 * chore: update flutter_lints & subsequent fixes * feat: add missing functions to MacosColor the Color class has a number of functions that MacosColor had not implemented * chore: use super parameters * chore: update changelog * chore: tweak example app Uses the new PlatformMenuBar. Also update product name. * chore: small changelog tweak * chore: run flutter format . * chore: run dart fix --apply * chore: run flutter format . * chore: remove unused code in example * chore: remove unused import * feat: first pass at starter app brick * chore: improve starter app brick * chore: fix widget test in starter app * feat: conditional prompts & running pub get * chore: finalize brick * chore: run flutter format * chore: exclude starter app from analyzer * Full screen opaque toolbar issue (closes #249) (#252) * fix: don't show app window toolbar when in full screen * chore: update README * chore: update brick app window code * chore: update pubspec and changelog * chore: update actions Co-authored-by: Reuben Turner <groovinchip@gmail.com> Co-authored-by: Minas Giannekas <whiplashoo@users.noreply.github.com> * chore: repository, homepage fields * chore: update readme * feat(starter_app): Version 1.1.0 * feat(starter_app): multi-window support * feat: starter_app 1.2.1 * chore: move brick to its own repo & go back to old pana action * Expand remaining part of row in MacosListTile (#265) * Expand remaining part of row #264 * Increment to version 1.4.2 * End sidebar (#267) * chore: add missing trailing comma * chore: improve MacosIconButton animation curve * chore: remove false_secrets from pubspec.yaml * feat: end sidebar Also fixes the tests portion of the pr_prelaunch_tasks script * feat: add "isEndSidebarShown" to MacosWindowScope * fix: Correct the placement of the leading widget in disclosure sidebar items (#272) * chore: Update changelog * test: fix issues with date_picker_test * Account for cases where the month and the day are the same * Fix offstage warnings by removing tester taps that disabled the caret controls * Update Actions (#279) * Update flutter_analysis.yml * Update dart_code_metrics.yaml * Update gh_pages.yml * Update pana_analysis.yml * Update codecov.yaml * fix syntax issue * Version 1.6.0 - `MacosTabView` & `MacosSegmentedControl` (#273) * feat: MacosTabView & MacosSegmentedControl * chore: fixup scripts * test: tests for segmented control & tab view * chore: remove unused code * chore: run flutter format . * chore: bump code metrics * docs: dartdoc updates * docs: fix a documentation error * chore: run flutter format . * refactor: make active property of MacosTab optional, since it is handled via MacosSegmentedControl * chore: fix import change * refactor: change colors to match default native app design * docs: update tab view screenshot in readme * chore: update README example for MacosTabView * chore: fix typo in MacosSegmentedControl * chore: fix typo in MacosSegmentedControl docstring * test: remove explicitly setting active property of MacosTabs Co-authored-by: Minas Giannekas <whiplashoo721@gmail.com> * Version 1.7.0: `MacosImageIcon` & sidebar updates (#274) * feat: MacosTabView & MacosSegmentedControl * chore: fixup scripts * test: tests for segmented control & tab view * chore: remove unused code * chore: run flutter format . * chore: bump code metrics * docs: dartdoc updates * docs: fix a documentation error * chore: run flutter format . * feat: MacosImageIcon & sidebar updates * test: fix issues with date_picker_test * Account for cases where the month and the day are the same * Fix offstage warnings by removing tester taps that disabled the caret controls * refactor: make active property of MacosTab optional, since it is handled via MacosSegmentedControl * chore: fix import change * refactor: change colors to match default native app design * docs: update tab view screenshot in readme * chore: fix README * test: fix date picker test Co-authored-by: Minas Giannekas <whiplashoo721@gmail.com> Co-authored-by: Minas Giannekas <whiplashoo@users.noreply.github.com> Co-authored-by: Jon Saw <jon.saw@gmail.com> Co-authored-by: Minas Giannekas <whiplashoo721@gmail.com>
macosui · Jul 10, 2022 · 77d7c0e · 77d7c0e
1 parent 692cb3d
commit 77d7c0e
Show file tree

Hide file tree

Showing 15 changed files with 283 additions and 37 deletions.
diff --git a/CHANGELOG.md b/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`

diff --git a/example/assets/sf_symbols/button_programmable_2x.png b/example/assets/sf_symbols/button_programmable_2x.png
diff --git a/example/assets/sf_symbols/character_cursor_ibeam_2x.png b/example/assets/sf_symbols/character_cursor_ibeam_2x.png
diff --git a/example/assets/sf_symbols/filemenu_and_selection_2x.png b/example/assets/sf_symbols/filemenu_and_selection_2x.png
diff --git a/example/assets/sf_symbols/lines_measurement_horizontal_2x.png b/example/assets/sf_symbols/lines_measurement_horizontal_2x.png
diff --git a/example/assets/sf_symbols/rectangle_3_group_2x.png b/example/assets/sf_symbols/rectangle_3_group_2x.png
diff --git a/example/lib/main.dart b/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'),
                 ),
               ],

diff --git a/example/pubspec.lock b/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

diff --git a/example/pubspec.yaml b/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/
diff --git a/lib/macos_ui.dart b/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';

diff --git a/lib/src/icon/image_icon.dart b/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));
+  }
+}
diff --git a/lib/src/layout/sidebar/sidebar_item.dart b/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));
   }
 }