Version 0.0.2

CHANGELOG.md

@@ -1,3 +1,10 @@
-## [0.0.1] - TODO: Add release date.
+## [0.0.2]
+* `Scaffold` widget
+* Fix `Typography` so that text color is shown appropriately based on Brightness
 
-* TODO: Describe initial release.
+## [0.0.1]
+
+* Project creation
+  * `MacosApp` widget
+  * Basic `Typography`
+  * Basic theming via `MacosTheme` and `Style`

README.md

@@ -3,12 +3,21 @@
 Implements Apple's macOS Design System in Flutter. Based on the official documentation.
 
 ## Content
-* [Resources](#Resources)
-* TODO [Usage](#Usage)
-* TODO [Layout](#Layout)
-* TODO [Style](#Style)
+- [macos_ui](#macos_ui)
+  - [Content](#content)
+  - [Resources](#resources)
+- [Layout](#layout)
+  - [Scaffold](#scaffold)
 
 ## Resources
 
 * [macOS Design Resources](https://developer.apple.com/design/resources/)
-* [macOS Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos)
+* [macOS Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos)
+
+# Layout
+## Scaffold
+`Scaffold` provides a basic structure for laying out widgets in a way you would expect on macOS. You must specify a `body` as the main content area, and you can optionally provide a `sidebar` that will show to the left of `body`. The `sidebar` can be resized by grabbing the split and dragging left or right. See the documentation for all customization options.
+
+<img src="https://imgur.com/e41j2aT.jpg" width="75%"/>
+
+<img src="https://imgur.com/jTPXGuq.gif" width="75%"/>

example/lib/main.dart

@@ -7,7 +7,6 @@ void main() {
 }
 
 class MyApp extends StatelessWidget {
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return ChangeNotifierProvider(
@@ -37,10 +36,14 @@ class Demo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      sidebar: Center(
+        child: Text('Sidebar'),
+      ),
+      //sidebarBreakpoint: 500,
       body: Center(
         child: Container(
-          height: 50,
-          width: 50,
+          height: 50.0,
+          width: 50.0,
           color: context.theme.accentColor,
         ),
       ),

example/pubspec.lock

@@ -121,6 +121,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  split_view:
+    dependency: transitive
+    description:
+      name: split_view
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.4"
   stack_trace:
     dependency: transitive
     description:

lib/src/layout/scaffold.dart

@@ -1,45 +1,118 @@
 import 'package:macos_ui/macos_ui.dart';
+import 'package:split_view/split_view.dart'; //todo: fork and migrate to nnbd
 
-/// Experimental
+/// A basic screen-layout widget.
+///
+/// Provides a [body] for main content and a [sidebar] for secondary content
+/// (like navigation buttons). If no [sidebar] is specified, only the [body]
+/// will be shown.
 class Scaffold extends StatelessWidget {
   const Scaffold({
     Key? key,
-    this.left,
-    this.body,
+    required this.body,
+    this.sidebar,
     this.backgroundColor,
-  }) : super(key: key);
+    this.sidebarBackgroundColor,
+    this.sidebarGripColor,
+    this.splitOffset = 0.25,
+    this.sidebarGripSize = 0.80,
+    this.resizeBoundary = 20.0,
+    this.sidebarBreakpoint = 0.0,
+  })  : assert(splitOffset > 0.0 && splitOffset < 1.0),
+        super(key: key);
 
+  /// Main content area.
+  final Widget body;
+
+  /// Secondary content area.
+  final Widget? sidebar;
+
+  /// Background color for the [body].
   final Color? backgroundColor;
-  final Widget? left;
-  final Widget? body;
+
+  /// Background color for the [sidebar]
+  final Color? sidebarBackgroundColor;
+
+  /// The color of the body/sidebar splitter
+  final Color? sidebarGripColor;
+
+  /// Determines where the split between [body] and [sidebar] occurs.
+  ///
+  /// If specified, it must be a value greater than 0.0 and less than 1.0.
+  ///
+  /// Defaults to `0.25`, which is 1/4 of the available space from the left.
+  final double splitOffset;
+
+  /// The width of the split between [body] and [sidebar].
+  ///
+  /// Defaults to 0.80, which seems to be the default in Apple's macOS apps
+  /// (I eyeballed this so it's not perfect but it's very close).
+  final double? sidebarGripSize;
+
+  /// Defines an area to which [sidebar] cannot be expanded or shrunk past on
+  /// the left and right.
+  final double? resizeBoundary;
+
+  /// Defines a breakpoint for showing and hiding the [sidebar].
+  ///
+  /// If the window is resized along its width to a value below this one, the
+  /// sidebar will be hidden. If resized back above this value, the sidebar
+  /// will be shown again.
+  ///
+  /// Defaults to `0.0`, which means the sidebar will always be shown.
+  final double? sidebarBreakpoint;
 
   @override
   Widget build(BuildContext context) {
     debugCheckHasMacosTheme(context);
+
     final style = context.theme;
-    late Color color;
+    late Color bodyColor;
+    late Color sidebarColor;
+    late Color gripColor;
+
     if (style.brightness == Brightness.light) {
-      color = backgroundColor ?? CupertinoColors.systemBackground.color;
+      bodyColor = backgroundColor ?? CupertinoColors.systemBackground.color;
+      sidebarColor =
+          sidebarBackgroundColor ?? CupertinoColors.tertiarySystemBackground;
+      gripColor = sidebarGripColor ?? CupertinoColors.systemFill;
     } else {
-      color = backgroundColor ?? CupertinoColors.systemGrey4.darkColor;
+      bodyColor =
+          backgroundColor ?? CupertinoColors.systemBackground.darkElevatedColor;
+      sidebarColor = sidebarBackgroundColor ??
+          CupertinoColors.tertiarySystemBackground.darkColor;
+      gripColor = sidebarGripColor ?? CupertinoColors.black;
     }
+
     return AnimatedContainer(
       duration: style.mediumAnimationDuration ?? Duration.zero,
       curve: style.animationCurve ?? Curves.linear,
-      color: color,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          if (this.left != null) left!,
-          Expanded(
-            child: Column(
-              children: [
-                if (body != null) Expanded(child: body!),
-              ],
-            ),
-          ),
-        ],
-      ),
+      color: bodyColor,
+      child: sidebar != null
+          ? LayoutBuilder(
+              builder: (context, constraints) {
+                print(constraints.maxWidth);
+                if (constraints.maxWidth > sidebarBreakpoint!) {
+                  return SplitView(
+                    positionLimit: resizeBoundary,
+                    initialWeight: splitOffset,
+                    gripSize: sidebarGripSize,
+                    gripColor: gripColor,
+                    view1: AnimatedContainer(
+                      duration: style.mediumAnimationDuration ?? Duration.zero,
+                      curve: style.animationCurve ?? Curves.linear,
+                      color: sidebarColor,
+                      child: sidebar,
+                    ),
+                    view2: body,
+                    viewMode: SplitViewMode.Horizontal,
+                  );
+                } else {
+                  return body;
+                }
+              },
+            )
+          : body,
     );
   }
 }

lib/src/styles/typography.dart

@@ -71,57 +71,68 @@ class Typography with Diagnosticable {
         fontFamily: 'SanFranciscoPro',
         fontSize: 26,
         height: 32,
+        color: color,
       ),
       title1: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 22,
         height: 26,
+        color: color,
       ),
       title2: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 17,
         height: 22,
+        color: color,
       ),
       title3: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 15,
         height: 20,
+        color: color,
       ),
       headline: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontWeight: FontWeight.bold,
         fontSize: 13,
         height: 16,
+        color: color,
       ),
       subheadline: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 11,
         height: 14,
+        color: color,
       ),
       body: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 13,
         height: 16,
+        color: color,
       ),
       callout: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 12,
         height: 15,
+        color: color,
       ),
       footnote: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 10,
         height: 13,
+        color: color,
       ),
       caption1: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 10,
         height: 13,
+        color: color,
       ),
       caption2: TextStyle(
         fontFamily: 'SanFranciscoPro',
         fontSize: 10,
         height: 13,
+        color: color,
       ),
     );
   }

pubspec.lock

@@ -93,6 +93,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  split_view:
+    dependency: "direct main"
+    description:
+      name: split_view
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.4"
   stack_trace:
     dependency: transitive
     description:

pubspec.yaml

@@ -1,6 +1,6 @@
 name: macos_ui
 description: Implements Apple's macOS Design System in Flutter. Based on the official documentation.
-version: 0.0.1
+version: 0.0.2
 homepage: 'https://github.com/GroovinChip/macos_ui'
 
 environment:
@@ -9,6 +9,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+
+  split_view: ^1.0.4
 
 dev_dependencies:
   flutter_test: