checkbox.dart 25.7 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'dart:math' as math;
6

7 8
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
9 10
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
11

12
import 'constants.dart';
13
import 'debug.dart';
14
import 'material_state.dart';
15
import 'theme.dart';
16
import 'theme_data.dart';
17
import 'toggleable.dart';
18

19
/// A material design checkbox.
20 21
///
/// The checkbox itself does not maintain any state. Instead, when the state of
22 23 24
/// the checkbox changes, the widget calls the [onChanged] callback. Most
/// widgets that use a checkbox will listen for the [onChanged] callback and
/// rebuild the checkbox with a new [value] to update the visual appearance of
25 26
/// the checkbox.
///
27 28 29 30
/// The checkbox can optionally display three values - true, false, and null -
/// if [tristate] is true. When [value] is null a dash is displayed. By default
/// [tristate] is false and the checkbox's [value] must be true or false.
///
31 32 33
/// Requires one of its ancestors to be a [Material] widget.
///
/// See also:
34
///
35 36 37
///  * [CheckboxListTile], which combines this widget with a [ListTile] so that
///    you can give the checkbox a label.
///  * [Switch], a widget with semantics similar to [Checkbox].
38 39
///  * [Radio], for selecting among a set of explicit values.
///  * [Slider], for selecting a value in a range.
40 41
///  * <https://material.io/design/components/selection-controls.html#checkboxes>
///  * <https://material.io/design/components/lists.html#types>
42
class Checkbox extends StatefulWidget {
43
  /// Creates a material design checkbox.
44
  ///
45 46 47 48 49 50
  /// The checkbox itself does not maintain any state. Instead, when the state of
  /// the checkbox changes, the widget calls the [onChanged] callback. Most
  /// widgets that use a checkbox will listen for the [onChanged] callback and
  /// rebuild the checkbox with a new [value] to update the visual appearance of
  /// the checkbox.
  ///
51 52
  /// The following arguments are required:
  ///
53
  /// * [value], which determines whether the checkbox is checked. The [value]
54
  ///   can only be null if [tristate] is true.
55 56
  /// * [onChanged], which is called when the value of the checkbox should
  ///   change. It can be set to null to disable the checkbox.
57
  ///
58
  /// The values of [tristate] and [autofocus] must not be null.
59
  const Checkbox({
60 61
    Key? key,
    required this.value,
62
    this.tristate = false,
63
    required this.onChanged,
64
    this.mouseCursor,
65
    this.activeColor,
66
    this.fillColor,
67
    this.checkColor,
68 69
    this.focusColor,
    this.hoverColor,
70
    this.overlayColor,
71
    this.splashRadius,
72
    this.materialTapTargetSize,
73
    this.visualDensity,
74 75
    this.focusNode,
    this.autofocus = false,
76 77
  }) : assert(tristate != null),
       assert(tristate || value != null),
78
       assert(autofocus != null),
79
       super(key: key);
80

81
  /// Whether this checkbox is checked.
82 83
  ///
  /// This property must not be null.
84
  final bool? value;
85

86
  /// Called when the value of the checkbox should change.
87 88 89 90 91
  ///
  /// The checkbox passes the new value to the callback but does not actually
  /// change state until the parent widget rebuilds the checkbox with the new
  /// value.
  ///
92 93 94 95 96 97
  /// If this callback is null, the checkbox will be displayed as disabled
  /// and will not respond to input gestures.
  ///
  /// When the checkbox is tapped, if [tristate] is false (the default) then
  /// the [onChanged] callback will be applied to `!value`. If [tristate] is
  /// true this callback cycle from false to true to null.
98
  ///
99
  /// The callback provided to [onChanged] should update the state of the parent
100 101 102 103
  /// [StatefulWidget] using the [State.setState] method, so that the parent
  /// gets rebuilt; for example:
  ///
  /// ```dart
104
  /// Checkbox(
105 106 107 108 109 110
  ///   value: _throwShotAway,
  ///   onChanged: (bool newValue) {
  ///     setState(() {
  ///       _throwShotAway = newValue;
  ///     });
  ///   },
111
  /// )
112
  /// ```
113
  final ValueChanged<bool?>? onChanged;
114

115
  /// {@template flutter.material.checkbox.mouseCursor}
116 117 118 119 120 121 122 123 124 125
  /// The cursor for a mouse pointer when it enters or is hovering over the
  /// widget.
  ///
  /// If [mouseCursor] is a [MaterialStateProperty<MouseCursor>],
  /// [MaterialStateProperty.resolve] is used for the following [MaterialState]s:
  ///
  ///  * [MaterialState.selected].
  ///  * [MaterialState.hovered].
  ///  * [MaterialState.focused].
  ///  * [MaterialState.disabled].
126
  /// {@endtemplate}
127 128 129 130
  ///
  /// When [value] is null and [tristate] is true, [MaterialState.selected] is
  /// included as a state.
  ///
131 132 133 134 135 136 137 138
  /// If null, then the value of [CheckboxThemeData.mouseCursor] is used. If
  /// that is also null, then [MaterialStateMouseCursor.clickable] is used.
  ///
  /// See also:
  ///
  ///  * [MaterialStateMouseCursor], a [MouseCursor] that implements
  ///    `MaterialStateProperty` which is used in APIs that need to accept
  ///    either a [MouseCursor] or a [MaterialStateProperty<MouseCursor>].
139
  final MouseCursor? mouseCursor;
140

141 142
  /// The color to use when this checkbox is checked.
  ///
143
  /// Defaults to [ThemeData.toggleableActiveColor].
144 145 146
  ///
  /// If [fillColor] returns a non-null color in the [MaterialState.selected]
  /// state, it will be used instead of this color.
147
  final Color? activeColor;
148

149 150
  /// {@template flutter.material.checkbox.fillColor}
  /// The color that fills the checkbox, in all [MaterialState]s.
151 152 153 154 155 156
  ///
  /// Resolves in the following states:
  ///  * [MaterialState.selected].
  ///  * [MaterialState.hovered].
  ///  * [MaterialState.focused].
  ///  * [MaterialState.disabled].
157 158 159 160 161 162 163 164
  /// {@endtemplate}
  ///
  /// If null, then the value of [activeColor] is used in the selected
  /// state. If that is also null, the value of [CheckboxThemeData.fillColor]
  /// is used. If that is also null, then [ThemeData.disabledColor] is used in
  /// the disabled state, [ThemeData.toggleableActiveColor] is used in the
  /// selected state, and [ThemeData.unselectedWidgetColor] is used in the
  /// default state.
165 166
  final MaterialStateProperty<Color?>? fillColor;

167
  /// {@template flutter.material.checkbox.checkColor}
168
  /// The color to use for the check icon when this checkbox is checked.
169
  /// {@endtemplate}
170
  ///
171 172
  /// If null, then the value of [CheckboxThemeData.checkColor] is used. If
  /// that is also null, then Color(0xFFFFFFFF) is used.
173
  final Color? checkColor;
174

175 176 177 178
  /// If true the checkbox's [value] can be true, false, or null.
  ///
  /// Checkbox displays a dash when its value is null.
  ///
179 180 181 182
  /// When a tri-state checkbox ([tristate] is true) is tapped, its [onChanged]
  /// callback will be applied to true if the current value is false, to null if
  /// value is true, and to false if value is null (i.e. it cycles through false
  /// => true => null => false when tapped).
183 184 185 186
  ///
  /// If tristate is false (the default), [value] must not be null.
  final bool tristate;

187
  /// {@template flutter.material.checkbox.materialTapTargetSize}
188
  /// Configures the minimum size of the tap target.
189
  /// {@endtemplate}
190
  ///
191 192 193
  /// If null, then the value of [CheckboxThemeData.materialTapTargetSize] is
  /// used. If that is also null, then the value of
  /// [ThemeData.materialTapTargetSize] is used.
194 195 196
  ///
  /// See also:
  ///
197
  ///  * [MaterialTapTargetSize], for a description of how this affects tap targets.
198
  final MaterialTapTargetSize? materialTapTargetSize;
199

200
  /// {@template flutter.material.checkbox.visualDensity}
201
  /// Defines how compact the checkbox's layout will be.
202
  /// {@endtemplate}
203 204 205
  ///
  /// {@macro flutter.material.themedata.visualDensity}
  ///
206 207 208
  /// If null, then the value of [CheckboxThemeData.visualDensity] is used. If
  /// that is also null, then the value of [ThemeData.visualDensity] is used.
  ///
209 210
  /// See also:
  ///
211 212
  ///  * [ThemeData.visualDensity], which specifies the [visualDensity] for all
  ///    widgets within a [Theme].
213
  final VisualDensity? visualDensity;
214

215
  /// The color for the checkbox's [Material] when it has the input focus.
216
  ///
217 218 219
  /// If [overlayColor] returns a non-null color in the [MaterialState.focused]
  /// state, it will be used instead.
  ///
220 221 222
  /// If null, then the value of [CheckboxThemeData.overlayColor] is used in the
  /// focused state. If that is also null, then the value of
  /// [ThemeData.focusColor] is used.
223
  final Color? focusColor;
224 225

