Implemented checkbox

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [0.0.3]
 
+* Implemented `Checkbox`
 * Implemented `ProgressCircle` and `ProgressBar`
 * Implemented the `Switch` widget
 

README.md

@@ -31,6 +31,13 @@ dragging left or right. See the documentation for all customization options.
 <img src="https://imgur.com/jTPXGuq.gif" width="75%"/>
 
 # Buttons
+
+## Checkbox
+
+| off | on | mixed |
+| --- | -- | ----- |
+| ![](https://developer.apple.com/design/human-interface-guidelines/macos/images/CheckBoxes_Deselected.svg) | ![](https://developer.apple.com/design/human-interface-guidelines/macos/images/CheckBoxes_Selected.svg) | ![](https://developer.apple.com/design/human-interface-guidelines/macos/images/CheckBoxes_Mixed.svg) |
+
 ## Switch
 <img src="https://imgur.com/IBh5jkz.jpg" width="50%" height="50%"/>
 

example/lib/main.dart

@@ -48,12 +48,16 @@ class _DemoState extends State<Demo> {
         child: Text('Sidebar'),
       ),
       body: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
           Switch(
             value: value,
             onChanged: (v) => setState(() => value = v),
           ),
+          Checkbox(
+            value: value,
+            onChanged: (v) => setState(() => value = v),
+          ),
         ],
       ),
     );

example/pubspec.lock

@@ -73,7 +73,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.2"
+    version: "0.0.3"
   matcher:
     dependency: transitive
     description:

lib/macos_ui.dart

@@ -2,7 +2,8 @@ library macos_ui;
 
 /// todo: package-level docs
 
-export 'package:flutter/widgets.dart' hide Icon, IconTheme, TextBox;
+export 'package:flutter/widgets.dart';
+export 'package:flutter/cupertino.dart' show CupertinoIcons;
 export 'package:flutter/material.dart'
     show
         Brightness,
@@ -20,5 +21,6 @@ export 'src/util.dart';
 export 'src/styles/theme.dart';
 export 'src/styles/typography.dart';
 export 'src/layout/scaffold.dart';
+export 'src/buttons/checkbox.dart';
 export 'src/buttons/switch.dart';
 export 'src/indicators/progress_indicators.dart';

lib/src/buttons/checkbox.dart

@@ -0,0 +1,102 @@
+import 'package:macos_ui/macos_ui.dart';
+
+/// A checkbox is a type of button that lets the user choose between
+/// two opposite states, actions, or values. A selected checkbox is
+/// considered on when it contains a checkmark and off when it's empty.
+/// A checkbox is almost always followed by a title unless it appears in
+/// a checklist.
+class Checkbox extends StatelessWidget {
+  /// Creates a checkbox.
+  ///
+  /// [size] must be non-negative
+  const Checkbox({
+    Key? key,
+    required this.value,
+    required this.onChanged,
+    this.size = 16.0,
+    this.activeColor,
+    this.disabledColor = CupertinoColors.quaternaryLabel,
+    this.offBorderColor = CupertinoColors.tertiaryLabel,
+  })  : assert(size >= 0),
+        super(key: key);
+
+  /// Whether the checkbox is checked or not. If null, it'll be considered
+  /// mixed.
+  final bool? value;
+
+  /// Called whenever the state of the checkbox changes. If null, the checkbox
+  /// will be considered disabled
+  final ValueChanged<bool>? onChanged;
+
+  /// The size of the checkbox. It must be non-negative.
+  final double size;
+
+  /// The background color when the checkbox is on or mixed. If null,
+  /// [Style.activeColor] is used
+  final Color? activeColor;
+
+  /// The background color when the checkbox is disabled. [CupertinoColors.quaternaryLabel]
+  /// is used by default
+  final Color disabledColor;
+
+  /// The color of the border when the checkbox is off. [CupertinoColors.tertiaryLabel]
+  /// is used by default
+  final Color offBorderColor;
+
+  /// Whether the checkbox is mixed or not.
+  bool get isMixed => value == null;
+
+  /// Whether the checkbox is disabled or not.
+  bool get isDisabled => onChanged == null;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        if (value == null || value == false) {
+          onChanged?.call(true);
+        } else {
+          onChanged?.call(false);
+        }
+      },
+      child: Container(
+        height: size,
+        width: size,
+        alignment: Alignment.center,
+        decoration: isDisabled || value == null || value == true
+            ? BoxDecoration(
+                color: CupertinoDynamicColor.resolve(
+                  isDisabled
+                      ? disabledColor
+                      : activeColor ??
+                          context.maybeStyle?.accentColor ??
+                          CupertinoColors.activeBlue,
+                  context,
+                ),
+                borderRadius: BorderRadius.circular(4.0),
+              )
+            : BoxDecoration(
+                border: Border.all(
+                  width: 0.5,
+                  color: CupertinoDynamicColor.resolve(
+                    offBorderColor,
+                    context,
+                  ),
+                ),
+                borderRadius: BorderRadius.circular(4.0),
+              ),
+        child: Icon(
+          isDisabled
+              ? null
+              : isMixed
+                  ? CupertinoIcons.minus
+                  : value == false
+                      ? null
+                      : CupertinoIcons.check_mark,
+          color: CupertinoColors.white,
+          size: (size - 3).clamp(0, size),
+        ),
+      ),
+    );
+  }
+}