OverscrollNotification does not work on iOS #17649

korbin-w · 2018-05-16T11:30:45Z

Steps to Reproduce

Add an OverscrollNotification to a ListView, take Gallery as an example
Scroll down to the bottom of the list
There's no notification callback on iOS, while OK on Android.

Modify the Gallery code as an example,

list_demo.dart line 237
The code after modified:

body: new Scrollbar(
        child: new NotificationListener<OverscrollNotification>(child: new ListView(
          padding: new EdgeInsets.symmetric(vertical: _dense ? 4.0 : 8.0),
          children: listTiles.toList(),
        ),
          onNotification: (OverscrollNotification notification) {
            print("====shubin debug: notification ${notification.overscroll}");
            if (notification.overscroll > 0 ) {
              print("====shubin debug: notification>0 ${notification.overscroll}");
            }
            return false;
          },

        ),
      ),

The code before modified:

body: new Scrollbar(
        child: new ListView(
          padding: new EdgeInsets.symmetric(vertical: _dense ? 4.0 : 8.0),
          children: listTiles.toList(),
        ),
   
        ),
      ),

To solve this problem, we're using a alternative way on iOS like below. But is the above a problem?

void _handleScrollNotification() {
  if (widget.controller.position.pixels >
      widget.controller.position.maxScrollExtent) {
    if (widget.adapter.hasMore()) {
      widget.adapter.loadMore();
    }
  }
}

Logs

There are logs like "====shubin debug: notification" on Android, but failed on iOS.

Flutter doctor -v:

✓] Flutter (Channel beta, v0.3.2, on Mac OS X 10.12.6 16G1314, locale zh-Hans-HK)
    • Flutter version 0.3.2 at /Users/guoyou/projects/flutter
    • Framework revision 44b7e7d3f4 (4 weeks ago), 2018-04-20 01:02:44 -0700
    • Engine revision 09d05a3891
    • Dart version 2.0.0-dev.48.0.flutter-fe606f890b

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/guoyou/Library/Android/sdk
    • Android NDK at /Users/guoyou/Library/Android/sdk/ndk-bundle
    • Platform android-27, build-tools 27.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    • ios-deploy 1.9.2
    • CocoaPods version 1.4.0

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 24.2.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] IntelliJ IDEA Community Edition (version 2017.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin installed
    • Dart plugin version 172.3968.27

[✓] Connected devices (3 available)
    • Android SDK built for x86 • emulator-5554                            • android-x86 • Android 8.0.0 (API 26) (emulator)
    • iPhone (3)                • cd8bf03b9894bcc00eb25fdae9473ff0b2df095a • ios         • iOS 10.3.2
    • iPhone X                  • 8D4A21F9-E417-43CE-8B40-52CEAB6B7D04     • ios         • iOS 11.2 (simulator)

The text was updated successfully, but these errors were encountered:

eseidelGoogle · 2018-05-18T14:29:32Z

@xster is this likely to be a bug due to the cupertino overscroll behavior?

eseidelGoogle · 2018-05-18T14:30:08Z

@korbin-w notes this is not a blocker for customer: gold, just a bug.

xster · 2018-05-18T23:41:15Z

Looking at the code, it seems like it was never set up to respond to iOS 'overscrolls'. The API doc for OverscrollNotification specifically says

A notification that a [Scrollable] widget has not changed its scroll position
because the change would have caused its scroll position to go outside of
its scroll bounds.

which technically isn't true for iOS. However, I also agree that for users looking at the name of the notification class, it's easy to assume that it includes both platforms equally without having to do something like

onNotification: (ScrollNotification notification) {
  if (notification is OverscrollNotification || notification.metrics.outOfRange) => ...
}

@Hixie may have more reasons for the original API design's historical context but either way, we should add more details to the API docs.

Hixie · 2018-05-21T21:57:59Z

iOS doesn't overscroll, it just scrolls normally past the edge of the content and bounces back.

If you want to load more content when the list reaches the end, the usual way is to put in a placeholder widget as the last thing in your list when you run out of data to show (e.g. a circular progress indicator), and then when you have the data, replace the placeholder with the data.

james-lawrence · 2018-11-21T14:02:10Z

@Hixie the point of flutter to abstract those details... shouldn't have to care if its ios or not.

kaina404 · 2019-02-24T12:46:43Z

Maybe you can look at the scroll_configuration.dart file. In the getScrollPhysics method, the objects returned in different platforms are different.
You can fix the return value of physics to ClampingScrollPhysics

Demo:

ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Text('data=$index');
        },
        itemCount: 100,
        physics: ClampingScrollPhysics(),
      )