  /// The color for the checkbox's [Material] when a pointer is hovering over it.
226
  ///
227 228 229
  /// If [overlayColor] returns a non-null color in the [MaterialState.hovered]
  /// state, it will be used instead.
  ///
230 231 232
  /// If null, then the value of [CheckboxThemeData.overlayColor] is used in the
  /// hovered state. If that is also null, then the value of
  /// [ThemeData.hoverColor] is used.
233
  final Color? hoverColor;
234

235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
  /// {@template flutter.material.checkbox.overlayColor}
  /// The color for the checkbox's [Material].
  ///
  /// Resolves in the following states:
  ///  * [MaterialState.pressed].
  ///  * [MaterialState.selected].
  ///  * [MaterialState.hovered].
  ///  * [MaterialState.focused].
  /// {@endtemplate}
  ///
  /// If null, then the value of [activeColor] with alpha
  /// [kRadialReactionAlpha], [focusColor] and [hoverColor] is used in the
  /// pressed, focused and hovered state. If that is also null,
  /// the value of [CheckboxThemeData.overlayColor] is used. If that is
  /// also null, then the value of [ThemeData.toggleableActiveColor] with alpha
  /// [kRadialReactionAlpha], [ThemeData.focusColor] and [ThemeData.hoverColor]
  /// is used in the pressed, focused and hovered state.
  final MaterialStateProperty<Color?>? overlayColor;

254
  /// {@template flutter.material.checkbox.splashRadius}
255
  /// The splash radius of the circular [Material] ink response.
256
  /// {@endtemplate}
257
  ///
258 259
  /// If null, then the value of [CheckboxThemeData.splashRadius] is used. If
  /// that is also null, then [kRadialReactionRadius] is used.
260 261
  final double? splashRadius;

262
  /// {@macro flutter.widgets.Focus.focusNode}
263
  final FocusNode? focusNode;
264 265 266 267

