Support all tristate value transitions

HansMuller · HansMuller · commit 52a19e17e1a4 · 2018-02-13T12:35:26.000-08:00
diff --git a/packages/flutter/lib/src/material/checkbox.dart b/packages/flutter/lib/src/material/checkbox.dart
@@ -79,8 +79,7 @@ class Checkbox extends StatefulWidget {
   ///
   /// 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 will be applied to false if the current [value]
-  /// is true, false otherwise.
+  /// true this callback cycle from false to true to null.
   ///
   /// The callback provided to [onChanged] should update the state of the parent
   /// [StatefulWidget] using the [State.setState] method, so that the parent
@@ -195,7 +194,7 @@ class _RenderCheckbox extends RenderToggleable {
     Color inactiveColor,
     ValueChanged<bool> onChanged,
     @required TickerProvider vsync,
-  }): _showDash = value == null,
+  }): _oldValue = value,
       super(
         value: value,
         tristate: tristate,
@@ -206,18 +205,54 @@ class _RenderCheckbox extends RenderToggleable {
         vsync: vsync,
       );
 
-  bool _showDash;
+  bool _oldValue;
 
   @override
   set value(bool newValue) {
-    final bool oldValue = value;
-    if (newValue == oldValue)
+    if (newValue == value)
       return;
-    _showDash = newValue == null || newValue == false && oldValue == null;
+    _oldValue = value;
     super.value = newValue;
   }
 
+  // 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;
+    final Rect rect = new Rect.fromLTWH(origin.dx + inset, origin.dy + inset, size, size);
+    return new RRect.fromRectAndRadius(rect, _kEdgeRadius);
+  }
+
+  // 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.
+    return onChanged == null
+      ? inactiveColor
+      : (t >= 0.25 ? activeColor : Color.lerp(inactiveColor, activeColor, t * 4.0));
+  }
+
+  // White stroke used to paint the check and dash.
+  void _initStrokePaint(Paint paint) {
+    paint
+      ..color = const Color(0xFFFFFFFF)
+      ..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);
     // As t goes from 0.0 to 1.0, animate the two checkmark strokes from the
     // mid point outwards.
     final Path path = new Path();
@@ -233,6 +268,7 @@ class _RenderCheckbox extends RenderToggleable {
   }
 
   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.
     const Offset start = const Offset(_kEdgeSize * 0.2, _kEdgeSize * 0.5);
@@ -249,33 +285,52 @@ class _RenderCheckbox extends RenderToggleable {
     paintRadialReaction(canvas, offset, size.center(Offset.zero));
 
     final Offset origin = offset + (size / 2.0 - const Size.square(_kEdgeSize) / 2.0);
-    final double t = position.value;
-    final Color borderColor = (onChanged == null)
-      ? inactiveColor
-      : (t >= 0.25 ? activeColor : Color.lerp(inactiveColor, activeColor, t * 4.0));
+    final AnimationStatus status = position.status;
+    final double tNormalized = status == AnimationStatus.forward || status == AnimationStatus.completed
+      ? position.value
+      : 1.0 - position.value;
 
-    final double inset = 1.0 - (t - 0.5).abs() * 2.0;
-    final double rectSize = _kEdgeSize - inset * _kStrokeWidth;
-    final Rect rect = new Rect.fromLTWH(origin.dx + inset, origin.dy + inset, rectSize, rectSize);
-    final RRect outer = new RRect.fromRectAndRadius(rect, _kEdgeRadius);
+    // 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);
+      final Paint paint = new Paint()..color = _colorAt(t);
 
-    final Paint paint = new Paint()
-      ..color = borderColor;
+      if (t <= 0.5) {
+        _drawBorder(canvas, outer, t, paint);
+      } else {
+        canvas.drawRRect(outer, paint);
 
-    if (t <= 0.5) {
-      final RRect inner = outer.deflate(math.min(rectSize / 2.0, _kStrokeWidth + rectSize * t));
-      canvas.drawDRRect(outer, inner, paint);
-    } else {
+        _initStrokePaint(paint);
+        final double tShrink = (t - 0.5) * 2.0;
+        if (_oldValue == null)
+          _drawDash(canvas, origin, tShrink, paint);
+        else
+          _drawCheck(canvas, origin, tShrink, paint);
+      }
+    } else { // Two cases: null to true, true to null
+      final RRect outer = _outerRectAt(origin, 1.0);
+      final Paint paint = new Paint() ..color = _colorAt(1.0);
       canvas.drawRRect(outer, paint);
-      final double t = (position.value - 0.5) * 2.0;
-      paint
-        ..color = const Color(0xFFFFFFFF)
-        ..style = PaintingStyle.stroke
-        ..strokeWidth = _kStrokeWidth;
-      if (_showDash)
-        _drawDash(canvas, origin, t, paint);
-      else
-        _drawCheck(canvas, origin, t, paint);
+
+      _initStrokePaint(paint);
+      if (tNormalized <= 0.5) {
+        final double tShrink = 1.0 - tNormalized * 2.0;
+        if (_oldValue == true)
+          _drawCheck(canvas, origin, tShrink, paint);
+        else
+          _drawDash(canvas, origin, tShrink, paint);
+      } else {
+        final double tExpand = (tNormalized - 0.5) * 2.0;
+        if (value == true)
+          _drawCheck(canvas, origin, tExpand, paint);
+        else
+          _drawDash(canvas, origin, tExpand, paint);
+      }
     }
   }