kaina404 · 2019-02-24T12:49:00Z

scroll_configuration.dart

  /// The scroll physics to use for the platform given by [getPlatform].
  ///
  /// Defaults to [BouncingScrollPhysics] on iOS and [ClampingScrollPhysics] on
  /// Android.
  ScrollPhysics getScrollPhysics(BuildContext context) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
        return const BouncingScrollPhysics();
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        return const ClampingScrollPhysics();
    }
    return null;
  }

Martibis · 2020-03-15T14:28:09Z

Workaround is using ScrollNotification instead of OverScrollNotification and onNotification(n) use if(n.metrics.extentAfter == 0.0)

TahaTesser · 2020-03-30T15:41:01Z

Code Sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: Scrollbar(
          child: new NotificationListener<OverscrollNotification>(
            child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Text('data=$index');
                },
                itemCount: 100),
            onNotification: (OverscrollNotification notification) {
              print(
                  "====shubin debug: notification ${notification.overscroll}");
              if (notification.overscroll > 0) {
                print(
                    "====shubin debug: notification>0 ${notification.overscroll}");
              }
              return false;
            },
          ),
        ),
      ),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.21.0-1.0.pre, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision f25bd9c55c (2 weeks ago), 2020-07-14 20:26:01 -0400
    • Engine revision 99c2b3a245
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 20bf2fcf56)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

 
[✓] Connected device (5 available)            
    • SM M305F (mobile)      • 32003c30dc19668f          • android-arm64  • Android 10 (API 29)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS 13.6
    • macOS (desktop)        • macos                     • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)       • web-server                • web-javascript • Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

kakyoism · 2020-05-11T08:49:10Z

if(n.metrics.extentAfter == 0.0)

Thanks for the tip. But, ...
What would be the threshold for when we overscroll beyond the other end?
I'm using PageView swipe to route between pages, and the last page overscroll can be handled using your tip. But I don't know how to figure out the threshold for when we scroll back beyond Page 0.

The n.metrics.extendAfter for my iPhone6 seems to be 1334.0, but I highly doubt that this value could cross devices.

kakyoism · 2020-05-11T08:55:22Z

if(n.metrics.extentAfter == 0.0)

Thanks for the tip. But, ...
What would be the threshold for when we overscroll beyond the other end?
I'm using PageView swipe to route between pages, and the last page overscroll can be handled using your tip. But I don't know how to figure out the threshold for when we scroll back beyond Page 0.

The n.metrics.extendAfter for my iPhone6 seems to be 1334.0, but I highly doubt that this is value could cross devices.

OK, figured it out myself. A more robust way would be:

final box = context.findRenderObject() as RenderBox;
if(notif.metrics.extentAfter == notif.metrics.minScrollExtent) { // beyond last page
  print('overscrolled: '+notif.toString());
}
else if (notif.metrics.extentAfter == notif.metrics.maxScrollExtent) {  // beyond first page
  print('scrolled: '+notif.metrics.extentAfter.toString());
}

Details: The logic behind notif.metrics.maxScrollExtent seems to be: when we scroll beyond the first page, the intended screen would become the sum of the first page and its imaginary adjacent page Page #0. In other words, the entire screen width would become, 2*page_width

Im-NikhilJain · 2022-06-10T05:57:17Z

@kf6gpe Any update on this.

MurtuzaSrashtaSoft · 2022-12-23T04:55:53Z

@kf6gpe Any update on this.

kf6gpe · 2022-12-23T06:13:38Z

I’m sorry, @MurtuzaSrashtaSoft , but I’ve been away from Flutter for a while, so I don’t have any updates for you.

huycozy · 2023-04-28T11:45:09Z