  /// {@macro flutter.widgets.Focus.autofocus}
  final bool autofocus;

268 269 270
  /// The width of a checkbox widget.
  static const double width = 18.0;

271
  @override
272
  _CheckboxState createState() => _CheckboxState();
273 274 275
}

class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin {
276
  bool get enabled => widget.onChanged != null;
277
  late Map<Type, Action<Intent>> _actionMap;
278 279 280 281

  @override
  void initState() {
    super.initState();
282 283
    _actionMap = <Type, Action<Intent>>{
      ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: _actionHandler),
284 285 286
    };
  }

287
  void _actionHandler(ActivateIntent intent) {
288 289 290
    if (widget.onChanged != null) {
      switch (widget.value) {
        case false:
291
          widget.onChanged!(true);
292 293
          break;
        case true:
294
          widget.onChanged!(widget.tristate ? null : false);
295
          break;
296 297
        case null:
          widget.onChanged!(false);
298 299 300
          break;
      }
    }
301
    final RenderObject renderObject = context.findRenderObject()!;
302 303 304
    renderObject.sendSemanticsEvent(const TapSemanticEvent());
  }

305 306 307 308
  bool _focused = false;
  void _handleFocusHighlightChanged(bool focused) {
    if (focused != _focused) {
      setState(() { _focused = focused; });
309 310 311
    }
  }

312 313 314 315
  bool _hovering = false;
  void _handleHoverChanged(bool hovering) {
    if (hovering != _hovering) {
      setState(() { _hovering = hovering; });
316 317 318
    }
  }

