![]() |
VOOZH | about |
Checkbox in Flutter is a material design widget. It is always used in the Stateful Widget as it does not maintain its own state. We can use its onChanged property to interact with or modify other widgets in the Flutter app. Like most of the other flutter widgets, it also comes with many properties like activeColor, checkColor, mouseCursor, etc, to let developers have full control over the widget's look and feel.
Checkbox Checkbox({
Key? key,
required bool? value,
bool tristate = false,
required void Function(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,
})
Property | Description |
|---|---|
activeColor | This property takes the Color class as the object to fill in the CheckBox when it is checked. |
autofocus | This property takes in a boolean value as the object. If it is set to true the CheckBox gets selected at the initial focus. |
checkColor | This property also takes in Color class as the object. It assigns color to the check icon. |
focusColor | This property also takes in Color class as the object to give color to the checkbox when it is in focus. |
focusNode | It sets an additional focus node to get the focus of the cursor. It takes in FocusNode as the object. |
hoverColor | The hoverColor property takes in Color class as the object. It controls the color of the checkbox at the time of hover. |
materialTapTargetSize | It controls the size of the tapped area. It takes MaterialTapTargetSize enum as the object. |
mouseCursor | This determines the cursor type at the time of the pointer event. It holds MouseCursor class as the object. |
onChanged | ValueChanged<T> typedef is the object given to this property. It is called when the value in the CheckBox widget should be changed. |
tristate | Usually checkbox is either checked or not checked. If this property which takes a boolean as the object is set to true then it can set to null also. |
value | This property takes in a boolean value as the object to determine whether the CheckBox is checked or not. |
visualDensity | It controls the compactness of CheckBox widget, by taking in the VisualDensity class as the object. |
fillColor | Provides control over Checkbox background color. |
shape | To customize the shape of the checkbox, you can use the shape property, which takes RoundedRectangleBorder or other shapes. |
main.dart:
Output:
Explanation of the above Program:
The value property of the CheckBox is set to false at the starting of _HomePageState class. The CheckBox widget is pace in the front of a Text widget separated by a SizedBox inside a Row. The first thing inside the CheckBox widget is calling of the value property. Then we have onChanged property which holding a function to change the state of CheckBox, which makes the CheckBox checked on click. Doing all this we have got a task which can be checked.