engine-flutter-autoroll
diff --git a/‎packages/flutter/lib/src/cupertino/checkbox.dart‎
Lines changed: 173 additions & 44 deletions b/‎packages/flutter/lib/src/cupertino/checkbox.dart‎
Lines changed: 173 additions & 44 deletions
@@ -8,10 +8,12 @@
 /// @docImport 'switch.dart';
 library;
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 
 import 'colors.dart';
 import 'constants.dart';
+import 'theme.dart';
 
 // Examples can assume:
 // bool _throwShotAway = false;
@@ -23,6 +25,33 @@ const double _kCupertinoFocusColorOpacity = 0.80;
 const double _kCupertinoFocusColorBrightness = 0.69;
 const double _kCupertinoFocusColorSaturation = 0.835;
 
+// Eyeballed from a checkbox on a physical Macbook Pro running macOS version 14.5.
+const Color _kDisabledCheckColor = CupertinoDynamicColor.withBrightness(
+  color: Color.fromARGB(64, 0, 0, 0),
+  darkColor: Color.fromARGB(64, 255, 255, 255),
+);
+const Color _kDisabledBorderColor = CupertinoDynamicColor.withBrightness(
+  color: Color.fromARGB(13, 0, 0, 0),
+  darkColor: Color.fromARGB(13, 0, 0, 0),
+);
+const CupertinoDynamicColor _kDefaultBorderColor = CupertinoDynamicColor.withBrightness(
+  color: Color.fromARGB(255, 209, 209, 214),
+  darkColor: Color.fromARGB(50, 128, 128, 128),
+);
+const CupertinoDynamicColor _kDefaultFillColor = CupertinoDynamicColor.withBrightness(
+  color: CupertinoColors.activeBlue,
+  darkColor: Color.fromARGB(255, 50, 100, 215),
+);
+const Color _kDefaultCheckColor = CupertinoDynamicColor.withBrightness(
+  color: CupertinoColors.white,
+  darkColor: Color.fromARGB(255, 222, 232, 248),
+);
+const double _kPressedOverlayOpacity = 0.15;
+// In dark mode, the fill color of a checkbox is an opacity gradient of the
+// background color.
+const List<double> _kDarkGradientOpacities = <double>[0.14, 0.29];
+const List<double> _kDisabledDarkGradientOpacities = <double>[0.08, 0.14];
+
 /// A macOS style checkbox.
 ///
 /// The checkbox itself does not maintain any state. Instead, when the state of