319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350
  Set<MaterialState> get _states => <MaterialState>{
    if (!enabled) MaterialState.disabled,
    if (_hovering) MaterialState.hovered,
    if (_focused) MaterialState.focused,
    if (widget.value == null || widget.value!) MaterialState.selected,
  };

  MaterialStateProperty<Color?> get _widgetFillColor {
    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return null;
      }
      if (states.contains(MaterialState.selected)) {
        return widget.activeColor;
      }
      return null;
    });
  }

  MaterialStateProperty<Color> get _defaultFillColor {
    final ThemeData themeData = Theme.of(context);
    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return themeData.disabledColor;
      }
      if (states.contains(MaterialState.selected)) {
        return themeData.toggleableActiveColor;
      }
      return themeData.unselectedWidgetColor;
    });
  }

351
  @override
352
  Widget build(BuildContext context) {
353
    assert(debugCheckHasMaterial(context));
354
    final ThemeData themeData = Theme.of(context);
355 356 357 358 359 360
    final MaterialTapTargetSize effectiveMaterialTapTargetSize = widget.materialTapTargetSize
      ?? themeData.checkboxTheme.materialTapTargetSize
      ?? themeData.materialTapTargetSize;
    final VisualDensity effectiveVisualDensity = widget.visualDensity
      ?? themeData.checkboxTheme.visualDensity
      ?? themeData.visualDensity;
361
    Size size;
362
    switch (effectiveMaterialTapTargetSize) {
363
      case MaterialTapTargetSize.padded:
364
        size = const Size(kMinInteractiveDimension, kMinInteractiveDimension);
365 366
        break;
      case MaterialTapTargetSize.shrinkWrap:
367
        size = const Size(kMinInteractiveDimension - 8.0, kMinInteractiveDimension - 8.0);
368 369
        break;
    }
370
    size += effectiveVisualDensity.baseSizeAdjustment;
371
    final BoxConstraints additionalConstraints = BoxConstraints.tight(size);
372 373 374
    final MouseCursor effectiveMouseCursor = MaterialStateProperty.resolveAs<MouseCursor?>(widget.mouseCursor, _states)
      ?? themeData.checkboxTheme.mouseCursor?.resolve(_states)
      ?? MaterialStateProperty.resolveAs<MouseCursor>(MaterialStateMouseCursor.clickable, _states);
375 376 377 378 379 380
    // Colors need to be resolved in selected and non selected states separately
    // so that they can be lerped between.
    final Set<MaterialState> activeStates = _states..add(MaterialState.selected);
    final Set<MaterialState> inactiveStates = _states..remove(MaterialState.selected);
    final Color effectiveActiveColor = widget.fillColor?.resolve(activeStates)
      ?? _widgetFillColor.resolve(activeStates)
381
      ?? themeData.checkboxTheme.fillColor?.resolve(activeStates)
382 383 384
      ?? _defaultFillColor.resolve(activeStates);
    final Color effectiveInactiveColor = widget.fillColor?.resolve(inactiveStates)
      ?? _widgetFillColor.resolve(inactiveStates)
385
      ?? themeData.checkboxTheme.fillColor?.resolve(inactiveStates)
386
      ?? _defaultFillColor.resolve(inactiveStates);
387

388 389 390 391 392 393 394 395 396 397
    final Set<MaterialState> focusedStates = _states..add(MaterialState.focused);
    final Color effectiveFocusOverlayColor = widget.overlayColor?.resolve(focusedStates)
      ?? widget.focusColor
      ?? themeData.checkboxTheme.overlayColor?.resolve(focusedStates)
      ?? themeData.focusColor;

    final Set<MaterialState> hoveredStates = _states..add(MaterialState.hovered);
    final Color effectiveHoverOverlayColor = widget.overlayColor?.resolve(hoveredStates)
        ?? widget.hoverColor
        ?? themeData.checkboxTheme.overlayColor?.resolve(hoveredStates)
398 399
        ?? themeData.hoverColor;

400 401 402 403 404 405 406 407 408 409
    final Set<MaterialState> activePressedStates = activeStates..add(MaterialState.pressed);
    final Color effectiveActivePressedOverlayColor = widget.overlayColor?.resolve(activePressedStates)
        ?? themeData.checkboxTheme.overlayColor?.resolve(activePressedStates)
        ?? effectiveActiveColor.withAlpha(kRadialReactionAlpha);

    final Set<MaterialState> inactivePressedStates = inactiveStates..add(MaterialState.pressed);
    final Color effectiveInactivePressedOverlayColor = widget.overlayColor?.resolve(inactivePressedStates)
        ?? themeData.checkboxTheme.overlayColor?.resolve(inactivePressedStates)
        ?? effectiveActiveColor.withAlpha(kRadialReactionAlpha);

410 411 412 413
    final Color effectiveCheckColor =  widget.checkColor
      ?? themeData.checkboxTheme.checkColor?.resolve(_states)
      ?? const Color(0xFFFFFFFF);

414 415 416 417 418 419 420
    return FocusableActionDetector(
      actions: _actionMap,
      focusNode: widget.focusNode,
      autofocus: widget.autofocus,
      enabled: enabled,
      onShowFocusHighlight: _handleFocusHighlightChanged,
      onShowHoverHighlight: _handleHoverChanged,
421
      mouseCursor: effectiveMouseCursor,
422 423 424 425 426
      child: Builder(
        builder: (BuildContext context) {
          return _CheckboxRenderObjectWidget(
            value: widget.value,
            tristate: widget.tristate,
427
            activeColor: effectiveActiveColor,
428
            checkColor: effectiveCheckColor,
429
            inactiveColor: effectiveInactiveColor,
430 431
            focusColor: effectiveFocusOverlayColor,
            hoverColor: effectiveHoverOverlayColor,
432 433
            reactionColor: effectiveActivePressedOverlayColor,
            inactiveReactionColor: effectiveInactivePressedOverlayColor,
434
            splashRadius: widget.splashRadius ?? themeData.checkboxTheme.splashRadius ?? kRadialReactionRadius,
435 436 437 438 439 440 441
            onChanged: widget.onChanged,
            additionalConstraints: additionalConstraints,
            vsync: this,
            hasFocus: _focused,
            hovering: _hovering,
          );
        },
442
      ),
443
    );
444 445 446
  }
}

