Add YaruSwitch

example/lib/main.dart

@@ -39,7 +39,7 @@ class _HomeState extends State<Home> {
         children: [
           YaruTile(
             title: const Text('Compact mode'),
-            trailing: Switch(
+            trailing: YaruSwitch(
               value: _compactMode,
               onChanged: (v) => setState(() => _compactMode = v),
             ),

example/lib/pages/controls_page.dart

@@ -11,6 +11,7 @@ class ControlsPage extends StatefulWidget {
 class _ControlsPageState extends State<ControlsPage> {
   final List<bool?> _checkboxValues = [false, null, true];
   int? _radioValue = 1;
+  final List<bool> _switchValues = List.generate(3, (i) => i % 2 == 0);
 
   @override
   Widget build(BuildContext context) {
@@ -55,6 +56,22 @@ class _ControlsPageState extends State<ControlsPage> {
           ),
           const SizedBox(height: 10),
         ],
+        for (var i = 0; i < _switchValues.length; ++i) ...[
+          Row(
+            children: [
+              YaruSwitch(
+                value: _switchValues[i],
+                onChanged: (v) => setState(() => _switchValues[i] = v),
+              ),
+              const SizedBox(width: 10),
+              Switch(
+                value: _switchValues[i],
+                onChanged: null,
+              )
+            ],
+          ),
+          const SizedBox(height: 10),
+        ],
       ],
     );
   }

example/lib/pages/dialog_page.dart

@@ -77,7 +77,7 @@ class _DialogPageState extends State<DialogPage> {
             ),
             YaruTile(
               title: const Text('isCloseable'),
-              trailing: Switch(
+              trailing: YaruSwitch(
                 value: isCloseable,
                 onChanged: (value) => setState(() => isCloseable = value),
               ),

lib/src/constants.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 /// The recommended padding around page content in Yaru applications.
 const kYaruPagePadding = 20.0;
 
@@ -16,4 +18,8 @@ const kYaruMasterDetailBreakpoint = 620.0;
 
 // Used by tooglable widgets to resize the canvas on active state
 // Need to be an even number
-const kCheckRadioActiveResizeFactor = 2;
+const kTogglableActiveResizeFactor = 2;
+
+const kCheckradioActivableAreaPadding = EdgeInsets.all(6);
+
+const kCheckradioTogglableSize = Size.square(20);

lib/src/controls/yaru_checkbox.dart

@@ -12,7 +12,7 @@ class YaruCheckbox extends YaruTogglable<bool?> {
     super.key,
     required super.value,
     super.tristate,
-    super.onChanged,
+    required super.onChanged,
     super.focusNode,
     super.autofocus,
   }) : assert(tristate || value != null);
@@ -28,11 +28,14 @@ class YaruCheckbox extends YaruTogglable<bool?> {
 
 class _YaruCheckboxState extends YaruTogglableState<YaruCheckbox> {
   @override
-  bool get interactive => widget.onChanged != null;
+  EdgeInsets get activableAreaPadding => kCheckradioActivableAreaPadding;
+
+  @override
+  Size get togglableSize => kCheckradioTogglableSize;
 
   @override
   void handleTap([Intent? _]) {
-    if (!interactive) {
+    if (!widget.interactive) {
       return;
     }
     switch (widget.value) {
@@ -56,49 +59,44 @@ class _YaruCheckboxState extends YaruTogglableState<YaruCheckbox> {
 
 class _YaruCheckboxPainter extends YaruTogglablePainter {
   @override
-  void paint(Canvas canvas, Size size) {
-    final canvasSize = size;
-    final t = position.value;
-    final drawingOrigin = Offset(
-      kCheckRadioActiveResizeFactor / 2 * sizePosition.value,
-      kCheckRadioActiveResizeFactor / 2 * sizePosition.value,
-    );
-    final drawingSize = Size(
-      canvasSize.width - kCheckRadioActiveResizeFactor * sizePosition.value,
-      canvasSize.height - kCheckRadioActiveResizeFactor * sizePosition.value,
-    );
-
-    drawStateIndicator(canvas, canvasSize);
+  void paintTogglable(
+    Canvas canvas,
+    Size realSize,
+    Size size,
+    Offset origin,
+    double t,
+  ) {
+    drawStateIndicator(canvas, realSize, null);
     _drawBox(
       canvas,
-      drawingSize,
-      drawingOrigin,
+      size,
+      origin,
       oldChecked == false || checked == false ? t : 1,
     );
 
     // Four cases: false to null, false to true, null to false, true to false
     if (oldChecked == false || checked == false) {
       if (oldChecked == true || checked == true) {
-        _drawCheckMark(canvas, drawingSize, drawingOrigin, t);
+        _drawCheckMark(canvas, size, origin, t);
       } else if (oldChecked == null || checked == null) {
-        _drawDash(canvas, drawingSize, drawingOrigin, t);
+        _drawDash(canvas, size, origin, t);
       }
     }
     // Two cases: null to true, true to null
     else {
       if (t <= 0.5) {
         final tShrink = 1 - t * 2;
         if (oldChecked == true) {
-          _drawCheckMark(canvas, drawingSize, drawingOrigin, tShrink);
+          _drawCheckMark(canvas, size, origin, tShrink);
         } else {
-          _drawDash(canvas, drawingSize, drawingOrigin, tShrink);
+          _drawDash(canvas, size, origin, tShrink);
         }
       } else {
         final tExpand = (t - 0.5) * 2.0;
         if (checked == true) {
-          _drawCheckMark(canvas, drawingSize, drawingOrigin, tExpand);
+          _drawCheckMark(canvas, size, origin, tExpand);
         } else {
-          _drawDash(canvas, drawingSize, drawingOrigin, tExpand);
+          _drawDash(canvas, size, origin, tExpand);
         }
       }
     }

lib/src/controls/yaru_radio.dart

@@ -5,7 +5,7 @@ import 'yaru_togglable.dart';
 
 const _kDotSizeFactor = 0.4;
 
-class YaruRadio<T> extends YaruTogglable<T> {
+class YaruRadio<T> extends YaruTogglable<T?> {
   const YaruRadio({
     super.key,
     required super.value,
@@ -24,15 +24,21 @@ class YaruRadio<T> extends YaruTogglable<T> {
   final T? groupValue;
 
   @override
-  YaruTogglableState<YaruRadio<T>> createState() {
-    return _YaruRadioState<T>();
+  YaruTogglableState<YaruRadio<T?>> createState() {
+    return _YaruRadioState<T?>();
   }
 }
 
-class _YaruRadioState<T> extends YaruTogglableState<YaruRadio<T>> {
+class _YaruRadioState<T> extends YaruTogglableState<YaruRadio<T?>> {
+  @override
+  EdgeInsets get activableAreaPadding => kCheckradioActivableAreaPadding;
+
+  @override
+  Size get togglableSize => kCheckradioTogglableSize;
+
   @override
   void handleTap([Intent? _]) {
-    if (!interactive) {
+    if (!widget.interactive) {
       return;
     }
 
@@ -51,21 +57,16 @@ class _YaruRadioState<T> extends YaruTogglableState<YaruRadio<T>> {
 
 class _YaruRadioPainter extends YaruTogglablePainter {
   @override
-  void paint(Canvas canvas, Size size) {
-    final canvasSize = size;
-    final t = position.value;
-    final drawingOrigin = Offset(
-      kCheckRadioActiveResizeFactor / 2 * sizePosition.value,
-      kCheckRadioActiveResizeFactor / 2 * sizePosition.value,
-    );
-    final drawingSize = Size(
-      canvasSize.width - kCheckRadioActiveResizeFactor * sizePosition.value,
-      canvasSize.height - kCheckRadioActiveResizeFactor * sizePosition.value,
-    );
-
-    drawStateIndicator(canvas, canvasSize);
-    _drawBox(canvas, drawingSize, drawingOrigin, t);
-    _drawDot(canvas, drawingSize, drawingOrigin, t);
+  void paintTogglable(
+    Canvas canvas,
+    Size realSize,
+    Size size,
+    Offset origin,
+    double t,
+  ) {
+    drawStateIndicator(canvas, realSize, null);
+    _drawBox(canvas, size, origin, t);
+    _drawDot(canvas, size, origin, t);
   }
 
   void _drawBox(Canvas canvas, Size size, Offset origin, double t) {

lib/src/controls/yaru_switch.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+
+import 'yaru_togglable.dart';
+
+const _kSwitchActivableAreaPadding =
+    EdgeInsets.symmetric(horizontal: 2, vertical: 5);
+const _kSwitchSize = Size(55, 30);
+const _kSwitchDotSizeFactor = 0.8;
+
+class YaruSwitch extends YaruTogglable<bool> {
+  const YaruSwitch({
+    super.key,
+    required super.value,
+    required super.onChanged,
+    super.focusNode,
+    super.autofocus,
+  });
+
+  @override
+  bool get checked => value;
+
+  @override
+  bool get tristate => false;
+
+  @override
+  YaruTogglableState<YaruSwitch> createState() {
+    return _YaruSwitchState();
+  }
+}
+
+class _YaruSwitchState extends YaruTogglableState<YaruSwitch> {
+  @override
+  EdgeInsets get activableAreaPadding => _kSwitchActivableAreaPadding;
+
+  @override
+  Size get togglableSize => _kSwitchSize;
+
+  @override
+  void handleTap([Intent? _]) {
+    if (!widget.interactive) {
+      return;
+    }
+
+    widget.onChanged!(!widget.value);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return buildToggleable(_YaruSwitchPainter());
+  }
+}
+
+class _YaruSwitchPainter extends YaruTogglablePainter {
+  @override
+  void paintTogglable(
+    Canvas canvas,
+    Size realSize,
+    Size size,
+    Offset origin,
+    double t,
+  ) {
+    _drawBox(canvas, size, origin, t);
+    _drawDot(canvas, size, origin, t);
+  }
+
+  void _drawBox(Canvas canvas, Size size, Offset origin, double t) {
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(origin.dx, origin.dy, size.width, size.height),
+        Radius.circular(size.height),
+      ),
+      Paint()
+        ..color = interactive
+            ? Color.lerp(uncheckedColor, checkedColor, t)!
+            : Color.lerp(uncheckedDisabledColor, checkedDisabledColor, t)!
+        ..style = PaintingStyle.fill,
+    );
+  }
+
+  void _drawDot(Canvas canvas, Size size, Offset origin, double t) {
+    final margin = (size.height - size.height * _kSwitchDotSizeFactor) / 2;
+    final innerSize = Size(
+      size.width - margin * 2,
+      size.height - margin * 2,
+    );
+    final radius = innerSize.height / 2;
+
+    final start = Offset(radius + margin, radius + margin);
+    final end = Offset(innerSize.width + margin - radius, radius + margin);
+    final center = Offset.lerp(start, end, t)! + origin;
+
+    final paint = Paint()
+      ..color = interactive ? checkmarkColor : checkmarkDisabledColor
+      ..style = PaintingStyle.fill;
+
+    drawStateIndicator(canvas, size, center);
+    canvas.drawCircle(center, radius, paint);
+  }
+}

lib/src/controls/yaru_switch_button.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import 'yaru_switch.dart';
 import 'yaru_toggle_button.dart';
 
 /// A desktop style switch button with an interactive label.
@@ -43,17 +44,11 @@ class YaruSwitchButton extends StatelessWidget {
       title: title,
       subtitle: subtitle,
       contentPadding: contentPadding,
-      leading: SizedBox(
-        width: kMinInteractiveDimension + 8,
-        height: kMinInteractiveDimension - 8,
-        child: Center(
-          child: Switch(
-            value: value,
-            onChanged: onChanged,
-            focusNode: focusNode,
-            autofocus: autofocus,
-          ),
-        ),
+      leading: YaruSwitch(
+        value: value,
+        onChanged: onChanged,
+        focusNode: focusNode,
+        autofocus: autofocus,
       ),
       onToggled: onChanged != null ? () => onChanged!(!value) : null,
     );