[material_ui] Add Checkbox.markInsets by Munawer-Ali · Pull Request #12690 · flutter/packages

Munawer-Ali · 2026-08-30T11:14:07Z

This PR ports my changes from flutter/flutter#188258 to
flutter/packages,
as part of flutter/flutter#188444

Adds Checkbox.markInsets and CheckboxThemeData.markInsets, which inset the check
mark and the
indeterminate dash within the checkbox without changing the size of the box itself. The
mark and its
stroke shrink proportionally, and the mark is not painted if the insets leave no room.

Fixes flutter/flutter#188031

Tests

Added to packages/material_ui/test/checkbox_test.dart:

Checkbox.markInsets defaults to null
Checkbox with no markInsets paints the check at full stroke width (backward-compat)
Checkbox.markInsets shrinks the check mark and its stroke
Checkbox.markInsets shrinks the indeterminate dash
Checkbox.markInsets larger than the box collapses the mark without crashing
Checkbox.markInsets falls back to CheckboxThemeData.markInsets
Checkbox.markInsets overrides CheckboxThemeData.markInsets

Pre-Review Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. ↩ ↩²

gemini-code-assist

Code Review

This pull request introduces 'markInsets' to 'Checkbox' and 'CheckboxThemeData' to allow insetting the check mark and indeterminate dash within the checkbox, shrinking them proportionally without altering the overall box size. The feedback suggests adding assertions in the 'Checkbox' constructors and the '_CheckboxPainter' setter to enforce that 'markInsets' is non-negative, as specified in the documentation.

gemini-code-assist · 2026-08-30T11:15:19Z

  }) : _checkboxType = _CheckboxType.material,
       assert(tristate || value != null);


Since the documentation for markInsets states that it "Must be non-negative", we should enforce this constraint with an assertion in the constructor to catch invalid values early in development.

}) : _checkboxType = _CheckboxType.material, assert(tristate || value != null), assert(markInsets == null || (markInsets.left >= 0.0 && markInsets.top >= 0.0 && markInsets.right >= 0.0 && markInsets.bottom >= 0.0), 'markInsets must be non-negative.');

Checkbox is a const constructor, so this suggestion won't compile. We should assert on the markInsets setter below instead.

gemini-code-assist · 2026-08-30T11:15:19Z

  }) : _checkboxType = _CheckboxType.adaptive,
       assert(tristate || value != null);


Similarly, we should add the non-negative assertion for markInsets in the Checkbox.adaptive constructor.

}) : _checkboxType = _CheckboxType.adaptive, assert(tristate || value != null), assert(markInsets == null || (markInsets.left >= 0.0 && markInsets.top >= 0.0 && markInsets.right >= 0.0 && markInsets.bottom >= 0.0), 'markInsets must be non-negative.');

Same comment as above, Checkbox.adaptive is a const constructor, so this suggestion won't compile.

gemini-code-assist · 2026-08-30T11:15:19Z

+  set markInsets(EdgeInsets value) {
+    if (_markInsets == value) {
+      return;
+    }
+    _markInsets = value;
+    notifyListeners(); // triggers repaint when it changes
+  }