447
class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
448
  const _CheckboxRenderObjectWidget({
449 450 451 452 453 454 455 456
    Key? key,
    required this.value,
    required this.tristate,
    required this.activeColor,
    required this.checkColor,
    required this.inactiveColor,
    required this.focusColor,
    required this.hoverColor,
457 458
    required this.reactionColor,
    required this.inactiveReactionColor,
459
    required this.splashRadius,
460 461 462 463 464
    required this.onChanged,
    required this.vsync,
    required this.additionalConstraints,
    required this.hasFocus,
    required this.hovering,
465 466
  }) : assert(tristate != null),
       assert(tristate || value != null),
467 468 469 470
       assert(activeColor != null),
       assert(inactiveColor != null),
       assert(vsync != null),
       super(key: key);
471

472
  final bool? value;
473
  final bool tristate;
474 475
  final bool hasFocus;
  final bool hovering;
476
  final Color activeColor;
477
  final Color checkColor;
478
  final Color inactiveColor;
479 480
  final Color focusColor;
  final Color hoverColor;
481 482
  final Color reactionColor;
  final Color inactiveReactionColor;
483
  final double splashRadius;
484
  final ValueChanged<bool?>? onChanged;
485
  final TickerProvider vsync;
486
  final BoxConstraints additionalConstraints;
487

488
  @override
489
  _RenderCheckbox createRenderObject(BuildContext context) => _RenderCheckbox(
490
    value: value,
491
    tristate: tristate,
492
    activeColor: activeColor,
493
    checkColor: checkColor,
494
    inactiveColor: inactiveColor,
495 496
    focusColor: focusColor,
    hoverColor: hoverColor,
497 498
    reactionColor: reactionColor,
    inactiveReactionColor: inactiveReactionColor,
499
    splashRadius: splashRadius,
500 501
    onChanged: onChanged,
    vsync: vsync,
502
    additionalConstraints: additionalConstraints,
503 504
    hasFocus: hasFocus,
    hovering: hovering,
505
  );
506

507
  @override
