0.8.0 - MacosSheet and MacosListTile

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
 

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

example/lib/main.dart

@@ -125,7 +125,7 @@ class _DemoState extends State<Demo> {
               ),
               const SidebarItem(
                 leading: Icon(CupertinoIcons.rectangle),
-                label: Text('Dialogs'),
+                label: Text('Dialogs and Sheets'),
               ),
             ],
           );

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);
@@ -174,6 +175,17 @@ class _DialogsPageState extends State<DialogsPage> {
                       ),
                     ),
                   ),
+                  const SizedBox(height: 16),
+                  PushButton(
+                    buttonSize: ButtonSize.large,
+                    child: const Text('Show sheet'),
+                    onPressed: () {
+                      showMacosSheet(
+                        context: context,
+                        builder: (_) => const MacosuiSheet(),
+                      );
+                    },
+                  ),
                 ],
               ),
             ),
@@ -211,3 +223,57 @@ class _DoNotNotifyRowState extends State<DoNotNotifyRow> {
     );
   }
 }
+
+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),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                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,
+                            ),
+                  ),
+                ),
+              ],
+            ),
+            const Spacer(),
+            PushButton(
+              buttonSize: ButtonSize.large,
+              child: const Text('Dismiss'),
+              onPressed: () => Navigator.of(context).pop(),
+            ),
+            const SizedBox(height: 50),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/macos_ui.dart

@@ -27,13 +27,15 @@ 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';
 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';

lib/src/layout/macos_list_tile.dart

@@ -0,0 +1,40 @@
+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,
+    required this.title,
+    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
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (leading != null) leading!,
+        const SizedBox(width: 8),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            title,
+            if (subtitle != null) subtitle!,
+          ],
+        ),
+      ],
+    );
+  }
+}

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';