To ensure that invalid negative insets provided via CheckboxThemeData (which doesn't have constructor assertions) are also caught before they cause rendering anomalies, we should add an assertion in the _CheckboxPainter.markInsets setter.

set markInsets(EdgeInsets value) { if (_markInsets == value) { return; } assert(value.left >= 0.0 && value.top >= 0.0 && value.right >= 0.0 && value.bottom >= 0.0, 'markInsets must be non-negative.'); _markInsets = value; notifyListeners(); // triggers repaint when it changes }

Valid suggestion, but assert(value.isNonNegative, 'markInsets must be non-negative.') is more readable.

elliette · 2026-09-01T21:32:45Z

Thank you for your contribution! Because of the volume of PRs we receive, we require that new contributors use our checklist to guide them through critical steps in creating a Flutter PR. This PR's description is missing that checklist, so it is being marked as a Draft.

Please edit the PR description to add the checklist, then ensure that you have completed all of the steps. Once you've done that, please mark the PR as ready for review.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Munawer-Ali · 2026-09-02T05:57:29Z

@elliette Thanks! I've added the Pre-Review Checklist to the description and completed the steps.
Marking as ready for review.

gemini-code-assist

Code Review

This pull request introduces markInsets to Checkbox and CheckboxThemeData, allowing the check mark and indeterminate dash to be inset and scaled proportionally within the checkbox. The reviewer recommends adding assertions to the Checkbox, Checkbox.adaptive, and CheckboxThemeData constructors to enforce that markInsets values are non-negative, along with a corresponding unit test to verify this validation.

QuncCccccc

LGTM. Thank you for helping port over the fix!

elliette · 2026-09-02T23:13:50Z

  /// {@endtemplate}
  final String? semanticLabel;

+  /// {@template flutter.material.checkbox.markInsets}


This should be {@template material_ui.checkbox.markInsets} now :)

elliette · 2026-09-02T23:14:24Z

  /// If specified, overrides the default value of [Checkbox.side].
  final BorderSide? side;

+  /// {@macro flutter.material.checkbox.markInsets}


Also here {@macro material_ui.checkbox.markInsets}

elliette · 2026-09-02T23:14:55Z

+    - Adds `Checkbox.markInsets` and `CheckboxThemeData.markInsets`, which inset the
+      check mark (and the indeterminate dash) within the checkbox without changing the
+      size of the box itself. The mark and its stroke shrink proportionally.
+  version: minor


Please add a new line at the end of this file

newline

Munawer-Ali · 2026-09-04T12:50:31Z

Thanks for the review @elliette Updated the dartdoc template and macro to
material_ui.checkbox.markInsets in both files, and added the trailing newline
to the changelog file.

Munawer-Ali · 2026-09-09T13:59:46Z

@QuncCccccc Hi Ma’am, could you please review and approve the changes in this PR when you have a chance? Thank you!

QuncCccccc

LGTM. Thanks!

Munawer-Ali · 2026-09-14T13:41:29Z

Hi @elliette , could you please take a look at this PR when you get a chance?

Munawer-Ali · 2026-09-18T08:33:24Z

@QuncCccccc Sorry to disturb you again, Ma’am. Could you please ask @elliette to review this PR as well when you get a chance?

Thank you so much for your support! 🙏

elliette · 2026-09-19T00:11:40Z

  }) : _checkboxType = _CheckboxType.material,
       assert(tristate || value != null);


Checkbox is a const constructor, so this suggestion won't compile. We should assert on the markInsets setter below instead.

elliette · 2026-09-19T00:12:22Z

  }) : _checkboxType = _CheckboxType.adaptive,
       assert(tristate || value != null);


Same comment as above, Checkbox.adaptive is a const constructor, so this suggestion won't compile.

elliette · 2026-09-19T00:14:51Z

+  set markInsets(EdgeInsets value) {
+    if (_markInsets == value) {
+      return;
+    }
+    _markInsets = value;
+    notifyListeners(); // triggers repaint when it changes
+  }


Valid suggestion, but assert(value.isNonNegative, 'markInsets must be non-negative.') is more readable.

elliette · 2026-09-19T00:20:24Z

+  ///
+  /// This insets the check mark inward; the size of the checkbox box itself
+  /// is not affected. The check mark and its stroke shrink to fit the
+  /// remaining space, so the mark stays proportional.


"so the mark stays proportional"

Please add some test cases to confirm this - currently they are all using EdgeInsets.all (e.g. test with EdgeInsets.only(left: 9)).

proportional

Munawer-Ali · 2026-09-19T10:50:25Z

Thanks @elliette

Moved the assert to the setter like you said

The asymmetric tests were a good call, because they failed. Turns out the mark was only
proportional with EdgeInsets.all. With something like only(left: 9) the code was
shrinking the width but not the height, so the check came out squashed. My docs were
wrong about that.

Fixed it so both axes use the same scale and the mark sits centered in whatever space
is left. The dash had the same problem. Symmetric insets look exactly like before, so
none of the old tests changed.

Added tests for only(left:), only(top:), only(right:) and symmetric(horizontal:), plus
one for the dash.

Munawer-Ali · 2026-09-30T18:25:12Z

@QuncCccccc Sorry to bother you again, but could you please ask @elliette to review it again when they have a chance?