508
  void updateRenderObject(BuildContext context, _RenderCheckbox renderObject) {
509
    renderObject
510 511
      // The `tristate` must be changed before `value` due to the assertion at
      // the beginning of `set value`.
512
      ..tristate = tristate
513
      ..value = value
514
      ..activeColor = activeColor
515
      ..checkColor = checkColor
516
      ..inactiveColor = inactiveColor
517 518
      ..focusColor = focusColor
      ..hoverColor = hoverColor
519 520
      ..reactionColor = reactionColor
      ..inactiveReactionColor = inactiveReactionColor
521
      ..splashRadius = splashRadius
522
      ..onChanged = onChanged
523
      ..additionalConstraints = additionalConstraints
524 525 526
      ..vsync = vsync
      ..hasFocus = hasFocus
      ..hovering = hovering;
527 528 529
  }
}

530
const double _kEdgeSize = Checkbox.width;
531
const Radius _kEdgeRadius = Radius.circular(1.0);
532 533
const double _kStrokeWidth = 2.0;

534
class _RenderCheckbox extends RenderToggleable {
535
  _RenderCheckbox({
536 537 538 539 540 541 542
    bool? value,
    required bool tristate,
    required Color activeColor,
    required this.checkColor,
    required Color inactiveColor,
    Color? focusColor,
    Color? hoverColor,
543 544
    Color? reactionColor,
    Color? inactiveReactionColor,
545
    required double splashRadius,
546 547 548 549 550
    required BoxConstraints additionalConstraints,
    ValueChanged<bool?>? onChanged,
    required bool hasFocus,
    required bool hovering,
    required TickerProvider vsync,
551 552 553 554 555 556
  }) : _oldValue = value,
       super(
         value: value,
         tristate: tristate,
         activeColor: activeColor,
         inactiveColor: inactiveColor,
557 558
         focusColor: focusColor,
         hoverColor: hoverColor,
559 560
         reactionColor: reactionColor,
         inactiveReactionColor: inactiveReactionColor,
561
         splashRadius: splashRadius,
562 563 564
         onChanged: onChanged,
         additionalConstraints: additionalConstraints,
         vsync: vsync,
565 566
         hasFocus: hasFocus,
         hovering: hovering,
567
       );
568

569
  bool? _oldValue;
570
  Color checkColor;
571

572
  @override
573
  set value(bool? newValue) {
574 575 576 577 578
    if (newValue == value)
      return;
    _oldValue = value;
    super.value = newValue;
  }
579

580 581 582 583 584 585
  @override
  void describeSemanticsConfiguration(SemanticsConfiguration config) {
    super.describeSemanticsConfiguration(config);
    config.isChecked = value == true;
  }

586 587 588 589 590 591 592
  // The square outer bounds of the checkbox at t, with the specified origin.
  // At t == 0.0, the outer rect's size is _kEdgeSize (Checkbox.width)
  // At t == 0.5, .. is _kEdgeSize - _kStrokeWidth
  // At t == 1.0, .. is _kEdgeSize
  RRect _outerRectAt(Offset origin, double t) {
    final double inset = 1.0 - (t - 0.5).abs() * 2.0;
    final double size = _kEdgeSize - inset * _kStrokeWidth;
593 594
    final Rect rect = Rect.fromLTWH(origin.dx + inset, origin.dy + inset, size, size);
    return RRect.fromRectAndRadius(rect, _kEdgeRadius);
595
  }
596

597 598 599 600
  // The checkbox's border color if value == false, or its fill color when
  // value == true or null.
  Color _colorAt(double t) {
    // As t goes from 0.0 to 0.25, animate from the inactiveColor to activeColor.
601
    return t >= 0.25 ? activeColor : Color.lerp(inactiveColor, activeColor, t * 4.0)!;
602 603 604
  }

  // White stroke used to paint the check and dash.
605 606
  Paint _createStrokePaint() {
    return Paint()
607
      ..color = checkColor
608 609 610 611 612 613 614 615 616 617 618 619 620 621
      ..style = PaintingStyle.stroke
      ..strokeWidth = _kStrokeWidth;
  }

  void _drawBorder(Canvas canvas, RRect outer, double t, Paint paint) {
    assert(t >= 0.0 && t <= 0.5);
    final double size = outer.width;
    // As t goes from 0.0 to 1.0, gradually fill the outer RRect.
    final RRect inner = outer.deflate(math.min(size / 2.0, _kStrokeWidth + size * t));
    canvas.drawDRRect(outer, inner, paint);
  }

