Updated `Checkbox.fillColor` behavior
Summary
The Checkbox.fillColor
is now applied to the checkbox’s background when
the checkbox is unselected.
Context
Previously, the Checkbox.fillColor
was applied to the checkbox’s border
when the checkbox was unselected and its background was transparent.
With this change, the Checkbox.fillColor
is applied to the checkbox’s
background and the border uses the Checkbox.side
color when the checkbox
is unselected.
Description of change
The Checkbox.fillColor
is now applied to the checkbox’s background when
the checkbox is unselected instead of being used as the border color.
Migration guide
The updated Checkbox.fillColor
behavior applies the fill color to the
checkbox’s background in the unselected state. To get the previous behavior,
set Checbox.fillColor
to Colors.transparent
in the unselected state and
set Checkbox.side
to the desired color.
If you use the Checkbox.fillColor
property to customize the checkbox.
Code before migration:
Checkbox(
fillColor: MaterialStateProperty.resolveWith((states) {
if (!states.contains(MaterialState.selected)) {
return Colors.red;
}
return null;
}),
value: _checked,
onChanged: _enabled
? (bool? value) {
setState(() {
_checked = value!;
});
}
: null,
),
Code after migration:
Checkbox(
fillColor: MaterialStateProperty.resolveWith((states) {
if (!states.contains(MaterialState.selected)) {
return Colors.transparent;
}
return null;
}),
side: const BorderSide(color: Colors.red, width: 2),
value: _checked,
onChanged: _enabled
? (bool? value) {
setState(() {
_checked = value!;
});
}
: null,
),
If you use the CheckboxThemeData.fillColor
property to customize the checkbox.
Code before migration:
checkboxTheme: CheckboxThemeData(
fillColor: MaterialStateProperty.resolveWith((states) {
if (!states.contains(MaterialState.selected)) {
return Colors.red;
}
return null;
}),
),
Code after migration:
checkboxTheme: CheckboxThemeData(
fillColor: MaterialStateProperty.resolveWith((states) {
if (!states.contains(MaterialState.selected)) {
return Colors.transparent;
}
return null;
}),
side: const BorderSide(color: Colors.red, width: 2),
),
Timeline
Landed in version: 3.10.0-17.0.pre
In stable release: 3.13.0
References
API documentation:
Relevant issues:
Relevant PRs: