Checkbox class

A Material Design checkbox.

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.

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.

Requires one of its ancestors to be a Material widget.

This example shows how you can override the default theme of a Checkbox with a WidgetStateProperty. In this example, the checkbox's color will be Colors.blue when the Checkbox is being pressed, hovered, or focused. Otherwise, the checkbox's color will be Colors.red.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [Checkbox].

void main() => runApp(const CheckboxExampleApp());

class CheckboxExampleApp extends StatelessWidget {
  const CheckboxExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Checkbox Sample')),
        body: const Center(child: CheckboxExample()),
      ),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  const CheckboxExample({super.key});

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    Color getColor(Set<WidgetState> states) {
      const Set<WidgetState> interactiveStates = <WidgetState>{
        WidgetState.pressed,
        WidgetState.hovered,
        WidgetState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.blue;
      }
      return Colors.red;
    }

    return Checkbox(
      checkColor: Colors.white,
      fillColor: WidgetStateProperty.resolveWith(getColor),
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    );
  }
}

This example shows what the checkbox error state looks like.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for M3 [Checkbox] with error state.

void main() => runApp(const CheckboxExampleApp());

class CheckboxExampleApp extends StatelessWidget {
  const CheckboxExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4)),
      title: 'Checkbox Sample',
      home: Scaffold(
        appBar: AppBar(title: const Text('Checkbox Sample')),
        body: const Center(child: CheckboxExample()),
      ),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  const CheckboxExample({super.key});

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool? isChecked = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: .center,
      children: <Widget>[
        Checkbox(
          tristate: true,
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value;
            });
          },
        ),
        Checkbox(
          isError: true,
          tristate: true,
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value;
            });
          },
        ),
        Checkbox(
          isError: true,
          tristate: true,
          value: isChecked,
          onChanged: null,
        ),
      ],
    );
  }
}

Constructors

Checkbox({Key? key, required bool? value, bool tristate = false, required ValueChanged<bool?>? onChanged, MouseCursor? mouseCursor, Color? activeColor, WidgetStateProperty<Color?>? fillColor, Color? checkColor, Color? focusColor, Color? hoverColor, WidgetStateProperty<Color?>? overlayColor, double? splashRadius, MaterialTapTargetSize? materialTapTargetSize, VisualDensity? visualDensity, FocusNode? focusNode, bool autofocus = false, OutlinedBorder? shape, BorderSide? side, bool isError = false, String? semanticLabel}): Creates a Material Design checkbox.
const
Checkbox.adaptive({Key? key, required bool? value, bool tristate = false, required ValueChanged<bool?>? onChanged, MouseCursor? mouseCursor, Color? activeColor, WidgetStateProperty<Color?>? fillColor, Color? checkColor, Color? focusColor, Color? hoverColor, WidgetStateProperty<Color?>? overlayColor, double? splashRadius, MaterialTapTargetSize? materialTapTargetSize, VisualDensity? visualDensity, FocusNode? focusNode, bool autofocus = false, OutlinedBorder? shape, BorderSide? side, bool isError = false, String? semanticLabel}): Creates an adaptive Checkbox based on whether the target platform is iOS or macOS, following Material design's Cross-platform guidelines.
const

Properties

activeColor → Color?: The color to use when this checkbox is checked.
final
autofocus → bool: True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
final
checkColor → Color?: The color to use for the check icon when this checkbox is checked.
final
fillColor → WidgetStateProperty<Color?>?: The color that fills the checkbox, in all WidgetStates.
final
focusColor → Color?: The color for the checkbox's Material when it has the input focus.
final
focusNode → FocusNode?: An optional focus node to use as the focus node for this widget.
final
hashCode → int: The hash code for this object.
no setterinherited
hoverColor → Color?: The color for the checkbox's Material when a pointer is hovering over it.
final
isError → bool: True if this checkbox wants to show an error state.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
materialTapTargetSize → MaterialTapTargetSize?: Configures the minimum size of the tap target.
final
mouseCursor → MouseCursor?: The cursor for a mouse pointer when it enters or is hovering over the widget.
final
onChanged → ValueChanged<bool?>?: Called when the value of the checkbox should change.
final
overlayColor → WidgetStateProperty<Color?>?: The color for the checkbox's Material.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
semanticLabel → String?: The semantic label for the checkbox that will be announced by screen readers.
final
shape → OutlinedBorder?: The shape of the checkbox's Material.
final
side → BorderSide?: The color and width of the checkbox's border.
final
splashRadius → double?: The splash radius of the circular Material ink response.
final
tristate → bool: If true the checkbox's value can be true, false, or null.
final
value → bool?: Whether this checkbox is checked.
final
visualDensity → VisualDensity?: Defines how compact the checkbox's layout will be.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<Checkbox>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Constants

width → const double: The width of a checkbox widget.