Skip to content

Conversation

Piinks
Copy link
Contributor

@Piinks Piinks commented Aug 6, 2021

This adds an approximation of the Android 12 overscroll effect.

Part of #82906

This does not make it the default (for now). Investigating how breaking it would be to make that switch (from glowing to stretching). A migration period may be necessary first.
A full fidelity update will be necessary after https://github.com/flutter/flutter/projects/207 is completed.

overscroll.mov

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 feature I am adding, or Hixie said the PR is test-exempt.
  • All existing and new tests are passing.

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

@Piinks Piinks added c: new feature Nothing broken; request for a new capability platform-android Android applications specifically framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. f: scrolling Viewports, list views, slivers, etc. f: gestures flutter/packages/flutter/gestures repository. customer: crowd Affects or could affect many people, though not necessarily a specific customer. customer: money (g3) e: OS-version specific Affects only some versions of the relevant operating system labels Aug 6, 2021
@flutter-dashboard flutter-dashboard bot added the f: cupertino flutter/packages/flutter/cupertino repository label Aug 6, 2021
@google-cla google-cla bot added the cla: yes label Aug 6, 2021
@skia-gold
Copy link

Gold has detected about 6 new digest(s) on patchset 5.
View them at https://flutter-gold.skia.org/cl/github/87839

@Piinks Piinks changed the title [WIP] Android 12 overscroll stretch effect Android 12 overscroll stretch effect Aug 6, 2021
@skia-gold
Copy link

Gold has detected about 6 new digest(s) on patchset 7.
View them at https://flutter-gold.skia.org/cl/github/87839

@goderbauer
Copy link
Member

Looks like some docs are not compiling..

@Piinks Piinks requested a review from goderbauer August 9, 2021 20:17
@skia-gold
Copy link

Gold has detected about 6 new digest(s) on patchset 8.
View them at https://flutter-gold.skia.org/cl/github/87839

@flutter-dashboard
Copy link

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 #87839 at sha e0be58a

@flutter-dashboard flutter-dashboard bot added the will affect goldens Changes to golden files label Aug 10, 2021
@skia-gold
Copy link

Gold has detected about 6 new digest(s) on patchset 12.
View them at https://flutter-gold.skia.org/cl/github/87839

@pedromassango
Copy link
Member

pedromassango commented Aug 10, 2021

Now that we're working on this, maybe the new StretchingOverscrollIndicator widget could provide an "easy/simple way" to change the glowing color to match the native behavior, maybe a colorparamter that defaults to Colors.transparent would be ideal 🙈

How one could remove the glowing color with as less code as possible to match the native implementation?

@Piinks
Copy link
Contributor Author

Piinks commented Aug 10, 2021

Now that we're working on this, maybe the new StretchingOverscrollIndicator widget could provide an "easy/simple way" to change the glowing color to match the native behavior, maybe a colorparamter that defaults to Colors.transparent would be ideal 🙈
How one could remove the glowing color with as less code as possible to match the native implementation?

Hey @pedromassango, I am not sure I follow. The stretching overscroll indicator is intended to be used instead of the glowing overscroll indicator. They are not intended to be used together. Why would the stretch require a color?

@pedromassango
Copy link
Member

Hey @pedromassango, I am not sure I follow. The stretching overscroll indicator is intended to be used instead of the glowing overscroll indicator. They are not intended to be used together. Why would the stretch require a color?

Sorry, my goal is to achieve the original behavior with just the new widget. This is the code I used to build the app above:

StretchingOverscrollIndicator(
          axisDirection: AxisDirection.down,
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return Text('$index');
            },
          ),
        )

I was expecting to not see the glowing color, so what I'm suggesting is to have a way to easily remove that color

Copy link
Member

@goderbauer goderbauer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Piinks Piinks force-pushed the overscrollStretch branch from 3753721 to 825ba59 Compare August 11, 2021 19:39
@skia-gold
Copy link

Gold has detected about 1 new digest(s) on patchset 12.
View them at https://flutter-gold.skia.org/cl/github/87839

@skia-gold
Copy link

Gold has detected about 6 new digest(s) on patchset 13.
View them at https://flutter-gold.skia.org/cl/github/87839

@mpardieck
Copy link

How do you enable the new overscroll effect? I'm not seeing the procedure anywhere.

@jameskokoska
Copy link

jameskokoska commented Mar 13, 2022

You can enable the new overscroll stretch effect by

  1. Wrapping your scroll view in a StretchingOverscrollIndicator widget
StretchingOverscrollIndicator(
  axisDirection: AxisDirection.down,
  child: CustomScrollView(...),
)
  1. or using ThemeData
    In your MaterialApp widget specify a theme using ThemeData and add the attribute androidOverscrollIndicator: AndroidOverscrollIndicator.stretch,
    Using ThemeData will by default disable the overscroll glow
MaterialApp(
  theme: ThemeData(
    androidOverscrollIndicator: AndroidOverscrollIndicator.stretch,
    ...
  ),
  darkTheme: ThemeData(
    androidOverscrollIndicator: AndroidOverscrollIndicator.stretch,
    ...
  ),
  themeMode: ThemeMode.system,
  home: Scaffold(
    body: MyHomePage(),
  ),
);

Edit: As of Flutter 3.0, ScrollBehavior.androidOverscrollIndicator is deprecated, use ThemeData.useMaterial3, or override ScrollBehavior.buildOverscrollIndicator to choose the desired indicator

@@ -271,7 +279,7 @@ class _GlowingOverscrollIndicatorState extends State<GlowingOverscrollIndicator>
assert(false);
}
final bool isLeading = controller == _leadingController;
if (_lastNotificationType != OverscrollNotification) {
if (_lastNotificationType is! OverscrollNotification) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ref #113212

auto-submit bot pushed a commit that referenced this pull request May 19, 2023
The deprecated OverscrollIndicatorNotification.disallowGlow has expired and is removed in the PR. The replacement is OverscrollIndicatorNotification.disallowIndicator. This deprecation was introduced in #87839 when the StretchingOverscrollIndicator was added. The name change made it clearer since there is now more than one overscroll indicator.

This change is supported by dart fix. � 

Part of #127042
CaseyHillers pushed a commit to CaseyHillers/flutter that referenced this pull request May 24, 2023
…er#127050)

The deprecated OverscrollIndicatorNotification.disallowGlow has expired and is removed in the PR. The replacement is OverscrollIndicatorNotification.disallowIndicator. This deprecation was introduced in flutter#87839 when the StretchingOverscrollIndicator was added. The name change made it clearer since there is now more than one overscroll indicator.

This change is supported by dart fix. � 

Part of flutter#127042
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: new feature Nothing broken; request for a new capability customer: crowd Affects or could affect many people, though not necessarily a specific customer. customer: money (g3) e: OS-version specific Affects only some versions of the relevant operating system f: cupertino flutter/packages/flutter/cupertino repository f: gestures flutter/packages/flutter/gestures repository. f: material design flutter/packages/flutter/material repository. f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels. platform-android Android applications specifically will affect goldens Changes to golden files
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

8 participants