Scaffold

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.0.10]
+* Revamp `Scaffold` [#26] (https://github.com/GroovinChip/macos_ui/issues/26)
+
 ## [0.0.9+1]
 * `CapacityIndicator` colors can now be set on its constructor
 * Accessibility support for most of the widgets

example/lib/main.dart

@@ -34,58 +34,77 @@ class Demo extends StatefulWidget {
 }
 
 class _DemoState extends State<Demo> {
-  bool value = false;
-
-  double sliderValue = 0;
   double ratingValue = 0;
+  double sliderValue = 0;
+  bool value = false;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      sidebar: Center(
-        child: Text('Sidebar'),
-      ),
-      body: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        children: [
-          PushButton(
-            buttonSize: ButtonSize.small,
-            child: Text('Button'),
-            onPressed: () {},
-          ),
-          RadioButton(
-            value: value,
-            onChanged: (v) => setState(() => value = v),
-          ),
-          Checkbox(
-            value: value,
-            onChanged: (v) => setState(() => value = v),
-          ),
-          HelpButton(
-            onPressed: () {},
-          ),
-          Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: CapacityIndicator(
-              value: sliderValue,
-              onChanged: (v) => setState(() => sliderValue = v),
-              discrete: true,
-            ),
-          ),
-          Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: CapacityIndicator(
-              value: sliderValue,
-              onChanged: (v) => setState(() => sliderValue = v),
-            ),
-          ),
-          RatingIndicator(
-            value: ratingValue,
-            onChanged: (v) => setState(() => ratingValue = v),
-          ),
-          RelevanceIndicator(value: 10),
-        ],
+      titleBar: TitleBar(child: Text("Titlebar")),
+      sidebar: Sidebar(
+        minWidth: 200,
+        builder: (context, _) => Center(child: Text("Sidebar")),
       ),
+      children: <Widget>[
+        ContentArea(
+          builder: (context, scrollController) {
+            return SingleChildScrollView(
+              controller: scrollController,
+              padding: EdgeInsets.all(20),
+              child: Column(
+                children: [
+                  PushButton(
+                    buttonSize: ButtonSize.small,
+                    child: Text('Button'),
+                    onPressed: () => ScaffoldScope.of(context).toggleSidebar(),
+                  ),
+                  SizedBox(height: 20),
+                  RadioButton(
+                    value: value,
+                    onChanged: (v) => setState(() => value = v),
+                  ),
+                  SizedBox(height: 20),
+                  Checkbox(
+                    value: value,
+                    onChanged: (v) => setState(() => value = v),
+                  ),
+                  SizedBox(height: 20),
+                  HelpButton(
+                    onPressed: () {},
+                  ),
+                  SizedBox(height: 20),
+                  CapacityIndicator(
+                    value: sliderValue,
+                    onChanged: (v) => setState(() => sliderValue = v),
+                    discrete: true,
+                  ),
+                  SizedBox(height: 20),
+                  CapacityIndicator(
+                    value: sliderValue,
+                    onChanged: (v) => setState(() => sliderValue = v),
+                  ),
+                  SizedBox(height: 20),
+                  RatingIndicator(
+                    value: ratingValue,
+                    onChanged: (v) => setState(() => ratingValue = v),
+                  ),
+                  SizedBox(height: 20),
+                  RelevanceIndicator(value: 10),
+                ],
+              ),
+            );
+          },
+        ),
+        ResizablePane(
+          minWidth: 300,
+          scaffoldBreakpoint: 400,
+          resizableSide: ResizableSide.left,
+          builder: (_, __) {
+            return Center(child: Text("Resizable Pane"));
+          },
+        ),
+      ],
     );
   }
 }

example/macos/Runner/MainFlutterWindow.swift

@@ -8,6 +8,11 @@ class MainFlutterWindow: NSWindow {
     self.contentViewController = flutterViewController
     self.setFrame(windowFrame, display: true)
 
+    self.titlebarAppearsTransparent = true
+    self.isMovableByWindowBackground = true
+    self.titleVisibility = .hidden
+    self.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)
+
     RegisterGeneratedPlugins(registry: flutterViewController)
 
     super.awakeFromNib()

example/pubspec.lock

@@ -121,13 +121,6 @@ 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: "2.0.1+2"
   stack_trace:
     dependency: transitive
     description:

lib/macos_ui.dart

@@ -17,26 +17,18 @@ export 'src/buttons/push_button.dart';
 export 'src/buttons/push_button_theme.dart';
 export 'src/buttons/radio_button.dart';
 export 'src/buttons/switch.dart';
-export 'src/buttons/switch.dart';
-export 'src/buttons/switch.dart';
-export 'src/buttons/switch.dart';
-export 'src/buttons/switch.dart';
 export 'src/indicators/capacity_indicators.dart';
 export 'src/indicators/progress_indicators.dart';
-export 'src/indicators/progress_indicators.dart';
-export 'src/indicators/progress_indicators.dart';
 export 'src/indicators/rating_indicator.dart';
 export 'src/indicators/relevance_indicator.dart';
+export 'src/layout/content_area.dart';
+export 'src/layout/resizable_pane.dart';
 export 'src/layout/scaffold.dart';
-export 'src/layout/scaffold.dart';
-export 'src/layout/scaffold.dart';
-export 'src/layout/scaffold.dart';
-export 'src/macos_app.dart';
+export 'src/layout/sidebar.dart';
+export 'src/layout/title_bar.dart';
 export 'src/macos_app.dart';
 export 'src/styles/colors.dart';
 export 'src/styles/macos_theme.dart';
 export 'src/styles/macos_theme_data.dart';
 export 'src/styles/typography.dart';
-export 'src/styles/typography.dart';
-export 'src/util.dart';
 export 'src/util.dart';

lib/src/layout/content_area.dart

@@ -0,0 +1,39 @@
+import 'package:macos_ui/macos_ui.dart';
+import 'package:macos_ui/src/layout/scaffold.dart';
+import 'package:macos_ui/src/library.dart';
+
+/// The widget that fills the rest of the body of the macOS [Scaffold].
+///
+/// A [Scaffold] can contain only one [ContentArea].
+class ContentArea extends StatelessWidget {
+  /// Creates a widget that fills the body of the scaffold.
+  /// The [builder] can be null to show an empty widget.
+  ///
+  /// The width of this
+  /// widget is automatically calculated in [ScaffoldScope].
+  const ContentArea({Key? key, @required this.builder}) : super(key: key);
+
+  /// The builder that creates a child to display in this widget, which will
+  /// use the provided [_scrollController] to enable the scrollbar to work.
+  ///
+  /// Pass the [_scrollController] obtained from this method, to a scrollable
+  /// widget used in this method to work with the internal [Scrollbar].
+  final ScrollableWidgetBuilder? builder;
+
+  static final _scrollController = ScrollController();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: ScaffoldScope.of(context).contentAreaWidth,
+      child: SafeArea(
+        left: false,
+        right: false,
+        child: Scrollbar(
+          controller: _scrollController,
+          child: builder!(context, _scrollController),
+        ),
+      ),
+    );
+  }
+}