ColoredBox create unwanted strip when placed close together due to the framework assuming isAntiAlias = true #176028
Description
Steps to reproduce
I encountered this issue when placing multiple widgets together with the same background. It creates an unwanted visible strip in the background.
I tried the same code in other frameworks, such as SwiftUI, and it rendered as expected.
| Flutter | SwiftUI |
|---|---|
|
 |
 |
 |
Expected results
No unwanted strip when render multiple widgets with the same background color close together.
Actual results
I dug into the implementation of ColoredBox and noticed that the paint function always assumes that Paint() is anti-aliased by default. This is generally good, but as we can see when drawing a rectangle, there’s no need to enable anti-aliasing to ensure smoothness. In fact, it introduces a visual bug like the one I described above.
class _RenderColoredBox extends RenderProxyBoxWithHitTestBehavior {
...
@override
void paint(PaintingContext context, Offset offset) {
// It's tempting to want to optimize out this `drawRect()` call if the
// color is transparent (alpha==0), but doing so would be incorrect. See
// https://github.com/flutter/flutter/pull/72526#issuecomment-749185938 for
// a good description of why.
if (size > Size.zero) {
context.canvas.drawRect(offset & size, Paint()..color = color);
}
if (child != null) {
context.paintChild(child!, offset);
}
}
}The fix for this problem is simple:
@override
void paint(PaintingContext context, Offset offset) {
// It's tempting to want to optimize out this `drawRect()` call if the
// color is transparent (alpha==0), but doing so would be incorrect. See
// https://github.com/flutter/flutter/pull/72526#issuecomment-749185938 for
// a good description of why.
if (size > Size.zero) {
context.canvas.drawRect(
offset & size,
Paint()
..color = color
..isAntiAlias = false,
);
}
if (child != null) {
context.paintChild(child!, offset);
}
}Code sample
Dartpad link: https://dartpad.dev/?id=72d0881637a25d884d7b922cab8bb0ff
Screenshots or Video
No response
Logs
No response
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.37.0-1.0.pre-232, on macOS 26.0 25A354 darwin-arm64, locale en-VN)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 26.0.1)
[✓] Chrome - develop for the web
[✓] Connected device (3 available)
! Error: Browsing on the local area network for fhihung.iphone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for Bui’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for Duong phone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for zennn.phone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for iPad của Chi bé. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for iPhone 12 Chi. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• No issues found!Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listRunning on desktopFound to occur in 3.35Found to occur in 3.37flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Framework teamTriaged by Framework team