[Desktop] RefreshIndicator can not be dragged to its full extent

[Mahm0ud-Ahmed]

After updating flutter 3.7, I noticed that the RefreshIndicator does not work on [desktop and web] on macos, while it works on mobile.

[huycozy]

@Mahm0ud-Ahmed What is your previous Flutter version that worked? Have you followed the migration guide https://flutter.dev/docs/release/breaking-changes/default-scroll-behavior-drag? Please also take a look at the explanation #85023 (comment).

If you have migrated it but the issue still happens on Flutter 3.7, please provide a completed and minimal reproducible code sample so that we may verify this. Also, please provide the output of flutter doctor -v as well. Thanks!

[Mahm0ud-Ahmed]

@huycozy
previous Flutter version: 3.3.8

My code

RefreshIndicator(
 onRefresh: () {},
 child: ListView.builder(
  ....
);

ScrollBehavior for my application

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    PointerDeviceKind.stylus,
    PointerDeviceKind.invertedStylus,
    PointerDeviceKind.trackpad,
    PointerDeviceKind.unknown,
    // etc.
  };
}

flutter doctor -v result:

[✓] Flutter (Channel stable, 3.7.1, on macOS 12.2.1 21D62 darwin-x64, locale
    en-US)
    • Flutter version 3.7.1 on channel stable at /Applications/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7048ed95a5 (2 days ago), 2023-02-01 09:07:31 -0800
    • Engine revision 800594f1f4
    • Dart version 2.19.1
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/mahmouda.sleem/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2020.3)
    • 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.10+0-b96-7281165)

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

[✓] Connected device (3 available)
    • HRY LX1MEB (mobile) • W2HNW18B30009772 • android-arm64  • Android 10 (API
      29)
    • macOS (desktop)     • macos            • darwin-x64     • macOS 12.2.1
      21D62 darwin-x64
    • Chrome (web)        • chrome           • web-javascript • Google Chrome
      109.0.5414.119

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

• No issues found!

[huycozy]

@Mahm0ud-Ahmed Your sample code is not complete so that I can not verify whether you applied migration change or not. You can try below sample code and confirm if it works as desired.

Sample code

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: RefreshIndicator(
            onRefresh: () async {
              print('Updated');
            },
            child: ScrollConfiguration(
              behavior: ScrollConfiguration.of(context).copyWith(
                  dragDevices: {
                    PointerDeviceKind.mouse
                  }
              ),
              child: ListView.separated(
                itemBuilder: (context, index) => ListTile(title: Text('Hello world $index')),
                separatorBuilder: (context, index) => const Divider(height: 1),
                itemCount: 100,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

[Mahm0ud-Ahmed]

@huycozy
It doesn't work either
When you drag the icon, a small part of it appears, and the dragging process does not complete the full form, and thus the update fails

[huycozy]

@Mahm0ud-Ahmed I tried this on macOS and Web with the latest Flutter stable and master channel, the RefreshIndicator really can't be pulled all the way down like when running with Flutter 3.3.10.

Labeling this issue as a regression for further insights. Thanks!

stable/master	3.3.10
stable.master.mov	3310.mov

Sample code

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) {
              return RefreshIndicator(
                onRefresh: () async {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text('Updated'),
                    ),
                  );
                },
                child: ScrollConfiguration(
                  behavior: ScrollConfiguration.of(context).copyWith(
                      dragDevices: {
                        PointerDeviceKind.mouse,
                      }
                  ),
                  child: ListView.separated(
                    itemBuilder: (context, index) => ListTile(title: Text('Hello world $index')),
                    separatorBuilder: (context, index) => const Divider(height: 1),
                    itemCount: 100,
                  ),
                ),
              );
            }
          ),
        ),
      ),
    );
  }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.1, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.7.1 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7048ed95a5 (11 hours ago), 2023-02-01 09:07:31 -0800
    • Engine revision 800594f1f4
    • Dart version 2.19.1
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio Dolphin 2021.3.1.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio Dolphin 2021.3.1.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.13+0-b1751.21-8125866)

[!] 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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] 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.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 109.0.5414.119

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

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.8.0-4.0.pre.25, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.8.0-4.0.pre.25 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 b8f5394a5c (19 hours ago), 2023-02-04 23:06:19 -0800
    • Engine revision 2a104cdfcd
    • Dart version 3.0.0 (build 3.0.0-204.0.dev)
    • DevTools version 2.21.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 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Users/huynq/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • 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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] 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.75.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.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 109.0.5414.119

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

! Doctor found issues in 2 categories.

[xu-baolin]

Relation to #108298
CC @moffatman @Piinks

[moffatman]

It's because of the change in scrolling overscroll frictionFactor on macOS to match system and other apps. But in macOS, we don't use RefreshIndicator interaction (because you need trackpad, and some Macs might only have a mouse). So I recommend, you don't rely on RefreshIndicator in your desktop/web apps, as it's not available to all users.

But we still should fix this:

Option 1

Rewrite scrolling in some way so that RefreshIndicator can have a separate/reduced effective frictionFactor

Option 2

Revert just the change in frictionFactor. I don't mind it because it never worked completely right. For example, you are still able to trigger the RefreshIndicator if you fling from below the top of the scroll view. So the new frictionFactor is not even completely applied to all the scrolling equations.

[Piinks]

This feels similar to a few issues where the DraggableScrollableSheet has some odd behaviors on desktop because it was initially designed for mobile experiences. I do not think we need to alter or revert fidelity changes to the Mac scroll physics, but rather (similarly to DSS) consider how the RefreshIndicator should behave on desktop.
This widget was similarly designed for mobile devices, and should be updated to reflect the desktop experience, whatever that may be.

The OP above already needed to add a custom scroll behavior in order to reproduce this. So I think the real issue here is, how should RefreshIndicator look/work/feel for the desktop platform?

[BigCatGit]

我也遇到这个问题，暂时还没有找到解决办法

[BigCatGit]

我找到了这个方案，好像可以解决我的问题了:
https://stackoverflow.com/questions/64845189/flutter-refreshindicator-does-not-work-when-theres-only-one-page

[gspencergoog]

@guidezpl Is the behavior of RefreshIndicator on desktop something that the Material team has some advice for?

[guidezpl]

There isn't, but my first instinct would be to disable it on desktop. Drag to refresh is a mobile-only pattern and it seems strange to keep it on desktop.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.