Repository navigation
[web][desktop] Scrolling with 2 fingers (not press&hold style) categorized as ScrollDirection.idle (instead of ScrollDirection.forward or ScrollDirection.reverse) #64266
Description
Works as intended on mobile since scrolling has only one style with two fingers The problem is with the web on the desktop/laptop where you have two ways of scrolling:
with two fingers: without pressing the trackpad/mousepress & hold: where you 1. press 2. hold 3. scroll with your mouse or trackpad
So, on desktop/laptop, unless I scroll press & hold way, my scrolling direction (ScrollDirection.forward or ScrollDirection.reverse) is NOT being detected instead is categorized as ScrollDirection.idle
Steps to Reproduce
- Run
min repro code.
Expected results in console:
↑↑↑ or ↓↓↓
Actual results in the console:
scroll is being recognized as IDLE
Demo
min repro code (main.dart)
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('widget.title'),
),
body: Center(
child: NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (_scrollController.position.userScrollDirection == ScrollDirection.forward) {
print('↑↑↑');
} else if (_scrollController.position.userScrollDirection == ScrollDirection.reverse) {
print('↓↓↓');
} else if (_scrollController.position.userScrollDirection == ScrollDirection.idle) {
print('scroll is being recognized as IDLE');
}
},
child: MyListView(_scrollController),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class MyListView extends StatelessWidget {
final ScrollController scrollController;
MyListView(this.scrollController);
@override
Widget build(BuildContext context) {
return ListView.builder(
controller: scrollController,
itemExtent: 250.0,
itemBuilder: (context, index) => Container(
padding: EdgeInsets.all(10.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(5.0),
color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
child: Center(
child: Text(index.toString()),
),
),
),
);
}
}Logs
[✓] Flutter (Channel master, 1.21.0-10.0.pre.95, on Mac OS X 10.15.6 19G73, locale es-ES)
• Flutter version 1.21.0-10.0.pre.95 at /Users/tomas/Development/flutter
• Framework revision 48b9c3d39b (6 days ago), 2020-08-14 00:04:33 -0700
• Engine revision 7571e7c380
• Dart version 2.10.0 (build 2.10.0-11.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Users/tomas/Library/Android/sdk
• Platform android-29, build-tools 29.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_212-release-1586-b4-5784211)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.5, Build version 11E608c
• CocoaPods version 1.9.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 44.0.2
• Dart plugin version 192.7761
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.48.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.13.2
[✓] Connected device (3 available)
• iPhone (mobile) • 00008020-000415840E50003A • ios • iOS 14.0
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 84.0.4147.125
• No issues found!
Activity
pedromassangocode commentedon Aug 21, 2020
I was able to reproduce this on latest master channel. This issue is not related to web only since I was also able to reproduce while testing as a macOS Flutter app.
flutter doctor -v
[-][web] Scrolling with 2 fingers (not press&hold style) categorized as ScrollDirection.idle (instead of ScrollDirection.forward or ScrollDirection.reverse)[/-][+][web][desktop] Scrolling with 2 fingers (not press&hold style) categorized as ScrollDirection.idle (instead of ScrollDirection.forward or ScrollDirection.reverse)[/+]YeungKC commentedon Nov 7, 2020
It's fixed, I'm closing this issue and if anyone has a question about it I'll reopen it.
github-actions commentedon Aug 10, 2021
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 -vand a minimal reproduction of the issue.