Implements the Android native stretch effect as a fragment shader (Impeller-only). #169293

MTtankkeo · 2025-05-22T18:26:48Z

Sorry, Closing PR #169196 and reopening this in a new PR for clarity and a cleaner commit history.

Fixed an issue #82906

In the existing Flutter implementation, the Android stretch overscroll effect is achieved using Transform. However, this approach does not evenly stretch the screen as it does in the native Android environment. Therefore, in the Impeller environment, add or modify files to implement the effect using a fragment shader identical to the one used in native Android.

Note

The addition of a separate test file for StretchOverscrollEffect was not included because it would likely duplicate coverage already provided by the changes made in overscroll_stretch_indicator_test.dart within this PR.

However, since determining whether stretching occurred by referencing global coordinates is currently considered impossible with the new Fragment Shader approach, the code was modified to partially exclude the relevant test logic in the Impeller.

For reference, in the page_view_test.dart test, there was an issue with referencing the child Transform widget, but because the StretchOverscrollEffect widget is defined instead of the Transform widget in the Impeller environment, the code logic was adjusted accordingly.

Golden image tests were updated as the visual effect changes.

Reference Source

https://cs.android.com/android/platform/superproject/main/+/main:frameworks/base/libs/hwui/effects/StretchEffect.cpp

`Old` Skia (Using Transform)

old.mp4

`New` Impeller (Using fragment shader)

new.mp4

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.

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

flutter-dashboard · 2025-05-22T20:34:14Z

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 #169293 at sha 3c6f85a

flutter-dashboard · 2025-05-22T22:32:15Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha 8b26ebc

MTtankkeo · 2025-05-23T15:40:02Z

😭 Hi @justinmc, @dkwingsmt, @Piinks, could you please review this PR? Thanks! 😭

packages/flutter/lib/src/material/shaders/stretch_overscroll.frag

Piinks

Hi @MTtankkeo thanks for the contribution! This type of change would involve some changes in the engine I think.

flutter-dashboard · 2025-05-23T18:39:04Z

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

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.

dkwingsmt · 2025-05-23T19:03:27Z

After an internal discussion between @Piinks, a couple other folks, and I, we've come to agree with the current direction to add the shader to the framework as long as it aligns with how we implement the ink sparkle. We'll take a more detailed review at this PR soon, but I just want to let you know ASAP so you don't have to look into the engine code. Sorry for the confusion!

packages/flutter/lib/src/material/stretch_overscroll_effect.dart

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

flutter-dashboard · 2025-05-23T21:11:14Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha 93ad7c2

chunhtai

Code mostly looks good to me just left some minor comment.

packages/flutter/lib/src/material/shaders/stretch_overscroll.frag

packages/flutter/lib/src/material/stretch_overscroll_effect.dart

Co-authored-by: Tong Mu <[email protected]>

flutter-dashboard · 2025-05-28T22:38:46Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha e33cbcc

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

Co-authored-by: Tong Mu <[email protected]>

flutter-dashboard · 2025-05-29T08:38:48Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha 067d9cd

Piinks

Thank you for the updates! Sorry again for my misguidance earlier. So excited to see this move forward.

Piinks · 2025-06-02T19:05:50Z

packages/flutter/lib/src/material/shaders/stretch_overscroll.frag