@@ -133,7 +162,8 @@ class CupertinoCheckbox extends StatefulWidget {
 
   /// The color to use for the check icon when this checkbox is checked.
   ///
-  /// If null, then the value of [CupertinoColors.white] is used.
+  /// If null, then the value of [CupertinoColors.white] is used if the checkbox
+  /// is enabled. If the checkbox is disabled, a grey-black color is used.
   final Color? checkColor;
 
   /// If true, the checkbox's [value] can be true, false, or null.
@@ -162,8 +192,25 @@ class CupertinoCheckbox extends StatefulWidget {
 
   /// The color and width of the checkbox's border.
   ///
-  /// If this property is null, then the side defaults to a one pixel wide
-  /// black, solid border.
+  /// This property can be a [WidgetStateBorderSide] that can
+  /// specify different border color and widths depending on the
+  /// checkbox's state.
+  ///
+  /// Resolves in the following states:
+  ///  * [WidgetState.pressed].
+  ///  * [WidgetState.selected].
+  ///  * [WidgetState.hovered].
+  ///  * [WidgetState.focused].
+  ///  * [WidgetState.disabled].
+  ///  * [WidgetState.error].
+  ///
+  /// If this property is not a [WidgetStateBorderSide] and it is
+  /// non-null, then it is only rendered when the checkbox's value is
+  /// false. The difference in interpretation is for backwards
+  /// compatibility.
+  ///
+  /// If this property is null and the checkbox's value is false, then the side
+  /// defaults to a one pixel wide grey-black border.
   final BorderSide? side;
 
   /// The shape of the checkbox.
@@ -180,7 +227,7 @@ class CupertinoCheckbox extends StatefulWidget {
   final String? semanticLabel;
 
   /// The width of a checkbox widget.
-  static const double width = 18.0;
+  static const double width = 14.0;
 
   @override
   State<CupertinoCheckbox> createState() => _CupertinoCheckboxState();
@@ -221,19 +268,67 @@ class _CupertinoCheckboxState extends State<CupertinoCheckbox> with TickerProvid
   @override
   bool? get value => widget.value;
 
-  void onFocusChange(bool value) {
-    if (focused != value) {
-      focused = value;
+  WidgetStateProperty<Color> get _defaultFillColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.disabled)) {
+        return CupertinoColors.white.withOpacity(0.5);
+      }
+      if (states.contains(WidgetState.selected)) {
+        return widget.activeColor ?? CupertinoDynamicColor.resolve(_kDefaultFillColor, context);
+      }
+      return CupertinoColors.white;
+    });
+  }
+
+  WidgetStateProperty<Color> get _defaultCheckColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.disabled) && states.contains(WidgetState.selected)) {
+        return widget.checkColor ?? CupertinoDynamicColor.resolve(_kDisabledCheckColor, context);
+     }
+      if (states.contains(WidgetState.selected)) {
+        return widget.checkColor ?? CupertinoDynamicColor.resolve(_kDefaultCheckColor, context);
+      }
+      return CupertinoColors.white;
+    });
+  }
+
+  WidgetStateProperty<BorderSide> get _defaultSide {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if ((states.contains(WidgetState.selected) || states.contains(WidgetState.focused))
+        && !states.contains(WidgetState.disabled)) {
+        return const BorderSide(width: 0.0, color: CupertinoColors.transparent);
+      }
+      if (states.contains(WidgetState.disabled)) {
+        return BorderSide(color: CupertinoDynamicColor.resolve(_kDisabledBorderColor, context));
+      }
+      return BorderSide(color: CupertinoDynamicColor.resolve(_kDefaultBorderColor, context));
+    });
+  }
+
+  BorderSide? _resolveSide(BorderSide? side, Set<WidgetState> states) {
+    if (side is WidgetStateBorderSide) {
+      return WidgetStateProperty.resolveAs<BorderSide?>(side, states);
     }
+    if (!states.contains(WidgetState.selected)) {
+      return side;
+    }
+    return null;
   }
 
   @override
   Widget build(BuildContext context) {
-    final Color effectiveActiveColor = widget.activeColor
-      ?? CupertinoColors.activeBlue;
-    final Color? inactiveColor = widget.inactiveColor;
-    final Color effectiveInactiveColor = inactiveColor
-      ?? CupertinoColors.inactiveGray;
+    // Colors need to be resolved in selected and non selected states separately.
+    final Set<WidgetState> activeStates = states..add(WidgetState.selected);
+    final Set<WidgetState> inactiveStates = states..remove(WidgetState.selected);
+
+    // Since the states getter always makes a new set, make a copy to use
+    // throughout the lifecycle of this build method.
+    final Set<WidgetState> currentStates = states;
+
+    final Color effectiveActiveColor = _defaultFillColor.resolve(activeStates);
+
+    final BorderSide effectiveBorderSide = _resolveSide(widget.side, currentStates)
+      ?? _defaultSide.resolve(currentStates);
 
     final Color effectiveFocusOverlayColor = widget.focusColor
       ?? HSLColor
@@ -242,32 +337,32 @@ class _CupertinoCheckboxState extends State<CupertinoCheckbox> with TickerProvid
           .withSaturation(_kCupertinoFocusColorSaturation)
           .toColor();
 
-    final Color effectiveCheckColor = widget.checkColor
-      ?? CupertinoColors.white;
-
     return Semantics(
       label: widget.semanticLabel,
       checked: widget.value ?? false,
       mixed: widget.tristate ? widget.value == null : null,
       child: buildToggleable(
         focusNode: widget.focusNode,
         autofocus: widget.autofocus,
-        onFocusChange: onFocusChange,
         size: const Size.square(kMinInteractiveDimensionCupertino),
         painter: _painter
+          ..position = position
+          ..reaction = reaction
           ..focusColor = effectiveFocusOverlayColor
-          ..isFocused = focused
           ..downPosition = downPosition
+          ..isFocused = currentStates.contains(WidgetState.focused)
+          ..isHovered = currentStates.contains(WidgetState.hovered)
           ..activeColor = effectiveActiveColor
-          ..inactiveColor = effectiveInactiveColor
-          ..checkColor = effectiveCheckColor
+          ..inactiveColor = _defaultFillColor.resolve(inactiveStates)
+          ..checkColor = _defaultCheckColor.resolve(currentStates)
           ..value = value
           ..previousValue = _previousValue
           ..isActive = widget.onChanged != null
           ..shape = widget.shape ?? RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(4.0),
           )
-          ..side = widget.side,
+          ..side = effectiveBorderSide
+          ..brightness = CupertinoTheme.of(context).brightness
       ),
     );
   }
@@ -314,16 +409,26 @@ class _CheckboxPainter extends ToggleablePainter {
     notifyListeners();
   }
 
-  BorderSide? get side => _side;
+  BorderSide get side => _side!;
   BorderSide? _side;
