fix: checkbox appearance

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.0.0-beta.6]
+🔄 Updated 🔄
+* `MacosCheckbox` appearance more closely matches its native counterpart.
+
 ## [2.0.0-beta.5]
 🚨 Breaking Changes 🚨
 * `PushButton` has been updated to support the `ControlSize` enum.

example/lib/pages/buttons_page.dart

@@ -734,6 +734,13 @@ class _ButtonsPageState extends State<ButtonsPage> {
                           }).toList(),
                         ),
                         const SizedBox(height: 20),
+                        MacosCheckbox(
+                          value: switchValue,
+                          onChanged: (value) {
+                            setState(() => switchValue = value);
+                          },
+                        ),
+                        const SizedBox(height: 20),
                         Row(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [

example/pubspec.lock

@@ -97,7 +97,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.0.0-beta.5"
+    version: "2.0.0-beta.6"
   macos_window_utils:
     dependency: transitive
     description:

lib/src/buttons/checkbox.dart

@@ -15,7 +15,7 @@ class MacosCheckbox extends StatelessWidget {
     super.key,
     required this.value,
     required this.onChanged,
-    this.size = 16.0,
+    this.size = 14.0,
     this.activeColor,
     this.disabledColor = CupertinoColors.quaternaryLabel,
     this.offBorderColor = CupertinoColors.tertiaryLabel,
@@ -108,18 +108,55 @@ class MacosCheckbox extends StatelessWidget {
                   ),
                   borderRadius: const BorderRadius.all(Radius.circular(4.0)),
                 )
-              : BoxDecoration(
-                  color: isLight ? null : CupertinoColors.tertiaryLabel,
-                  border: Border.all(
-                    style: isLight ? BorderStyle.solid : BorderStyle.none,
-                    width: 0.5,
-                    color: MacosDynamicColor.resolve(
-                      offBorderColor,
-                      context,
+              : isLight
+                  ? ShapeDecoration(
+                      gradient: LinearGradient(
+                        begin: const Alignment(0.0, -1.0),
+                        end: const Alignment(0, 0),
+                        colors: [
+                          Colors.white.withOpacity(0.85),
+                          Colors.white.withOpacity(1.0),
+                        ],
+                      ),
+                      shadows: const [
+                        BoxShadow(
+                          color: Color(0x3F000000),
+                          blurRadius: 1,
+                          blurStyle: BlurStyle.inner,
+                          offset: Offset(0, 0),
+                          spreadRadius: 0.0,
+                        ),
+                      ],
+                      shape: RoundedRectangleBorder(
+                        side: BorderSide(
+                          width: 0.25,
+                          color: Colors.black.withOpacity(0.35000000596046448),
+                        ),
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(3.5)),
+                      ),
+                    )
+                  : ShapeDecoration(
+                      gradient: LinearGradient(
+                        begin: const Alignment(0.0, -1.0),
+                        end: const Alignment(0, 1),
+                        colors: [
+                          Colors.white.withOpacity(0.14000000059604645),
+                          Colors.white.withOpacity(0.2800000011920929),
+                        ],
+                      ),
+                      shape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.all(Radius.circular(3)),
+                      ),
+                      shadows: const [
+                        BoxShadow(
+                          color: Color(0x3F000000),
+                          blurRadius: 1,
+                          offset: Offset(0, 0),
+                          spreadRadius: 0,
+                        ),
+                      ],
                     ),
-                  ),
-                  borderRadius: const BorderRadius.all(Radius.circular(4.0)),
-                ),
           child: Icon(
             isDisabled || value == false
                 ? null

pubspec.yaml

@@ -1,6 +1,6 @@
 name: macos_ui
 description: Flutter widgets and themes implementing the current macOS design language.
-version: 2.0.0-beta.5
+version: 2.0.0-beta.6
 homepage: "https://macosui.dev"
 repository: "https://github.com/GroovinChip/macos_ui"
 

test/buttons/checkbox_test.dart

@@ -62,7 +62,7 @@ void main() {
       [
         'state: "unchecked"',
         'enabled',
-        'size: 16.0',
+        'size: 14.0',
         'activeColor: null',
         'disabledColor: quaternaryLabel(*color = Color(0x2d3c3c43)*, darkColor = Color(0x28ebebf5), highContrastColor = Color(0x423c3c43), darkHighContrastColor = Color(0x3debebf5), resolved by: UNRESOLVED)',
         'offBorderColor: tertiaryLabel(*color = Color(0x4c3c3c43)*, darkColor = Color(0x4cebebf5), highContrastColor = Color(0x603c3c43), darkHighContrastColor = Color(0x60ebebf5), resolved by: UNRESOLVED)',