Reproduced this issue on the latest stable and master channels.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.12, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.7.12 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (2 days ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.77.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.62.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 112.0.5615.137

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[!] Flutter (Channel master, 3.10.0-16.0.pre.23, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.0-16.0.pre.23 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 55c988fb45 (3 hours ago), 2023-04-27 20:32:55 -0400
    • Engine revision 1d25906b4c
    • Dart version 3.1.0 (build 3.1.0-49.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio Flamingo.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio Flamingo.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.77.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.62.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.137

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

mjohnsullivan added the customer: alibaba label May 16, 2018

eseidelGoogle added framework flutter/packages/flutter repository. See also f: labels. f: cupertino flutter/packages/flutter/cupertino repository labels May 18, 2018

xster self-assigned this May 18, 2018

xster added the d: api docs Issues with https://api.flutter.dev/ label May 18, 2018

xster added this to Q1 Visibility in iOS Framework Jan 4, 2019

zoechi added this to the Goals milestone Feb 25, 2019

xster removed their assignment May 14, 2019

jmagman added this to Awaiting triage in iOS Platform - Cupertino widget review Feb 25, 2020

xster moved this from Awaiting triage to Engineer reviewed in iOS Platform - Cupertino widget review Mar 10, 2020

TahaTesser added has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-ios iOS applications specifically f: scrolling Viewports, list views, slivers, etc. f: material design flutter/packages/flutter/material repository. labels Mar 30, 2020

kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020

TahaTesser added the found in release: 1.21 Found to occur in 1.21 label Jul 29, 2020

Hixie removed this from the None. milestone Aug 17, 2020

winterdl mentioned this issue Oct 5, 2021

VerticalFlip could not next if last page with small height gsioteam/kinoko#12

Closed

TahaTesser added the workaround available There is a workaround available to overcome the issue label Dec 23, 2022

huycozy added found in release: 3.7 Found to occur in 3.7 found in release: 3.10 Found to occur in 3.10 and removed found in release: 1.21 Found to occur in 1.21 labels Apr 28, 2023

flutter-triage-bot bot added multiteam-retriage-candidate team-ios Owned by iOS platform team triaged-ios Triaged by iOS platform team labels Jul 8, 2023

alejandrogiubel mentioned this issue Oct 6, 2023

Add OverscrollNotification to BouncingScrollPhysics #136073

Closed

2 tasks

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OverscrollNotification does not work on iOS #17649

OverscrollNotification does not work on iOS #17649

korbin-w commented May 16, 2018 •

edited by zoechi

eseidelGoogle commented May 18, 2018

eseidelGoogle commented May 18, 2018

xster commented May 18, 2018

Hixie commented May 21, 2018

james-lawrence commented Nov 21, 2018

kaina404 commented Feb 24, 2019 •

edited by zoechi

kaina404 commented Feb 24, 2019

Martibis commented Mar 15, 2020 •

edited

TahaTesser commented Mar 30, 2020 •

edited

kakyoism commented May 11, 2020 •

edited

kakyoism commented May 11, 2020 •

edited

Im-NikhilJain commented Jun 10, 2022

MurtuzaSrashtaSoft commented Dec 23, 2022

kf6gpe commented Dec 23, 2022

huycozy commented Apr 28, 2023

OverscrollNotification does not work on iOS #17649

OverscrollNotification does not work on iOS #17649

Comments

korbin-w commented May 16, 2018 • edited by zoechi

Steps to Reproduce

Logs

eseidelGoogle commented May 18, 2018

eseidelGoogle commented May 18, 2018

xster commented May 18, 2018

Hixie commented May 21, 2018

james-lawrence commented Nov 21, 2018

kaina404 commented Feb 24, 2019 • edited by zoechi

kaina404 commented Feb 24, 2019

Martibis commented Mar 15, 2020 • edited

TahaTesser commented Mar 30, 2020 • edited

kakyoism commented May 11, 2020 • edited

kakyoism commented May 11, 2020 • edited

Im-NikhilJain commented Jun 10, 2022

MurtuzaSrashtaSoft commented Dec 23, 2022

kf6gpe commented Dec 23, 2022

huycozy commented Apr 28, 2023

korbin-w commented May 16, 2018 •

edited by zoechi

kaina404 commented Feb 24, 2019 •

edited by zoechi

Martibis commented Mar 15, 2020 •

edited

TahaTesser commented Mar 30, 2020 •

edited

kakyoism commented May 11, 2020 •

edited

kakyoism commented May 11, 2020 •

edited