elliette

Thanks! One more suggestion otherwise looks good

elliette · 2026-09-30T23:42:49Z

  final BorderSide? side;

+  /// {@macro material_ui.checkbox.markInsets}
+  final EdgeInsets? markInsets;


Could you add markInsets to the existing tests in test/checkbox_theme_test.dart? copyWith, lerp, == and debugFillProperties now handle it, but nothing covers those paths. The "CheckboxThemeData implements debugFillProperties", "lerp with null parameters" and "lerp from populated to null parameters" tests are good places to add it.

[material_ui] Add Checkbox.markInsets

6334c25

github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Aug 30, 2026

gemini-code-assist Bot reviewed Aug 30, 2026

View reviewed changes

Munawer-Ali mentioned this pull request Aug 30, 2026

Add markInsets property to Checkbox flutter/flutter#188258

Closed

9 of 10 tasks

elliette requested review from QuncCccccc and removed request for QuncCccccc September 1, 2026 21:32

elliette marked this pull request as draft September 1, 2026 21:32

Munawer-Ali marked this pull request as ready for review September 2, 2026 05:55

gemini-code-assist Bot reviewed Sep 2, 2026

View reviewed changes

Comment thread packages/material_ui/lib/src/checkbox.dart

Comment thread packages/material_ui/lib/src/checkbox.dart

Comment thread packages/material_ui/lib/src/checkbox_theme.dart

Comment thread packages/material_ui/test/checkbox_test.dart

QuncCccccc approved these changes Sep 2, 2026

View reviewed changes

QuncCccccc added the CICD Run CI/CD label Sep 2, 2026

QuncCccccc requested a review from elliette September 2, 2026 21:37

elliette added CICD Run CI/CD and removed CICD Run CI/CD labels Sep 2, 2026

elliette reviewed Sep 2, 2026

View reviewed changes

Address review: namespace dartdoc template as material_ui, add trailing

0beedec

newline

flutter-dashboard Bot removed the CICD Run CI/CD label Sep 4, 2026

QuncCccccc added the CICD Run CI/CD label Sep 10, 2026

QuncCccccc approved these changes Sep 10, 2026

View reviewed changes

Merge branch 'main' into checkbox-mark-insets

2628a5b

flutter-dashboard Bot removed the CICD Run CI/CD label Sep 12, 2026

elliette reviewed Sep 19, 2026

View reviewed changes

Address review: assert non-negative markInsets, keep the mark

c1515ba

proportional

Munawer-Ali requested a review from elliette September 25, 2026 05:27

QuncCccccc added the CICD Run CI/CD label Sep 30, 2026

Merge branch 'main' into checkbox-mark-insets

adba314

flutter-dashboard Bot removed the CICD Run CI/CD label Sep 30, 2026

elliette added the CICD Run CI/CD label Sep 30, 2026

elliette reviewed Sep 30, 2026

View reviewed changes

Munawer-Ali added 2 commits October 2, 2026 00:01

Address review: add markInsets coverage to CheckboxThemeData tests

d86b9f4

Address review: add markInsets coverage to CheckboxThemeData tests

a84ec1e

flutter-dashboard Bot removed the CICD Run CI/CD label Oct 1, 2026

Merge branch 'main' into checkbox-mark-insets

f5c9041

		}) : _checkboxType = _CheckboxType.material,
		assert(tristate \|\| value != null);

		}) : _checkboxType = _CheckboxType.adaptive,
		assert(tristate \|\| value != null);

Conversation

Munawer-Ali commented Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests

Pre-Review Checklist

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Aug 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Aug 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Aug 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elliette commented Sep 1, 2026

Uh oh!

Munawer-Ali commented Sep 2, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

QuncCccccc left a comment

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!

Munawer-Ali commented Sep 4, 2026

Uh oh!

Munawer-Ali commented Sep 9, 2026

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Munawer-Ali commented Sep 14, 2026

Uh oh!

Munawer-Ali commented Sep 18, 2026

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!

Munawer-Ali commented Sep 19, 2026

Uh oh!

Munawer-Ali commented Sep 30, 2026

Uh oh!

elliette left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Munawer-Ali commented Aug 30, 2026 •

edited

Loading