From 2e653a9cc7ce12fb233b52def35894127826e18a Mon Sep 17 00:00:00 2001 From: GroovinChip Date: Sun, 10 Oct 2021 15:53:46 -0400 Subject: [PATCH 01/11] feat: add macos_sheet.dart Also export a few more things from library.dart --- example/lib/main.dart | 2 +- example/lib/pages/dialogs_page.dart | 15 ++ lib/macos_ui.dart | 1 + lib/src/library.dart | 2 + lib/src/sheets/macos_sheet.dart | 226 ++++++++++++++++++++++++++++ 5 files changed, 245 insertions(+), 1 deletion(-) create mode 100644 lib/src/sheets/macos_sheet.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index bad91756..76d7a457 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -125,7 +125,7 @@ class _DemoState extends State { ), const SidebarItem( leading: Icon(CupertinoIcons.rectangle), - label: Text('Dialogs'), + label: Text('Dialogs and Sheets'), ), ], ); diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index df954951..bacf9154 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/example/lib/pages/dialogs_page.dart @@ -174,6 +174,21 @@ class _DialogsPageState extends State { ), ), ), + const SizedBox(height: 16), + PushButton( + buttonSize: ButtonSize.large, + child: const Text('Show sheet'), + onPressed: () { + showMacosSheet( + context: context, + builder: (_) => const MacosSheet( + child: Center( + child: Text('Test'), + ), + ), + ); + }, + ), ], ), ), diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart index 1bcd04e9..e0a1254f 100644 --- a/lib/macos_ui.dart +++ b/lib/macos_ui.dart @@ -34,6 +34,7 @@ export 'src/layout/sidebar_item.dart'; export 'src/layout/title_bar.dart'; export 'src/layout/window.dart'; export 'src/macos_app.dart'; +export 'src/sheets/macos_sheet.dart'; export 'src/theme/macos_colors.dart'; export 'src/theme/macos_dynamic_color.dart'; export 'src/theme/macos_theme.dart'; diff --git a/lib/src/library.dart b/lib/src/library.dart index 0906a133..3eb2d145 100644 --- a/lib/src/library.dart +++ b/lib/src/library.dart @@ -21,6 +21,8 @@ export 'package:flutter/material.dart' SelectableText, VisualDensity, Colors, + MaterialLocalizations, + Dialog, kElevationToShadow; export 'package:flutter/widgets.dart'; export 'util.dart'; diff --git a/lib/src/sheets/macos_sheet.dart b/lib/src/sheets/macos_sheet.dart new file mode 100644 index 00000000..689f0e42 --- /dev/null +++ b/lib/src/sheets/macos_sheet.dart @@ -0,0 +1,226 @@ +import 'package:flutter/physics.dart'; +import 'package:macos_ui/macos_ui.dart'; +import 'package:macos_ui/src/library.dart'; + +const _kSheetBorderRadius = BorderRadius.all(Radius.circular(12.0)); +const EdgeInsets _defaultInsetPadding = EdgeInsets.symmetric(horizontal: 80.0, vertical: 48.0); + +class MacosSheet extends StatelessWidget { + const MacosSheet({ + Key? key, + required this.child, + this.insetPadding = _defaultInsetPadding, + this.insetAnimationDuration = const Duration(milliseconds: 100), + this.insetAnimationCurve = Curves.decelerate, + }) : super(key: key); + + final Widget child; + final EdgeInsets? insetPadding; + final Duration insetAnimationDuration; + final Curve insetAnimationCurve; + + @override + Widget build(BuildContext context) { + assert(debugCheckHasMacosTheme(context)); + final brightness = MacosTheme.brightnessOf(context); + + final outerBorderColor = brightness.resolve( + Colors.black.withOpacity(0.23), + Colors.black.withOpacity(0.76), + ); + + final innerBorderColor = brightness.resolve( + Colors.white.withOpacity(0.45), + Colors.white.withOpacity(0.15), + ); + + final EdgeInsets effectivePadding = MediaQuery.of(context).viewInsets + (insetPadding ?? EdgeInsets.zero); + + return AnimatedPadding( + padding: effectivePadding, + duration: insetAnimationDuration, + curve: insetAnimationCurve, + child: DecoratedBox( + decoration: BoxDecoration( + color: brightness.resolve( + CupertinoColors.systemGrey6.color, + MacosColors.controlBackgroundColor.darkColor, + ), + ), + child: Container( + decoration: BoxDecoration( + border: Border.all( + width: 2, + color: innerBorderColor, + ), + borderRadius: _kSheetBorderRadius, + ), + foregroundDecoration: BoxDecoration( + border: Border.all( + width: 1, + color: outerBorderColor, + ), + borderRadius: _kSheetBorderRadius, + ), + child: child, + ), + ), + ); + + /*return Dialog( + backgroundColor: brightness.resolve( + CupertinoColors.systemGrey6.color, + MacosColors.controlBackgroundColor.darkColor, + ), + shape: const RoundedRectangleBorder( + borderRadius: _kSheetBorderRadius, + ), + child: Container( + decoration: BoxDecoration( + border: Border.all( + width: 2, + color: innerBorderColor, + ), + borderRadius: _kSheetBorderRadius, + ), + foregroundDecoration: BoxDecoration( + border: Border.all( + width: 1, + color: outerBorderColor, + ), + borderRadius: _kSheetBorderRadius, + ), + child: child, + ), + );*/ + } +} + +/// Displays a [MacosSheet] above the current application. +Future showMacosSheet({ + required BuildContext context, + required WidgetBuilder builder, + bool barrierDismissible = true, + Color? barrierColor, + String? barrierLabel, + bool useRootNavigator = true, + RouteSettings? routeSettings, +}) { + barrierColor ??= MacosDynamicColor.resolve( + MacosColors.controlBackgroundColor, + context, + ).withOpacity(0.6); + + return Navigator.of(context, rootNavigator: useRootNavigator).push( + _MacosSheetRoute( + settings: routeSettings, + pageBuilder: (context, animation, secondaryAnimation) { + return builder(context); + }, + barrierDismissible: barrierDismissible, + barrierColor: barrierColor, + barrierLabel: barrierLabel ?? + MaterialLocalizations.of(context).modalBarrierDismissLabel, + ), + ); +} + +class _MacosSheetRoute extends PopupRoute { + _MacosSheetRoute({ + required RoutePageBuilder pageBuilder, + bool barrierDismissible = false, + Color? barrierColor = const Color(0x80000000), + String? barrierLabel, + RouteSettings? settings, + }) : _pageBuilder = pageBuilder, + _barrierDismissible = barrierDismissible, + _barrierLabel = barrierLabel, + _barrierColor = barrierColor, + super(settings: settings); + + final RoutePageBuilder _pageBuilder; + + @override + bool get barrierDismissible => _barrierDismissible; + final bool _barrierDismissible; + + @override + String? get barrierLabel => _barrierLabel; + final String? _barrierLabel; + + @override + Color? get barrierColor => _barrierColor; + final Color? _barrierColor; + + @override + Curve get barrierCurve => Curves.linear; + + @override + Duration get transitionDuration => const Duration(milliseconds: 450); + + @override + Duration get reverseTransitionDuration => const Duration(milliseconds: 120); + + @override + Widget buildPage( + BuildContext context, + Animation animation, + Animation secondaryAnimation, + ) { + return Semantics( + scopesRoute: true, + explicitChildNodes: true, + child: _pageBuilder(context, animation, secondaryAnimation), + ); + } + + @override + Widget buildTransitions( + BuildContext context, + Animation animation, + Animation secondaryAnimation, + Widget child, + ) { + if (animation.status == AnimationStatus.reverse) { + return FadeTransition( + opacity: CurvedAnimation( + parent: animation, + curve: Curves.easeOutSine, + ), + child: child, + ); + } + return ScaleTransition( + scale: CurvedAnimation( + parent: animation, + curve: _SubtleBounceCurve(), + ), + child: FadeTransition( + opacity: CurvedAnimation( + parent: animation, + curve: Curves.fastLinearToSlowEaseIn, + ), + child: child, + ), + ); + } +} + +class _SubtleBounceCurve extends Curve { + _SubtleBounceCurve(); + + @override + double transform(double t) { + final simulation = SpringSimulation( + const SpringDescription( + damping: 14, + mass: 1.4, + stiffness: 180, + ), + 0.0, + 1.0, + 0.1, + ); + return simulation.x(t) + t * (1 - simulation.x(1.0)); + } +} From cd7554b12a67a898b0ffc231954b413cb6328747 Mon Sep 17 00:00:00 2001 From: GroovinChip Date: Sun, 10 Oct 2021 15:57:46 -0400 Subject: [PATCH 02/11] feat: make MacosSheet non-barrier dismissible, per HIG --- example/lib/pages/dialogs_page.dart | 8 ++++++-- lib/src/sheets/macos_sheet.dart | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index bacf9154..0d266874 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/example/lib/pages/dialogs_page.dart @@ -181,9 +181,13 @@ class _DialogsPageState extends State { onPressed: () { showMacosSheet( context: context, - builder: (_) => const MacosSheet( + builder: (_) => MacosSheet( child: Center( - child: Text('Test'), + child: PushButton( + buttonSize: ButtonSize.small, + child: const Text('Dismiss'), + onPressed: () => Navigator.of(context).pop(), + ), ), ), ); diff --git a/lib/src/sheets/macos_sheet.dart b/lib/src/sheets/macos_sheet.dart index 689f0e42..59b4cded 100644 --- a/lib/src/sheets/macos_sheet.dart +++ b/lib/src/sheets/macos_sheet.dart @@ -5,6 +5,7 @@ import 'package:macos_ui/src/library.dart'; const _kSheetBorderRadius = BorderRadius.all(Radius.circular(12.0)); const EdgeInsets _defaultInsetPadding = EdgeInsets.symmetric(horizontal: 80.0, vertical: 48.0); +/// class MacosSheet extends StatelessWidget { const MacosSheet({ Key? key, @@ -100,7 +101,7 @@ class MacosSheet extends StatelessWidget { Future showMacosSheet({ required BuildContext context, required WidgetBuilder builder, - bool barrierDismissible = true, + bool barrierDismissible = false, Color? barrierColor, String? barrierLabel, bool useRootNavigator = true, From f3dc275aa2401f616f70eb9c87eacea65b899ce4 Mon Sep 17 00:00:00 2001 From: GroovinChip Date: Sun, 10 Oct 2021 16:03:52 -0400 Subject: [PATCH 03/11] docs: add documentation to macos_sheet.dart --- lib/src/sheets/macos_sheet.dart | 47 ++++++++++++--------------------- 1 file changed, 17 insertions(+), 30 deletions(-) diff --git a/lib/src/sheets/macos_sheet.dart b/lib/src/sheets/macos_sheet.dart index 59b4cded..9bd04be6 100644 --- a/lib/src/sheets/macos_sheet.dart +++ b/lib/src/sheets/macos_sheet.dart @@ -3,9 +3,11 @@ import 'package:macos_ui/macos_ui.dart'; import 'package:macos_ui/src/library.dart'; const _kSheetBorderRadius = BorderRadius.all(Radius.circular(12.0)); -const EdgeInsets _defaultInsetPadding = EdgeInsets.symmetric(horizontal: 80.0, vertical: 48.0); +const EdgeInsets _defaultInsetPadding = + EdgeInsets.symmetric(horizontal: 80.0, vertical: 48.0); -/// +/// A modal dialog that’s attached to a particular window and prevents further +/// interaction with the window until the sheet is dismissed. class MacosSheet extends StatelessWidget { const MacosSheet({ Key? key, @@ -15,9 +17,20 @@ class MacosSheet extends StatelessWidget { this.insetAnimationCurve = Curves.decelerate, }) : super(key: key); + /// The widget below this widget in the tree. final Widget child; + + /// The amount of padding added to [MediaQueryData.viewInsets] on the outside + /// of the dialog. This defines the minimum space between the screen's edges + /// and the dialog. final EdgeInsets? insetPadding; + + /// The duration of the animation to show when the system keyboard intrudes + /// into the space that the dialog is placed in. final Duration insetAnimationDuration; + + /// The curve to use for the animation shown when the system keyboard intrudes + /// into the space that the dialog is placed in. final Curve insetAnimationCurve; @override @@ -35,7 +48,8 @@ class MacosSheet extends StatelessWidget { Colors.white.withOpacity(0.15), ); - final EdgeInsets effectivePadding = MediaQuery.of(context).viewInsets + (insetPadding ?? EdgeInsets.zero); + final EdgeInsets effectivePadding = + MediaQuery.of(context).viewInsets + (insetPadding ?? EdgeInsets.zero); return AnimatedPadding( padding: effectivePadding, @@ -67,33 +81,6 @@ class MacosSheet extends StatelessWidget { ), ), ); - - /*return Dialog( - backgroundColor: brightness.resolve( - CupertinoColors.systemGrey6.color, - MacosColors.controlBackgroundColor.darkColor, - ), - shape: const RoundedRectangleBorder( - borderRadius: _kSheetBorderRadius, - ), - child: Container( - decoration: BoxDecoration( - border: Border.all( - width: 2, - color: innerBorderColor, - ), - borderRadius: _kSheetBorderRadius, - ), - foregroundDecoration: BoxDecoration( - border: Border.all( - width: 1, - color: outerBorderColor, - ), - borderRadius: _kSheetBorderRadius, - ), - child: child, - ), - );*/ } } From 067ffc8f851cb176f8a9ec7f7058df9738c2caa5 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 09:53:26 -0400 Subject: [PATCH 04/11] chore: tweak default sheet padding --- lib/src/sheets/macos_sheet.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/sheets/macos_sheet.dart b/lib/src/sheets/macos_sheet.dart index 9bd04be6..250f7828 100644 --- a/lib/src/sheets/macos_sheet.dart +++ b/lib/src/sheets/macos_sheet.dart @@ -4,7 +4,7 @@ import 'package:macos_ui/src/library.dart'; const _kSheetBorderRadius = BorderRadius.all(Radius.circular(12.0)); const EdgeInsets _defaultInsetPadding = - EdgeInsets.symmetric(horizontal: 80.0, vertical: 48.0); + EdgeInsets.symmetric(horizontal: 140.0, vertical: 48.0); /// A modal dialog that’s attached to a particular window and prevents further /// interaction with the window until the sheet is dismissed. From eac2030b8786befcc378acb14be185bdeaf4fa34 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 10:14:38 -0400 Subject: [PATCH 05/11] chore: tweak dialogs demo page --- example/lib/pages/dialogs_page.dart | 45 +++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index 0d266874..996dd8d6 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/example/lib/pages/dialogs_page.dart @@ -181,15 +181,7 @@ class _DialogsPageState extends State { onPressed: () { showMacosSheet( context: context, - builder: (_) => MacosSheet( - child: Center( - child: PushButton( - buttonSize: ButtonSize.small, - child: const Text('Dismiss'), - onPressed: () => Navigator.of(context).pop(), - ), - ), - ), + builder: (_) => const MacosuiSheet(), ); }, ), @@ -230,3 +222,38 @@ class _DoNotNotifyRowState extends State { ); } } + +class MacosuiSheet extends StatelessWidget { + const MacosuiSheet({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MacosSheet( + child: Center( + child: Column( + children: [ + const SizedBox(height: 50), + const FlutterLogo( + size: 56, + ), + const SizedBox(height: 24), + Text( + 'Welcome to macos_ui', + style: MacosTheme.of(context) + .typography + .largeTitle.copyWith( + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(height: 24), + PushButton( + buttonSize: ButtonSize.large, + child: const Text('Dismiss'), + onPressed: () => Navigator.of(context).pop(), + ), + ], + ), + ), + ); + } +} From e6abb5f0856ce202704577b29d5d7f3583b362c9 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 10:25:40 -0400 Subject: [PATCH 06/11] feat: add MacosListTile --- example/lib/pages/dialogs_page.dart | 22 +++++++++++++++----- lib/macos_ui.dart | 1 + lib/src/layout/macos_list_tile.dart | 32 +++++++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 lib/src/layout/macos_list_tile.dart diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index 996dd8d6..237e436d 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/example/lib/pages/dialogs_page.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:macos_ui/macos_ui.dart'; +import 'package:macos_ui/src/library.dart'; class DialogsPage extends StatefulWidget { const DialogsPage({Key? key}) : super(key: key); @@ -239,18 +240,29 @@ class MacosuiSheet extends StatelessWidget { const SizedBox(height: 24), Text( 'Welcome to macos_ui', - style: MacosTheme.of(context) - .typography - .largeTitle.copyWith( - fontWeight: FontWeight.bold, - ), + style: MacosTheme.of(context).typography.largeTitle.copyWith( + fontWeight: FontWeight.bold, + ), ), const SizedBox(height: 24), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const MacosListTile( + leading: Icon(CupertinoIcons.lightbulb), + title: Text( + 'A robust library of Flutter components for macOS', + ), + ), + ], + ), + const Spacer(), PushButton( buttonSize: ButtonSize.large, child: const Text('Dismiss'), onPressed: () => Navigator.of(context).pop(), ), + const SizedBox(height: 50), ], ), ), diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart index e0a1254f..42109cc8 100644 --- a/lib/macos_ui.dart +++ b/lib/macos_ui.dart @@ -27,6 +27,7 @@ export 'src/indicators/scrollbar.dart'; export 'src/labels/label.dart'; export 'src/labels/tooltip.dart'; 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'; diff --git a/lib/src/layout/macos_list_tile.dart b/lib/src/layout/macos_list_tile.dart new file mode 100644 index 00000000..83780074 --- /dev/null +++ b/lib/src/layout/macos_list_tile.dart @@ -0,0 +1,32 @@ +import 'package:macos_ui/macos_ui.dart'; +import 'package:macos_ui/src/library.dart'; + +class MacosListTile extends StatelessWidget { + const MacosListTile({ + Key? key, + this.leading, + required this.title, + this.subtitle, + }) : super(key: key); + + final Widget? leading; + final Widget title; + final Widget? subtitle; + + @override + Widget build(BuildContext context) { + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (leading != null) leading!, + const SizedBox(width: 8), + Column( + children: [ + title, + if (subtitle != null) subtitle!, + ], + ), + ], + ); + } +} From 1cc4af1b184edbd4c3bfd94e5d2708e28dcaae34 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 10:27:04 -0400 Subject: [PATCH 07/11] chore: update version and CHANGELOG.md --- CHANGELOG.md | 4 ++++ pubspec.yaml | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4fa1607..5e64e6bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## [0.8.0] +* New Widget: `MacoSheet` +* New Widget: `MacosListTile` + ## [0.7.3] * Fixed bug where cursor would not change caret location on mouse click diff --git a/pubspec.yaml b/pubspec.yaml index 89d7b670..073e5b10 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: macos_ui description: Flutter widgets and themes implementing the current macOS design language. -version: 0.7.3 +version: 0.8.0 homepage: "https://github.com/GroovinChip/macos_ui" environment: From b92d5e2b41eb0af4a07cf352de78894dab2a47e0 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 10:34:39 -0400 Subject: [PATCH 08/11] docs: add docs for MacosListTile --- lib/src/layout/macos_list_tile.dart | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/lib/src/layout/macos_list_tile.dart b/lib/src/layout/macos_list_tile.dart index 83780074..c46403e7 100644 --- a/lib/src/layout/macos_list_tile.dart +++ b/lib/src/layout/macos_list_tile.dart @@ -1,7 +1,9 @@ -import 'package:macos_ui/macos_ui.dart'; import 'package:macos_ui/src/library.dart'; +/// A widget that aims to approximate the [ListTile] widget found in +/// Flutter's material library. class MacosListTile extends StatelessWidget { + /// Builds a [MacosListTile]. const MacosListTile({ Key? key, this.leading, @@ -9,8 +11,13 @@ class MacosListTile extends StatelessWidget { this.subtitle, }) : super(key: key); + /// A widget to display before the [title]. final Widget? leading; + + /// The primary content of the list tile. final Widget title; + + /// Additional content displayed below the [title]. final Widget? subtitle; @override @@ -21,6 +28,7 @@ class MacosListTile extends StatelessWidget { if (leading != null) leading!, const SizedBox(width: 8), Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ title, if (subtitle != null) subtitle!, From c953853574ac674d7a109b4e0714491001b939e0 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 10:51:07 -0400 Subject: [PATCH 09/11] chore: update sheet, listtile demo with better styling --- example/lib/pages/dialogs_page.dart | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index 237e436d..725afbb9 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/example/lib/pages/dialogs_page.dart @@ -248,10 +248,17 @@ class MacosuiSheet extends StatelessWidget { Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - const MacosListTile( - leading: Icon(CupertinoIcons.lightbulb), + MacosListTile( + leading: const Icon(CupertinoIcons.lightbulb), title: Text( 'A robust library of Flutter components for macOS', + style: MacosTheme.of(context).typography.headline, + ), + subtitle: Text( + 'Create native looking macOS applications using Flutter', + style: MacosTheme.of(context).typography.subheadline.copyWith( + color: MacosColors.systemGrayColor, + ), ), ), ], From 7e0533f6189083fe6f0c0d64c5347db94c9c2798 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 11:00:41 -0400 Subject: [PATCH 10/11] chore: update README.md with new widgets --- README.md | 44 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 41 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 81b06367..71d59c73 100644 --- a/README.md +++ b/README.md @@ -15,14 +15,16 @@ Flutter widgets and themes implementing the current macOS design language. - [Layout](#layout) - [MacosWindow](#macoswindow) - [MacosScaffold](#macosscaffold) + - [MacosListTile](#MacosListTile) - [Buttons](#buttons) - [MacosCheckbox](#macoscheckbox) - [HelpButton](#helpbutton) - [RadioButton](#radiobutton) - [PushButton](#pushbutton) - [MacosSwitch](#macosswitch) -- [Dialogs](#dialogs) +- [Dialogs and Sheets](#dialogs) - [MacosAlertDialog](#MacosAlertDialog) + - [MacosSheet](#MacosSheet) - [Fields](#fields) - [MacosTextField](#macostextfield) - [Labels](#labels) @@ -111,6 +113,30 @@ class MainFlutterWindow: NSWindow { ``` +## MacosListTile + +A widget that aims to approximate the [ListTile] widget found in +Flutter's material library. + +![MacosListTile](https://imgur.com/pQB99M2.png) + +Usage: +```dart +MacosListTile( + leading: const Icon(CupertinoIcons.lightbulb), + title: Text( + 'A robust library of Flutter components for macOS', + style: MacosTheme.of(context).typography.headline, + ), + subtitle: Text( + 'Create native looking macOS applications using Flutter', + style: MacosTheme.of(context).typography.subheadline.copyWith( + color: MacosColors.systemGrayColor, + ), + ), +), +``` + # Buttons ## MacosCheckbox @@ -217,13 +243,13 @@ MacosSwitch( ), ``` -# Dialogs +# Dialogs and Sheets ## MacosAlertDialog Usage: ```dart -showDialog( +showMacosAlertDialog( context: context, builder: (_) => MacosAlertDialog( appIcon: FlutterLogo( @@ -251,6 +277,18 @@ showDialog( ![](https://imgur.com/YHtgv59.png) ![](https://imgur.com/xuBR5qK.png) +## MacosSheet + +Usage: +```dart +showMacosSheet( + context: context, + builder: (_) => const MacosuiSheet(), +); +``` + +![](https://imgur.com/NV0o5Ws.png) + # Fields ## MacosTextField From 9ed70da52da48e156da4789a23c820f21bb6db64 Mon Sep 17 00:00:00 2001 From: groovinchip Date: Mon, 11 Oct 2021 11:03:14 -0400 Subject: [PATCH 11/11] chore: run flutter format --- example/lib/pages/dialogs_page.dart | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/example/lib/pages/dialogs_page.dart b/example/lib/pages/dialogs_page.dart index 725afbb9..222b134e 100644 --- a/example/lib/pages/dialogs_page.dart +++ b/example/lib/pages/dialogs_page.dart @@ -256,9 +256,10 @@ class MacosuiSheet extends StatelessWidget { ), subtitle: Text( 'Create native looking macOS applications using Flutter', - style: MacosTheme.of(context).typography.subheadline.copyWith( - color: MacosColors.systemGrayColor, - ), + style: + MacosTheme.of(context).typography.subheadline.copyWith( + color: MacosColors.systemGrayColor, + ), ), ), ],