-  set side(BorderSide? value) {
+  set side(BorderSide value) {
     if (_side == value) {
       return;
     }
     _side = value;
     notifyListeners();
   }
 
+  Brightness? get brightness => _brightness;
+  Brightness? _brightness;
+  set brightness(Brightness? value) {
+    if (_brightness == value) {
+      return;
+    }
+    _brightness = value;
+    notifyListeners();
+  }
+
   Rect _outerRectAt(Offset origin) {
     const double size = CupertinoCheckbox.width;
     final Rect rect = Rect.fromLTWH(origin.dx, origin.dy, size, size);
@@ -341,12 +446,36 @@ class _CheckboxPainter extends ToggleablePainter {
     return Paint()
       ..color = checkColor
       ..style = PaintingStyle.stroke
-      ..strokeWidth = 2.5
+      ..strokeWidth = 2.0
       ..strokeCap = StrokeCap.round;
   }
 
-  void _drawBox(Canvas canvas, Rect outer, Paint paint, BorderSide? side, bool fill) {
-    if (fill) {
+  // Draw a gradient from the top to the bottom of the checkbox.
+  void _drawFillGradient(Canvas canvas, Rect outer, Color topColor, Color bottomColor) {
+    final LinearGradient fillGradient = LinearGradient(
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+      // Eyeballed from a checkbox on a physical Macbook Pro running macOS version 14.5.
+      colors: <Color>[
+        topColor,
+        bottomColor,
+      ],
+    );
+    final Paint gradientPaint = Paint()
+      ..shader = fillGradient.createShader(outer);
+    canvas.drawPath(shape.getOuterPath(outer), gradientPaint);
+  }
+
+  void _drawBox(Canvas canvas, Rect outer, Paint paint, BorderSide? side, bool value) {
+    // Draw a gradient in dark mode except when the checkbox is enabled and checked.
+    if (brightness == Brightness.dark && !(isActive && value)) {
+      _drawFillGradient(
+        canvas,
+        outer,
+        paint.color.withOpacity(isActive ? _kDarkGradientOpacities[0] : _kDisabledDarkGradientOpacities[0]),
+        paint.color.withOpacity(isActive ? _kDarkGradientOpacities[1] : _kDisabledDarkGradientOpacities[1]),
+      );
+    } else {
       canvas.drawPath(shape.getOuterPath(outer), paint);
     }
     if (side != null) {
@@ -359,12 +488,11 @@ class _CheckboxPainter extends ToggleablePainter {
     // The ratios for the offsets below were found from looking at the checkbox
     // examples on in the HIG docs. The distance from the needed point to the
     // edge was measured, then divided by the total width.
-    const Offset start = Offset(CupertinoCheckbox.width * 0.25, CupertinoCheckbox.width * 0.52);
-    const Offset mid = Offset(CupertinoCheckbox.width * 0.46, CupertinoCheckbox.width * 0.75);
-    const Offset end = Offset(CupertinoCheckbox.width * 0.72, CupertinoCheckbox.width * 0.29);
+    const Offset start = Offset(CupertinoCheckbox.width * 0.22, CupertinoCheckbox.width * 0.54);
+    const Offset mid = Offset(CupertinoCheckbox.width * 0.40, CupertinoCheckbox.width * 0.75);
+    const Offset end = Offset(CupertinoCheckbox.width * 0.78, CupertinoCheckbox.width * 0.25);
     path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
     path.lineTo(origin.dx + mid.dx, origin.dy + mid.dy);
-    canvas.drawPath(path, paint);
     path.moveTo(origin.dx + mid.dx, origin.dy + mid.dy);
     path.lineTo(origin.dx + end.dx, origin.dy + end.dy);
     canvas.drawPath(path, paint);
@@ -382,33 +510,34 @@ class _CheckboxPainter extends ToggleablePainter {
   void paint(Canvas canvas, Size size) {
     final Paint strokePaint = _createStrokePaint();
     final Offset origin = size / 2.0 - const Size.square(CupertinoCheckbox.width) / 2.0 as Offset;
-
     final Rect outer = _outerRectAt(origin);
     final Paint paint = Paint()..color = _colorAt(value ?? true);
 
-    if (value == false) {
-
-      final BorderSide border = side ?? BorderSide(color: paint.color);
-      _drawBox(canvas, outer, paint, border, false);
-    } else {
-
-      _drawBox(canvas, outer, paint, side, true);
-      if (value ?? false) {
+    switch (value) {
+      case false:
+        _drawBox(canvas, outer, paint, side, value ?? true);
+      case true:
+        _drawBox(canvas, outer, paint, side, value ?? true);
         _drawCheck(canvas, origin, strokePaint);
-      } else {
+      case null:
+        _drawBox(canvas, outer, paint, side, value ?? true);
         _drawDash(canvas, origin, strokePaint);
-      }
     }
-
+    // The checkbox's opacity changes when pressed.
+    if (downPosition != null) {
+      final Paint pressedPaint = Paint()
+        ..color = brightness == Brightness.light
+          ? CupertinoColors.black.withOpacity(_kPressedOverlayOpacity)
+          : CupertinoColors.white.withOpacity(_kPressedOverlayOpacity);
+      canvas.drawPath(shape.getOuterPath(outer), pressedPaint);
+    }
     if (isFocused) {
       final Rect focusOuter = outer.inflate(1);
-
       final Paint borderPaint = Paint()
         ..color = focusColor
         ..style = PaintingStyle.stroke
         ..strokeWidth = 3.5;
-
-      _drawBox(canvas, focusOuter, borderPaint, side, true);
+      _drawBox(canvas, focusOuter, borderPaint, side, value ?? true);
     }
   }
 }