Implemented Switch

CHANGELOG.md

@@ -1,4 +1,9 @@
+## [0.0.3]
+
+* Implemented the `Switch` widget
+
 ## [0.0.2]
+
 * `Scaffold` widget
 * Fix `Typography` so that text color is shown appropriately based on Brightness
 

example/lib/main.dart

@@ -32,20 +32,30 @@ class MyApp extends StatelessWidget {
   }
 }
 
-class Demo extends StatelessWidget {
+class Demo extends StatefulWidget {
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+
+  bool value = false;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       sidebar: Center(
         child: Text('Sidebar'),
       ),
-      body: Center(
-        child: Container(
-          height: 50.0,
-          width: 50.0,
-          color: context.style.primaryColor,
-        ),
+      body: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Switch(
+            value: value,
+            onChanged: (v) => setState(() => value = v),
+          ),
+        ],
       ),
     );
   }
-}
+}

lib/macos_ui.dart

@@ -20,3 +20,4 @@ export 'src/util.dart';
 export 'src/styles/theme.dart';
 export 'src/styles/typography.dart';
 export 'src/layout/scaffold.dart';
+export 'src/buttons/switch.dart';

lib/src/buttons/switch.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/gestures.dart';
+import 'package:macos_ui/macos_ui.dart';
+
+import 'package:flutter/cupertino.dart' as c;
+
+/// A switch is a visual toggle between two mutually exclusive
+/// states — on and off. A switch shows that it's on when the
+/// accent color is visible and off when the switch appears colorless.
+class Switch extends StatelessWidget {
+  const Switch({
+    Key? key,
+    required this.value,
+    required this.onChanged,
+    this.dragStartBehavior = DragStartBehavior.start,
+    this.activeColor,
+    this.trackColor,
+  }) : super(key: key);
+
+  /// Whether this switch is on or off.
+  ///
+  /// Must not be null.
+  final bool value;
+
+  /// Called when the user toggles with switch on or off.
+  ///
+  /// The switch passes the new value to the callback but does not actually
+  /// change state until the parent widget rebuilds the switch with the new
+  /// value.
+  ///
+  /// If null, the switch will be displayed as disabled, which has a reduced opacity.
+  ///
+  /// The callback provided to onChanged should update the state of the parent
+  /// [StatefulWidget] using the [State.setState] method, so that the parent
+  /// gets rebuilt; for example:
+  ///
+  /// ```dart
+  /// Switch(
+  ///   value: _giveVerse,
+  ///   onChanged: (bool newValue) {
+  ///     setState(() {
+  ///       _giveVerse = newValue;
+  ///     });
+  ///   },
+  /// )
+  /// ```
+  final ValueChanged<bool>? onChanged;
+
+  /// {@macro flutter.cupertino.CupertinoSwitch.dragStartBehavior}
+  final DragStartBehavior dragStartBehavior;
+
+  /// The color to use when this switch is on.
+  ///
+  /// Defaults to [Style.primaryColor] when null.
+  final Color? activeColor;
+
+  /// The color to use for the background when the switch is off.
+  ///
+  /// Defaults to [CupertinoColors.secondarySystemFill] when null.
+  final Color? trackColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return c.CupertinoSwitch(
+      value: value,
+      onChanged: onChanged,
+      dragStartBehavior: dragStartBehavior,
+      activeColor: activeColor ??
+          context.maybeStyle?.primaryColor ??
+          CupertinoColors.activeBlue,
+      trackColor: trackColor,
+    );
+  }
+}

lib/src/styles/theme.dart

@@ -19,10 +19,10 @@ class MacosTheme extends InheritedWidget {
         .build();
   }
 
-  static Style maybeOf(BuildContext context) {
+  static Style? maybeOf(BuildContext context) {
     return context
-        .dependOnInheritedWidgetOfExactType<MacosTheme>()!
-        .style
+        .dependOnInheritedWidgetOfExactType<MacosTheme>()
+        ?.style
         .build();
   }
 

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.2
+version: 0.0.3
 homepage: 'https://github.com/GroovinChip/macos_ui'
 
 environment: