Tri-state Checkbox #14611

HansMuller · 2018-02-10T02:27:21Z

Added optional support for tri-state checkboxes, i.e. a checkbox whose value can be true, false, or null.

The checkboxes on the right were created with triState: true, value: null.

Hixie · 2018-02-12T21:43:56Z

packages/flutter/lib/src/material/checkbox.dart

@@ -21,6 +21,10 @@ import 'toggleable.dart';
 /// rebuild the checkbox with a new [value] to update the visual appearance of
 /// the checkbox.
 ///
+/// 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.


[triState] and [value] on the last line

Hixie · 2018-02-12T21:44:06Z

packages/flutter/lib/src/material/checkbox.dart

-  /// * [value], which determines whether the checkbox is checked, and must not
-  ///   be null.
+  /// * [value], which determines whether the checkbox is checked. The value can
+  ///   only be be null if triState is true.


Hixie · 2018-02-12T21:44:31Z

packages/flutter/lib/src/material/checkbox.dart

  const Checkbox({
    Key key,
    @required this.value,
+    this.triState: false,


I would probably spell this "tristate", since "tri" isn't a word, but a prefix.

Hixie · 2018-02-12T21:44:48Z

packages/flutter/lib/src/material/checkbox.dart

+  /// 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


[onChanged]

Hixie · 2018-02-12T21:44:56Z

packages/flutter/lib/src/material/checkbox.dart

+  ///
+  /// 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,


Hixie · 2018-02-12T21:45:19Z

packages/flutter/lib/src/material/checkbox.dart

+  /// 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


not sure what you mean by "applied to" in this paragraph

https://en.wikipedia.org/wiki/Apply

Ah, ok. I think that phrasing would be confusing to our less mathematically-inclined users. I'd probably just say "will be called with the value" or some such.

Hixie · 2018-02-12T21:46:03Z

packages/flutter/lib/src/material/checkbox.dart

+  /// Checkbox displays a dash when its value is null.
+  ///
+  /// When a tri-state checkbox is tapped its [onChanged] callback will be
+  /// applied to true if the current value is null or false, false otherwise.


not sure what "applied to" means here either

https://en.wikipedia.org/wiki/Apply

Hixie · 2018-02-12T21:46:28Z

packages/flutter/lib/src/material/checkbox.dart

+        inactiveColor: inactiveColor,
+        onChanged: onChanged,
+        size: const Size(2 * kRadialReactionRadius, 2 * kRadialReactionRadius),
+        vsync: vsync);


nit: missing newline after last argument

Hixie · 2018-02-12T21:47:38Z

packages/flutter/lib/src/material/toggleable.dart

-  /// The [value], [activeColor], and [inactiveColor] arguments must not be
-  /// null.
+  /// The [activeColor], and [inactiveColor] arguments must not be
+  /// null. The [value] can only be null if triState is true.


Hixie · 2018-02-12T21:47:57Z

packages/flutter/lib/src/material/toggleable.dart

-  /// the value 0.0. When the control is active, the value is true and this
-  /// animation has the value 1.0. When the control is changing from inactive
+  /// the value 0.0. When the control is active, the value either true or triState
+  /// is true and the value is null. When the control is active the animation


[triState], [value]

Hixie · 2018-02-12T21:48:10Z

packages/flutter/lib/src/material/toggleable.dart

+  /// False if this control is "inactive" (not checked, off, or unselected).
+  ///
+  /// If value is true then the control "active" (checked, on, or selected). If
+  /// triState is true and value is null, then the control is considered to be


[triState], [value]

Hixie · 2018-02-12T21:48:51Z

packages/flutter/lib/src/material/toggleable.dart

@@ -290,7 +318,7 @@ abstract class RenderToggleable extends RenderConstrainedBox {
    config.isEnabled = isInteractive;
    if (isInteractive)
      config.onTap = _handleTap;
-    config.isChecked = _value;
+    config.isChecked = _value != false;


we need to convey the null state to the accessibility system

I'd like to defer that to a separate PR. I've discussed it with @goderbauer; support for tristates isn't trivial.

Can you leave a TODO here and/or file a bug?

In general we should have the rule that all new widgets support accessibility, text scaling, localization, and bidi out of the box, but if there's a reason to make an exception here then ok.

Added a TODO and filed #14677

Hixie · 2018-02-12T21:49:33Z

packages/flutter/lib/src/material/toggleable.dart

@@ -241,7 +269,7 @@ abstract class RenderToggleable extends RenderConstrainedBox {

  void _handleTap() {
    if (isInteractive)
-      onChanged(!_value);
+      onChanged(value == false);


if tristate is true, this doesn't seem to give the user a way to get back to the indeterminate state. It seems like if tristate is true, this should go in the loop false -> true -> indeterminate -> false.

That was intentional however I see that HTML tristates do cycle this way. So we can too.

The main reason to do it this way is that if someone doesn't want this behaviour, they can easily just set tristate to false once the value isn't null, but if they do want this behaviour, there's nothing they can do if we don't implement it by default.

Hixie · 2018-02-12T21:50:34Z

packages/flutter/test/material/checkbox_test.dart

+    await tester.tap(find.byType(Checkbox));
+    await tester.pumpAndSettle();
+    expect(checkBoxValue, true);
+  });


this should verify that animations correctly handle:

true -> false
true -> indeterminate
false -> true
false -> indeterminate
indeterminate -> true
indeterminate -> false

HansMuller · 2018-02-13T20:59:56Z

Added a TODO and filed #14674 for smooth segues for cases where the checkbox value changes in the middle its animation cycle

Hixie · 2018-02-13T21:14:34Z

googlebot added the cla: yes label Feb 10, 2018

HansMuller force-pushed the indeterminate_checkbox branch from 381f1b9 to 689f831 Compare February 12, 2018 17:36

Hixie reviewed Feb 12, 2018

View reviewed changes

HansMuller mentioned this pull request Feb 13, 2018

Smooth checkbox value animation segues #14674

Open

HansMuller added 5 commits February 13, 2018 12:35

tri-state checkbox

19f9bd2

updated docs

ef29b95

fixed lintos

5da4e70

triState to tristate

fa20e3a

Support all tristate value transitions

52a19e1

HansMuller force-pushed the indeterminate_checkbox branch from 689f831 to 52a19e1 Compare February 13, 2018 20:35

HansMuller mentioned this pull request Feb 13, 2018

Support accessibility for tristate checkboxes #14677

Closed

Added TODO for a11y

740dd51

HansMuller merged commit 2aa9bb2 into flutter:master Feb 13, 2018

DaveShuckerow pushed a commit to DaveShuckerow/flutter that referenced this pull request May 14, 2018

Tri-state Checkbox (flutter#14611)

52d0029

github-actions bot locked as resolved and limited conversation to collaborators Aug 11, 2021

Tri-state Checkbox #14611

Tri-state Checkbox #14611

Uh oh!

Conversation

HansMuller commented Feb 10, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hixie Feb 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller commented Feb 13, 2018

Uh oh!

Hixie commented Feb 13, 2018

Uh oh!

Uh oh!

Hixie Feb 12, 2018 •

edited

Loading