Skip to content
Boring Doc
BreakingHigh impactOfficial migration guidesince 3.13.0landed 3.10.0-17.0.pre

Updated Checkbox.fillColor behavior

Framework · Official source

What changed?

The `Checkbox.fillColor` is now applied to the checkbox's background when the checkbox is unselected.

Original behavior

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.

New behavior

The `Checkbox.fillColor` is now applied to the checkbox's background when the checkbox is unselected instead of being used as the border color.

Will this affect my application?

Who is affected
Applications and packages relying on the previous behaviour or signature. Code that uses Checkbox.fillColor, Checkbox.side, Colors.transparent and related APIs.
Practical impact
Behaviour or API differences that can break builds or change runtime behaviour.
What action should I take?
Follow the official migration guide below, update affected call sites, run `dart fix --apply` where a fix is available, then run your tests.
APIs mentioned:Checkbox.fillColorCheckbox.sideColors.transparentCheckboxThemeData.fillColorCheckboxCheckboxThemeData

How do I migrate safely?

Before and after (from the official guide)

dart+2−1
Before
1 Checkbox(
2 fillColor: MaterialStateProperty.resolveWith((states) {
3 if (!states.contains(MaterialState.selected)) {
4− return Colors.red;
5 }
6 return null;
7 }),
 
8 value: _checked,
9 onChanged: _enabled
10 ? (bool? value) {
11 setState(() {
12 _checked = value!;
13 });
14 }
15 : null,
16 ),
After
1 Checkbox(
2 fillColor: MaterialStateProperty.resolveWith((states) {
3 if (!states.contains(MaterialState.selected)) {
4+ return Colors.transparent;
5 }
6 return null;
7 }),
8+ side: const BorderSide(color: Colors.red, width: 2),
9 value: _checked,
10 onChanged: _enabled
11 ? (bool? value) {
12 setState(() {
13 _checked = value!;
14 });
15 }
16 : null,
17 ),
Raw before / after
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,
),
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,
),
Official migration guide (excerpt, © The Flutter Authors, CC BY 3.0)

The updated Checkbox.fillColor behavior applies the fill color to the checkbox's background in the unselected state. To get the previous behavior, set Checkbox.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),
),
Migration assistantAI-generated · grounded in cited sources
AI explanations are not configured
Set AI_PROVIDER (for example to openai-compatible with a local Ollama or LM Studio endpoint) to enable grounded explanations. Everything else on this page works without an AI provider.

Evidence & verification

Official migration guide·Verified classification (95%)

Listed in the official breaking-changes index (docs.flutter.dev/release/breaking-changes).

An official announcement or migration guide documents an intended behaviour or API change. A verified source change (git diff) shows code changed but does not by itself prove a public API is breaking. AI interpretations are labelled and never used to classify a change.

Source commit
b3045439b7c0
Source last updated
Oct 21, 2026
Last synchronized
Oct 21, 2026
Publication status
published
Publication history
  • Oct 21, 2026, 8:31 PM: new → published (ingestion) — Backed by an official breaking-change/migration guide.
AI explanationAI-generated · grounded in cited sources
AI explanations are not configured
Set AI_PROVIDER (for example to openai-compatible with a local Ollama or LM Studio endpoint) to enable grounded explanations. Everything else on this page works without an AI provider.
Was this useful?