+  float norm_viewport_width = 1.0;
+  float norm_viewport_height = 1.0;
+
+  out_u_norm = compute_streched_effect(


Yep, one axis assumption is safe here I think. The widget is limited to one axis, and with the 2D scrollables they have their own indicator for each axis.

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

Piinks · 2025-06-02T19:11:30Z

packages/flutter/lib/src/material/shaders/stretch_overscroll.frag

+  float norm_viewport_width = 1.0;
+  float norm_viewport_height = 1.0;
+
+  out_u_norm = compute_streched_effect(


@MTtankkeo can we simplify this then?

packages/flutter/lib/src/material/shaders/stretch_overscroll.frag

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

Piinks · 2025-06-02T19:22:41Z

packages/flutter/test/widgets/overscroll_stretch_indicator_test.dart

+        isImpeller
+            ? 'overscroll_stretch.vertical.start.stretched.impeller.png'
+            : 'overscroll_stretch.vertical.start.stretched.png',


Yeah, we do not need separate files like this for impeller. It's already handled by a separate test shard. For example: https://flutter-gold.skia.org/search?corpus=flutter&include_ignored=false&left_filter=name%3Dwidgets.overscroll_stretch.horizontal.rtl&max_rgba=0&min_rgba=0&negative=true&not_at_head=false&positive=true&reference_image_required=false&right_filter=&sort=descending&untriaged=true

packages/flutter/test/widgets/overscroll_stretch_indicator_test.dart

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

Co-authored-by: Kate Lovett <[email protected]>

flutter-dashboard · 2025-06-02T23:28:59Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha a11a6c8

MTtankkeo · 2025-06-02T23:47:01Z

Note

Updated to avoid using a separate golden image name or identifier based on review feedback.

packages/flutter/lib/src/material/shaders/stretch_effect.frag

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

Co-authored-by: Tong Mu <[email protected]>

flutter-dashboard · 2025-06-03T00:58:45Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha 1275943

flutter-dashboard · 2025-06-14T21:53:46Z

Golden file changes are available for triage from new commit, Click here to view.

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 #169293 at sha ee85d62

Add stretch overscroll effect identical to Android native

c2a6ef1

github-actions bot added tool Affects the "flutter" command-line tool. See also t: labels. framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. f: scrolling Viewports, list views, slivers, etc. labels May 22, 2025

flutter-dashboard bot added the will affect goldens Changes to golden files label May 22, 2025

MTtankkeo force-pushed the stretch branch from 3c6f85a to 1368f4e Compare May 22, 2025 20:35

MTtankkeo marked this pull request as draft May 22, 2025 20:38

MTtankkeo marked this pull request as ready for review May 22, 2025 21:01

Piinks reviewed May 23, 2025

View reviewed changes

packages/flutter/lib/src/material/shaders/stretch_overscroll.frag Outdated Show resolved Hide resolved

Piinks reviewed May 23, 2025

View reviewed changes

MTtankkeo marked this pull request as draft May 23, 2025 18:35

MTtankkeo marked this pull request as ready for review May 23, 2025 19:22

chunhtai reviewed May 23, 2025

View reviewed changes

MTtankkeo requested a review from chunhtai May 26, 2025 17:45

chunhtai reviewed May 27, 2025

View reviewed changes

MTtankkeo requested review from a team and matanlurey as code owners May 27, 2025 20:21

Update packages/flutter/lib/src/material/stretch_overscroll_effect.dart

e33cbcc

Co-authored-by: Tong Mu <[email protected]>

MTtankkeo force-pushed the stretch branch from cf732cc to e33cbcc Compare May 28, 2025 21:42

dkwingsmt reviewed May 28, 2025

View reviewed changes

packages/flutter/lib/src/widgets/overscroll_indicator.dart Outdated Show resolved Hide resolved

Update packages/flutter/lib/src/widgets/overscroll_indicator.dart

067d9cd

Co-authored-by: Tong Mu <[email protected]>

MTtankkeo force-pushed the stretch branch from ef74312 to 067d9cd Compare May 29, 2025 07:43

Piinks reviewed Jun 2, 2025

View reviewed changes

MTtankkeo and others added 5 commits June 3, 2025 04:56

Update packages/flutter/lib/src/widgets/stretch_overscroll_effect.dart

1d0d293

Co-authored-by: Kate Lovett <[email protected]>

Update packages/flutter/lib/src/widgets/stretch_overscroll_effect.dart

f13235a

Co-authored-by: Kate Lovett <[email protected]>

Update packages/flutter/lib/src/widgets/image_filter.dart

f907071

Co-authored-by: Kate Lovett <[email protected]>

Refactor stretch shader to consider only one overscroll axis

2a88814

Update packages/flutter/lib/src/widgets/stretch_overscroll_effect.dart

1d92ed6

Co-authored-by: Kate Lovett <[email protected]>

MTtankkeo force-pushed the stretch branch from 16d32c6 to 1d92ed6 Compare June 2, 2025 21:23

Merge remote-tracking branch 'upstream/master' into stretch

a11a6c8

MTtankkeo force-pushed the stretch branch from 0b71abe to a11a6c8 Compare June 2, 2025 22:48

Reverted to avoid using a separate golden image name

7297766

dkwingsmt reviewed Jun 3, 2025

View reviewed changes

packages/flutter/lib/src/material/shaders/stretch_effect.frag Outdated Show resolved Hide resolved

dkwingsmt reviewed Jun 3, 2025

View reviewed changes

packages/flutter/lib/src/widgets/stretch_effect.dart Outdated Show resolved Hide resolved

Update packages/flutter/lib/src/material/shaders/stretch_effect.frag

1275943

Co-authored-by: Tong Mu <[email protected]>

MTtankkeo added 4 commits June 14, 2025 12:19

Commit for review and feedback

1f46a17

Merge branch 'master' into stretch

45f2150

Merge branch 'master' into stretch

73907db

Merge branch 'master' into stretch

ee85d62

MTtankkeo requested review from dkwingsmt and jonahwilliams June 15, 2025 21:27

Implements the Android native stretch effect as a fragment shader (Impeller-only). #169293

Are you sure you want to change the base?

Implements the Android native stretch effect as a fragment shader (Impeller-only). #169293

Conversation

MTtankkeo commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reference Source

Old Skia (Using Transform)

New Impeller (Using fragment shader)

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented May 22, 2025

Uh oh!

flutter-dashboard bot commented May 22, 2025

Uh oh!

MTtankkeo commented May 23, 2025

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented May 23, 2025

Uh oh!

dkwingsmt commented May 23, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 23, 2025

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 28, 2025

Uh oh!

Uh oh!

flutter-dashboard bot commented May 29, 2025

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Piinks Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Piinks Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 2, 2025

Uh oh!

MTtankkeo commented Jun 2, 2025

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 3, 2025

Uh oh!

flutter-dashboard bot commented Jun 14, 2025

Uh oh!

Uh oh!

MTtankkeo commented May 22, 2025 •

edited

Loading

`Old` Skia (Using Transform)

`New` Impeller (Using fragment shader)