Colored box optimization (#176028) #176073

definev · 2025-09-26T04:02:31Z

This PR fixed visual bug when placing multiple ColoredBoxs together. (Fixes #176028)

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

flutter-dashboard · 2025-09-26T04:02:35Z

It looks like this pull request may not have tests. Please make sure to add tests or get an explicit test exemption before merging.

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. If you believe this PR qualifies for a test exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!). The test exemption team is a small volunteer group, so all reviewers should feel empowered to ask for tests, without delegating that responsibility entirely to the test exemption group.

google-cla · 2025-09-26T04:02:36Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

gemini-code-assist

Code Review

This pull request introduces an optimization to ColoredBox by disabling anti-aliasing when drawing its background rectangle. This is a good change that should fix visual artifacts, such as seams between adjacent boxes. I've added one suggestion for a further performance improvement by caching the Paint object to avoid re-allocating it on every paint call.

gemini-code-assist · 2025-09-26T04:04:04Z

packages/flutter/lib/src/widgets/basic.dart

+        Paint()
+          ..color = color
+          ..isAntiAlias = false,


This is a good optimization. To further improve performance, consider caching the Paint object as a field in _RenderColoredBox to avoid allocating it on every paint call. The color can then be set on the cached Paint object before drawing.

For example:

class _RenderColoredBox extends RenderProxyBoxWithHitTestBehavior { // ... final Paint _paint = Paint()..isAntiAlias = false; @override void paint(PaintingContext context, Offset offset) { // ... if (size > Size.zero) { _paint.color = color; context.canvas.drawRect(offset & size, _paint); } // ... } }

I really wonder if there is a performance benefit here in real life or not. After seeing #171194 it always makes me nervous. Fine as-is though.

victorsanni

Hi @definev, thanks for the PR. Could you add a test to make sure this change does not get regressed?

definev · 2025-09-27T01:47:50Z

Hi @victorsanni, I created the test. Feel free to let me know if you’d like me to write more tests for it. This is my first time contributing to Flutter, thank you so much ☺️

victorsanni

This golden test in the rfw package is failing with the changes in this PR.

definev · 2025-09-29T18:54:47Z

I think that’s the expected behavior since it changes the way ColoredBox is rendered. The next step I should take is to either regenerate all the golden tests or declare this as a breaking change that may affect existing golden tests? cc: @victorsanni

definev · 2025-10-05T13:38:46Z

@victorsanni @dkwingsmt Are there any new updates for me to do?

victorsanni

LGTM awaiting review from someone more knowledgeable about the subject such as @dkwingsmt.

For the failing customer test, the process is to disable it in a separate PR which will land before this one, then re-enable it after this PR lands while approving the new goldens. I can open a PR to do that.

justinmc

LGTM 👍 . I would guess that we were notting getting much benefit from setting isAntiAlias to true in this case, but I'm interested to see if the Google tests have any failures. We should watch out for any failures that appear to have benefitted from antialiasing.

And +1 to @dkwingsmt reviewing this as well.

justinmc · 2025-10-06T17:40:49Z

packages/flutter/lib/src/widgets/basic.dart

-      context.canvas.drawRect(offset & size, Paint()..color = color);
+      _paint.color = color;
+      context.canvas.drawRect(offset & size, _paint);


Can you instantiate the Paint here instead of reusing it each time? I avoid try to avoid this pattern after seeing #171194, even though that should be fixed by now.

Sure, that my initial approach to. Seeing Gemini suggest reuse paint object so i change to fit it comment :-) Let reverse that

justinmc · 2025-10-06T17:43:13Z

packages/flutter/lib/src/widgets/basic.dart

+        Paint()
+          ..color = color
+          ..isAntiAlias = false,


I really wonder if there is a performance benefit here in real life or not. After seeing #171194 it always makes me nervous. Fine as-is though.

dkwingsmt · 2025-10-07T19:52:32Z

Thanks for the nomination, although I wouldn't call myself an expert at all. :)

I played with this change locally and observed that there are visual changes to all ColoredBoxes, as expected. The edges are no longer as clear.

Even if we think this change is too small to notice or even healthy for having a clearer border, it's bound to break millions of golden tests. The impact is far too great. I don't think we can justify this breakage.

It might be better to expose the isAntiAlias as a parameter and keep the current behavior default. I'm not sure how viable it is, since the parameter might need to be propagated to some other widgets, such as Container. But it's definitely better than breakage like this.

justinmc · 2025-10-07T22:04:05Z

Good find @dkwingsmt, I was worried something like that might happen. +1 to your recommendation of exploring exposing isAntiAlias.

definev · 2025-10-08T08:10:03Z

I think the effect should apply to all ColoredBox widgets since they depend on each other. For example, placing one anti-aliased ColoredBox between two non-anti-aliased ones still causes the visual bug to appear.

We could introduce a new static variable in ColoredBox, called defaultIsAntiAlias, which would be set to true by default. However, users could set it to false if they prefer crisp borders.

If we still want to expose it, let add a 'bool? isAntiAlias' and set it to defaultIsAntiAlias if null.

dkwingsmt · 2025-10-08T16:41:34Z

I think the effect should apply to all ColoredBox widgets since they depend on each other. For example, placing one anti-aliased ColoredBox between two non-anti-aliased ones still causes the visual bug to appear.

Turning off anti-alias has many down sides, such as artifacts during rotation or zooming animation. Notice the borders in the following examples:

Screen.Recording.2025-10-08.at.9.39.31.AM.mp4

It should be up to the developers to decide if they really want to use, or need, the non-antialias version. In general, the antialias version should be more widely applicable.

definev · 2025-10-09T11:39:31Z

Agree! I’ve updated the code based on your comment, exposing isAntiAlias in ColoredBox.
One small detail I observed in the SwiftUI framework is that they also use antiAlias, but they don’t have the same visual bug we encountered. Apparently, Flutter on mobile doesn’t have that issue either, so I think it’s related to the engine layer. The current solution is to expose isAntiAlias in ColoredBox.

Note: The stripe is still visible in SwiftUI, but it’s much thinner than in Flutter and only appears when rotating the child.

Screen.Recording.2025-10-09.at.12.14.23.mov

Screen.Recording.2025-10-09.at.12.13.53.mov

SwiftUI	Flutter

packages/flutter/lib/src/widgets/basic.dart

packages/flutter/lib/src/widgets/container.dart

dkwingsmt · 2025-10-09T19:05:59Z

packages/flutter/lib/src/widgets/basic.dart

  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(DiagnosticsProperty<Color>('color', color));
+    properties.add(DiagnosticsProperty<bool?>('isAntiAlias', isAntiAlias));


Maybe defaultValue: true?

This isn't fixed?

I already fixed it

I set default to true on constructor

packages/flutter/test/widgets/basic_test.dart

definev · 2025-10-13T13:55:56Z

@dkwingsmt i added the test but i don't know how to make it generate new golden test image and the CI is failing i don't know why. I follow the Writing-a-golden-file-test-for-package-flutter.md but seem i don't need to edit ci.yaml file

dkwingsmt · 2025-10-13T17:47:41Z

The ci.yaml validation failure is simply due to the PR base being too old. I've updated it with the latest master. The golden file will be generated once all checks are green. Let's see how it goes. Thank you.

dkwingsmt · 2025-10-13T17:49:29Z

packages/flutter/lib/src/widgets/container.dart

+  /// The [ColoredBox.isAntiAlias] property.
+  ///


The macro already has the first paragraph.

Suggested change

/// The [ColoredBox.isAntiAlias] property.

///

justinmc · 2025-10-14T22:24:16Z

@definev Looks like there are still analyzer failures FYI.

definev · 2025-10-15T01:57:30Z

I will check on that

definev · 2025-10-15T05:08:55Z

I’ve fixed the format, but I haven’t found a way to resolve the Mac framework_tests_impeller and tree-status issues yet.
One more question - I saw the flutter/goldens repository. Do I need to upload the golden test images before merging the PR into master?

victorsanni · 2025-10-15T17:57:09Z

I’ve fixed the format, but I haven’t found a way to resolve the Mac framework_tests_impeller and tree-status issues yet.

Those are infra issues unrelated to this PR.

One more question - I saw the flutter/goldens repository. Do I need to upload the golden test images before merging the PR into master?

No, adding a golden test using matchesGoldenFile is sufficient. A contributor with commit access will then go ahead to triage the golden images in the flutter gold tool.

flutter-dashboard · 2025-10-15T18:23:47Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #176073 at sha 04ad4ed

dkwingsmt · 2025-10-23T18:08:32Z

LGTM. Thank you for the contribution!

auto-submit · 2025-10-28T22:09:00Z

autosubmit label was removed for flutter/flutter/176073, because The base commit of the PR is older than 7 days and can not be merged. Please merge the latest changes from the main into this branch and resubmit the PR.

github-actions bot added the framework flutter/packages/flutter repository. See also f: labels. label Sep 26, 2025

gemini-code-assist bot reviewed Sep 26, 2025

View reviewed changes

victorsanni reviewed Sep 26, 2025

View reviewed changes

definev requested a review from victorsanni September 27, 2025 08:19

victorsanni reviewed Sep 29, 2025

View reviewed changes

definev requested a review from victorsanni September 30, 2025 10:23

victorsanni requested a review from dkwingsmt September 30, 2025 16:55

victorsanni approved these changes Oct 6, 2025

View reviewed changes

justinmc approved these changes Oct 6, 2025

View reviewed changes

definev force-pushed the colored_box_optimization branch from 65319cd to e63e299 Compare October 9, 2025 06:27

dkwingsmt reviewed Oct 9, 2025

View reviewed changes

dkwingsmt reviewed Oct 13, 2025

View reviewed changes

definev requested a review from dkwingsmt October 14, 2025 07:42

dkwingsmt approved these changes Oct 23, 2025

View reviewed changes

justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 28, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Oct 28, 2025

victorsanni and others added 2 commits October 28, 2025 15:31

Merge branch 'master' into colored_box_optimization

89ed904

Merge branch 'master' into colored_box_optimization

f9546e8

dkwingsmt added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 2, 2025

auto-submit bot added this pull request to the merge queue Nov 2, 2025

Merged via the queue into flutter:master with commit 7efa2ae Nov 2, 2025
77 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Nov 2, 2025

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to bd24c21d833b (65 revisions) flutter/packages#10350

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

87bab1c

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to bf4957815e10 (66 revisions) flutter/packages#10351

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

0ba5074

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to 633d6591a1f0 (67 revisions) flutter/packages#10353

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

a409712

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to b87e863b80ad (68 revisions) flutter/packages#10354

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

75e86bb

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to 82ff983ee5a9 (69 revisions) flutter/packages#10355

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

44e106d

engine-flutter-autoroll mentioned this pull request Nov 3, 2025

Roll Flutter from 6f8abdd77820 to 8e567b884d95 (70 revisions) flutter/packages#10356

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 3, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

8033d04

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

3fe6238

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

5b77ae0

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

fbde7d7

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 4, 2025

7efa2aed3 Colored box optimization (#176028) (flutter/flutter#176073)

c1027d1

Piinks mentioned this pull request Nov 7, 2025

Flutter Notable Commits - 2025 #161460

Open

Colored box optimization (#176028) #176073

Colored box optimization (#176028) #176073

Uh oh!

Conversation

definev commented Sep 26, 2025 • edited by victorsanni Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented Sep 26, 2025

Uh oh!

google-cla bot commented Sep 26, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

definev commented Sep 27, 2025

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

definev commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

definev commented Oct 5, 2025

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Choose a reason for hiding this comment

Uh oh!

dkwingsmt commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Oct 7, 2025

Uh oh!

definev commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkwingsmt commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

definev commented Oct 9, 2025

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

definev Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

definev commented Oct 13, 2025

Uh oh!

dkwingsmt commented Oct 13, 2025

Uh oh!

Choose a reason for hiding this comment

definev commented Sep 26, 2025 •

edited by victorsanni

Loading

definev commented Sep 29, 2025 •

edited

Loading

justinmc left a comment •

edited

Loading

dkwingsmt commented Oct 7, 2025 •

edited

Loading

definev commented Oct 8, 2025 •

edited

Loading

dkwingsmt commented Oct 8, 2025 •

edited

Loading

definev Oct 14, 2025 •

edited

Loading