+
+  // TODO(hmuller): smooth segues for cases where the value changes
+  // in the middle of position's animation cycle.
+  // https://github.com/flutter/flutter/issues/14674
 }
diff --git a/packages/flutter/lib/src/material/toggleable.dart b/packages/flutter/lib/src/material/toggleable.dart
@@ -134,10 +134,14 @@ abstract class RenderToggleable extends RenderConstrainedBox {
     _position
       ..curve = Curves.easeIn
       ..reverseCurve = Curves.easeOut;
-    if (value == false)
-      _positionController.reverse();
-    else
-      _positionController.forward();
+    switch (_positionController.status) {
+      case AnimationStatus.forward:
+      case AnimationStatus.completed:
+        _positionController.reverse();
+        break;
+      default:
+        _positionController.forward();
+    }
   }
 
   /// If true, [value] can be true, false, or null, otherwise [value] must
@@ -250,7 +254,7 @@ abstract class RenderToggleable extends RenderConstrainedBox {
   // the user dragged the toggleable: we may reach 0.0 or 1.0 without
   // seeing a tap. The Switch does this.
   void _handlePositionStateChanged(AnimationStatus status) {
-    if (isInteractive) {
+    if (isInteractive && !tristate) {
       if (status == AnimationStatus.completed && _value == false) {
         onChanged(true);
       }
@@ -268,8 +272,19 @@ abstract class RenderToggleable extends RenderConstrainedBox {
   }
 
   void _handleTap() {
-    if (isInteractive)
-      onChanged(value == false);
+    if (!isInteractive)
+      return;
+    switch (value) {
+      case false:
+        onChanged(true);
+        break;
+      case true:
+        onChanged(tristate ? null : false);
+        break;
+      default: // case null:
+        onChanged(false);
+        break;
+    }
   }
 
   void _handleTapUp(TapUpDetails details) {
diff --git a/packages/flutter/test/material/checkbox_test.dart b/packages/flutter/test/material/checkbox_test.dart
@@ -103,7 +103,7 @@ void main() {
     semantics.dispose();
   });
 
-  testWidgets('CheckBox tristate:true', (WidgetTester tester) async {
+  testWidgets('CheckBox tristate: true', (WidgetTester tester) async {
     bool checkBoxValue;
 
     await tester.pumpWidget(
@@ -133,5 +133,17 @@ void main() {
     await tester.tap(find.byType(Checkbox));
     await tester.pumpAndSettle();
     expect(checkBoxValue, true);
+
+    await tester.tap(find.byType(Checkbox));
+    await tester.pumpAndSettle();
+    expect(checkBoxValue, null);
+
+    checkBoxValue = true;
+    await tester.pumpAndSettle();
+    expect(checkBoxValue, true);
+
+    checkBoxValue = null;
+    await tester.pumpAndSettle();
+    expect(checkBoxValue, null);
   });
 }
