Fix DecoratedSliver sample to avoid antialiasing gap#179848
Conversation
github-actions
Bot
added
framework
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the SliverDecorationExample by consolidating two DecoratedSliver widgets into a single DecoratedSliver that now wraps a SliverMainAxisGroup. This change was made to prevent antialiasing gaps that could appear between adjacent DecoratedSlivers. The original RadialGradient decoration and its associated content ('A moon on a night sky') were removed, and the LinearGradient is now applied to the single DecoratedSliver which contains both 'A night sky' and 'A blue sky' content sections within the SliverMainAxisGroup. Corresponding test cases were updated: the test for the radial gradient was removed, the test for the linear gradient was adjusted to find a single DecoratedSliver by type, and a new test was added to verify the presence of the SliverMainAxisGroup.
brahim-guaali
force-pushed
the
fix/166822-decorated-sliver-sample
branch
4 times, most recently
from
27cae56 to
f3dd46e
Compare
dkwingsmt
left a comment
dkwingsmt
left a comment
There was a problem hiding this comment.
The change looks good to me. Although, I wonder if there's something we can do to prevent this. Is there any reason why the gap would appear if done this way? Can we alert developers from this pattern?
justinmc
left a comment
justinmc
left a comment
There was a problem hiding this comment.
LGTM 👍 , thanks for fixing.
I'm not sure exactly why this change stops the antialiasing gap, @brahim-guaali could you explain? This is a known issue in the framework (#14288) with similar kinds of workarounds. It looks like no one has come up with a generic solution there, but maybe for slivers there is some guidance we could give.
justinmc
added
the
autosubmit
auto-submit
Bot
removed
the
autosubmit
|
autosubmit label was removed for flutter/flutter/179848, 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. |
Antialiasing gap occurs because when two separate DecoratedSliver widgets are placed adjacent to each other, each one paints its decoration independently. Due to floating-point precision limitations and antialiasing during rendering, sub-pixel gaps can appear at the boundary between two separately-painted regions. using a single DecoratedSliver wrapping a SliverMainAxisGroup, the gradient background is painted once as a continuous surface that spans all the child slivers. This eliminates the boundary where the gap would otherwise appear. This is essentially the same workaround pattern used for the general antialiasing seam issue (#14288) - avoiding adjacent separately-painted regions by combining them under a single painted surface. cc @justinmc |
See my reply to @justinmc above for why the gap appears. Alerting developers: This is part of the broader antialiasing seam issue (#14288). Potential mitigations like documentation updates or lint rules could be explored in separate efforts. For this PR, fixing the sample ensures the docs don't showcase a problematic pattern. CC @dkwingsmt |
|
@ksokolovskyi @AbdeMohlbi any chance to switch this to auto submit? |
The previous sample used two adjacent DecoratedSlivers with gradients that met at the same color, causing a visible antialiasing gap when scrolling on desktop platforms. This change uses a single DecoratedSliver with SliverMainAxisGroup to wrap the content, eliminating the gap. The moon effect (RadialGradient) is preserved by layering it as a Container decoration on top of the DecoratedSliver's LinearGradient background. Fixes flutter#166822
Piinks
force-pushed
the
fix/166822-decorated-sliver-sample
branch
from
82c7ff0 to
3f969f0
Compare
|
I've rebased this so it can land - the base commit was over 7 days old. Should be good to go now! |
|
I saw you tagged me in several PRs and they are all taken care of. Feel free to at me again if anything I can help. Thank you. |
flutter-dashboard
Bot
removed
the
autosubmit
flutter/flutter@9eafba4...c305f1f 2026-02-02 [email protected] Fix DecoratedSliver sample to avoid antialiasing gap (flutter/flutter#179848) 2026-02-02 [email protected] [Android] Add predictive back support for FlutterFragment and FlutterFragmentActivity (flutter/flutter#181124) 2026-02-02 [email protected] Roll Packages from 510dd40 to 837dbbd (3 revisions) (flutter/flutter#181811) 2026-02-02 [email protected] Roll Dart SDK from 434c5c6d1889 to 1aa8f2de7587 (1 revision) (flutter/flutter#181810) 2026-02-02 [email protected] Use null-aware elements in cupertino/list_tile.dart (flutter/flutter#181243) 2026-02-02 [email protected] Use null-aware elements in material/dialog.dart (flutter/flutter#181244) 2026-02-02 [email protected] Use null-aware spread in cupertino/app.dart (flutter/flutter#181585) 2026-02-02 [email protected] Use null-aware spread in material/app.dart (flutter/flutter#181586) 2026-02-02 [email protected] Roll Dart SDK from 84abc8d58ec8 to 434c5c6d1889 (1 revision) (flutter/flutter#181800) 2026-02-02 [email protected] Roll Skia from c14c5b243395 to 43fa79e1c51f (8 revisions) (flutter/flutter#181797) 2026-02-02 [email protected] Roll Skia from 4ee9eb659ae0 to c14c5b243395 (1 revision) (flutter/flutter#181780) 2026-02-02 [email protected] Roll Fuchsia Linux SDK from nI52U4LJMrBv8G1M9... to 1L4m9qCikk-JzrNWE... (flutter/flutter#181779) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
## Description The DecoratedSliver sample was showing an antialiasing gap between two adjacent slivers when scrolling on desktop platforms (as reported in flutter#166822). The fix uses a single `DecoratedSliver` wrapping a `SliverMainAxisGroup` instead of two separate `DecoratedSliver` widgets. This eliminates the gap while still demonstrating the widget effectively. Fixes flutter#166822 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] All existing and new tests are passing. [Contributor Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [](https://www.talabat.com) [](https://github.com/search?q=org%3Aflutter+talabat&type=pullrequests)
## Description The DecoratedSliver sample was showing an antialiasing gap between two adjacent slivers when scrolling on desktop platforms (as reported in flutter#166822). The fix uses a single `DecoratedSliver` wrapping a `SliverMainAxisGroup` instead of two separate `DecoratedSliver` widgets. This eliminates the gap while still demonstrating the widget effectively. Fixes flutter#166822 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] All existing and new tests are passing. [Contributor Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [](https://www.talabat.com) [](https://github.com/search?q=org%3Aflutter+talabat&type=pullrequests)
## Description The DecoratedSliver sample was showing an antialiasing gap between two adjacent slivers when scrolling on desktop platforms (as reported in flutter#166822). The fix uses a single `DecoratedSliver` wrapping a `SliverMainAxisGroup` instead of two separate `DecoratedSliver` widgets. This eliminates the gap while still demonstrating the widget effectively. Fixes flutter#166822 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] All existing and new tests are passing. [Contributor Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [](https://www.talabat.com) [](https://github.com/search?q=org%3Aflutter+talabat&type=pullrequests)
5 participants
Description
The DecoratedSliver sample was showing an antialiasing gap between two adjacent slivers when scrolling on desktop platforms (as reported in #166822).
The fix uses a single
DecoratedSliverwrapping aSliverMainAxisGroupinstead of two separateDecoratedSliverwidgets. This eliminates the gap while still demonstrating the widget effectively.Fixes #166822
Pre-launch Checklist