  void _drawCheck(Canvas canvas, Offset origin, double t, Paint paint) {
    assert(t >= 0.0 && t <= 1.0);
622 623
    // As t goes from 0.0 to 1.0, animate the two check mark strokes from the
    // short side to the long side.
624
    final Path path = Path();
625 626 627
    const Offset start = Offset(_kEdgeSize * 0.15, _kEdgeSize * 0.45);
    const Offset mid = Offset(_kEdgeSize * 0.4, _kEdgeSize * 0.7);
    const Offset end = Offset(_kEdgeSize * 0.85, _kEdgeSize * 0.25);
628 629
    if (t < 0.5) {
      final double strokeT = t * 2.0;
630
      final Offset drawMid = Offset.lerp(start, mid, strokeT)!;
631 632 633 634
      path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
      path.lineTo(origin.dx + drawMid.dx, origin.dy + drawMid.dy);
    } else {
      final double strokeT = (t - 0.5) * 2.0;
635
      final Offset drawEnd = Offset.lerp(mid, end, strokeT)!;
636 637 638 639
      path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
      path.lineTo(origin.dx + mid.dx, origin.dy + mid.dy);
      path.lineTo(origin.dx + drawEnd.dx, origin.dy + drawEnd.dy);
    }
640 641
    canvas.drawPath(path, paint);
  }
642

643 644 645 646
  void _drawDash(Canvas canvas, Offset origin, double t, Paint paint) {
    assert(t >= 0.0 && t <= 1.0);
    // As t goes from 0.0 to 1.0, animate the horizontal line from the
    // mid point outwards.
647 648 649
    const Offset start = Offset(_kEdgeSize * 0.2, _kEdgeSize * 0.5);
    const Offset mid = Offset(_kEdgeSize * 0.5, _kEdgeSize * 0.5);
    const Offset end = Offset(_kEdgeSize * 0.8, _kEdgeSize * 0.5);
650 651
    final Offset drawStart = Offset.lerp(start, mid, 1.0 - t)!;
    final Offset drawEnd = Offset.lerp(mid, end, t)!;
652 653 654 655 656 657
    canvas.drawLine(origin + drawStart, origin + drawEnd, paint);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final Canvas canvas = context.canvas;
658
    paintRadialReaction(canvas, offset, size.center(Offset.zero));
659

660
    final Paint strokePaint = _createStrokePaint();
661
    final Offset origin = offset + (size / 2.0 - const Size.square(_kEdgeSize) / 2.0 as Offset);
662 663 664 665
    final AnimationStatus status = position.status;
    final double tNormalized = status == AnimationStatus.forward || status == AnimationStatus.completed
      ? position.value
      : 1.0 - position.value;
666

667 668 669 670
    // Four cases: false to null, false to true, null to false, true to false
    if (_oldValue == false || value == false) {
      final double t = value == false ? 1.0 - tNormalized : tNormalized;
      final RRect outer = _outerRectAt(origin, t);
671
      final Paint paint = Paint()..color = _colorAt(t);
672

673 674 675 676
      if (t <= 0.5) {
        _drawBorder(canvas, outer, t, paint);
      } else {
        canvas.drawRRect(outer, paint);
677

678
        final double tShrink = (t - 0.5) * 2.0;
679
        if (_oldValue == null || value == null)
680
          _drawDash(canvas, origin, tShrink, strokePaint);
681
        else
682
          _drawCheck(canvas, origin, tShrink, strokePaint);
683 684 685
      }
    } else { // Two cases: null to true, true to null
      final RRect outer = _outerRectAt(origin, 1.0);
686
      final Paint paint = Paint() ..color = _colorAt(1.0);
687
      canvas.drawRRect(outer, paint);
688

689 690 691
      if (tNormalized <= 0.5) {
        final double tShrink = 1.0 - tNormalized * 2.0;
        if (_oldValue == true)
692
          _drawCheck(canvas, origin, tShrink, strokePaint);
693
        else
694
          _drawDash(canvas, origin, tShrink, strokePaint);
695 696 697
      } else {
        final double tExpand = (tNormalized - 0.5) * 2.0;
        if (value == true)
698
          _drawCheck(canvas, origin, tExpand, strokePaint);
699
        else
700
          _drawDash(canvas, origin, tExpand, strokePaint);
701
      }
702 703 704
    }
  }
}