flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.17k stars 26.65k forks source link

Different horizontal scroll behaviour on macOS and Chrome for TwoDimensionalScrollView #147488

Closed WanderingTurtle closed 2 weeks ago

WanderingTurtle commented 2 weeks ago

Steps to reproduce

mac: MacBook Air M1 2020 macOS: Sonoma 14.3.1

Here is a simple one vicinity TwoDimensionalScrollView implementation, and the vicinity is a very long Text widget.

In vscode I ran debug mode with macOS, and then with Chrome.

Expected results

On both macOS build and Chrome build, it should be scrollable horizontally with touch pad (two fingers wiping left or right).

Actual results

On macOS debug build, horizontal scrolling using touch pad has no effect. On Chrome debug build, horizontal scrolling using touch pad works ok.

Code sample

Code sample ``` import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), scrollBehavior: const MaterialScrollBehavior().copyWith( // Mouse dragging enabled for this demo dragDevices: PointerDeviceKind.values.toSet(), ), debugShowCheckedModeBanner: false, home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatelessWidget { final String title; MyHomePage({ Key? key, required this.title, }) : super(key: key); final ScrollController c1 = ScrollController(); final ScrollController c2 = ScrollController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(title)), body: Scrollbar( trackVisibility: true, thumbVisibility: true, interactive: true, controller: c1, child: Scrollbar( trackVisibility: true, thumbVisibility: true, interactive: true, controller: c2, child: TwoDimensionalGridView( verticalDetails: ScrollableDetails.vertical( physics: const ClampingScrollPhysics(), controller: c1 ), horizontalDetails: ScrollableDetails.horizontal( physics: const ClampingScrollPhysics(), controller: c2 ), diagonalDragBehavior: DiagonalDragBehavior.free, delegate: TwoDimensionalChildBuilderDelegate( maxXIndex: 0, maxYIndex: 0, builder: (BuildContext context, ChildVicinity vicinity) { return Container( child: Text("asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasafsdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf") ); }), ), ) ) ); } } class TwoDimensionalGridView extends TwoDimensionalScrollView { const TwoDimensionalGridView({ super.key, super.primary, super.mainAxis = Axis.vertical, super.verticalDetails = const ScrollableDetails.vertical(), super.horizontalDetails = const ScrollableDetails.horizontal(), required TwoDimensionalChildBuilderDelegate delegate, super.cacheExtent, super.diagonalDragBehavior = DiagonalDragBehavior.none, super.dragStartBehavior = DragStartBehavior.start, super.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual, super.clipBehavior = Clip.hardEdge, }) : super(delegate: delegate); @override Widget buildViewport( BuildContext context, ViewportOffset verticalOffset, ViewportOffset horizontalOffset, ) { return TwoDimensionalGridViewport( horizontalOffset: horizontalOffset, horizontalAxisDirection: horizontalDetails.direction, verticalOffset: verticalOffset, verticalAxisDirection: verticalDetails.direction, mainAxis: mainAxis, delegate: delegate as TwoDimensionalChildBuilderDelegate, cacheExtent: cacheExtent, clipBehavior: clipBehavior, ); } } class TwoDimensionalGridViewport extends TwoDimensionalViewport { const TwoDimensionalGridViewport({ super.key, required super.verticalOffset, required super.verticalAxisDirection, required super.horizontalOffset, required super.horizontalAxisDirection, required TwoDimensionalChildBuilderDelegate super.delegate, required super.mainAxis, super.cacheExtent, super.clipBehavior = Clip.hardEdge, }); @override RenderTwoDimensionalViewport createRenderObject(BuildContext context) { return RenderTwoDimensionalGridViewport( horizontalOffset: horizontalOffset, horizontalAxisDirection: horizontalAxisDirection, verticalOffset: verticalOffset, verticalAxisDirection: verticalAxisDirection, mainAxis: mainAxis, delegate: delegate as TwoDimensionalChildBuilderDelegate, childManager: context as TwoDimensionalChildManager, cacheExtent: cacheExtent, clipBehavior: clipBehavior, ); } @override void updateRenderObject( BuildContext context, RenderTwoDimensionalGridViewport renderObject, ) { renderObject ..horizontalOffset = horizontalOffset ..horizontalAxisDirection = horizontalAxisDirection ..verticalOffset = verticalOffset ..verticalAxisDirection = verticalAxisDirection ..mainAxis = mainAxis ..delegate = delegate ..cacheExtent = cacheExtent ..clipBehavior = clipBehavior; } } class RenderTwoDimensionalGridViewport extends RenderTwoDimensionalViewport { RenderTwoDimensionalGridViewport({ required super.horizontalOffset, required super.horizontalAxisDirection, required super.verticalOffset, required super.verticalAxisDirection, required TwoDimensionalChildBuilderDelegate delegate, required super.mainAxis, required super.childManager, super.cacheExtent, super.clipBehavior = Clip.hardEdge, }) : super(delegate: delegate); @override void layoutChildSequence() { final ChildVicinity vicinity = ChildVicinity(xIndex: 0, yIndex: 0); final RenderBox child = buildOrObtainChildFor(vicinity)!; double intrinsicHeight = child.getMaxIntrinsicHeight(double.maxFinite); double height = intrinsicHeight; double width = child.getMaxIntrinsicWidth(double.maxFinite) + 100; child.layout(BoxConstraints(minHeight: height, maxHeight: height, minWidth: width, maxWidth: width)); parentDataOf(child).layoutOffset = Offset(-horizontalOffset.pixels, -verticalOffset.pixels); verticalOffset.applyContentDimensions( 0.0, clampDouble(height - viewportDimension.height, 0.0, double.infinity), ); horizontalOffset.applyContentDimensions( 0.0, clampDouble(width - viewportDimension.width, 0.0, double.infinity), ); } } ```

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output ``` Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale en-CN) [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) [✓] Chrome - develop for the web [!] Android Studio (not installed) [✓] VS Code (version 1.84.2) [✓] Connected device (2 available) [✓] Network resources ! Doctor found issues in 2 categories. ```
moffatman commented 2 weeks ago

It works fine on my macbook pro. (Note i am on older flutter)

What I noticed was you are creating the scrollcontroller in your StatelessWidget. no good. Try using a StatefulWidget instead. If your controller keeps getting recreated, it could be the cause, the scroll position would keep resetting to 0?

danagbemava-nc commented 2 weeks ago

Hi @WanderingTurtle, it appears that this has been fixed on the beta & master channels. See the recordings below.

Per our triage policy, I'll be closing this since it has been fixed on master/beta.

Thank you

3.19.6 beta & master
flutter doctor -v ``` [!] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB) • Flutter version 3.19.6 on channel stable at /Users/nexus/dev/sdks/flutter ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 54e66469a9 (12 days ago), 2024-04-17 13:08:03 -0700 • Engine revision c4cd48e186 • Dart version 3.3.4 • DevTools version 2.31.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 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.88.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.86.0 [✓] Connected device (5 available) • Pixel 7 (mobile) • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.4.1 21E236 • macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ``` ``` [!] Flutter (Channel beta, 3.22.0-0.3.pre, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB) • Flutter version 3.22.0-0.3.pre on channel beta at /Users/nexus/dev/sdks/flutter_beta ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter_beta. Consider adding /Users/nexus/dev/sdks/flutter_beta/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter_beta. Consider adding /Users/nexus/dev/sdks/flutter_beta/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 87b652410d (5 days ago), 2024-04-23 21:41:18 -0500 • Engine revision b4bfd45986 • Dart version 3.4.0 (build 3.4.0-282.3.beta) • DevTools version 2.34.3 • 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 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.88.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.86.0 [✓] Connected device (6 available) • Pixel 7 (mobile) • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.4.1 21E236 • macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.4.1 23E224 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ``` ``` [✓] Flutter (Channel master, 3.22.0-18.0.pre.53, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB) • Flutter version 3.22.0-18.0.pre.53 on channel master at /Users/nexus/dev/sdks/flutters • Upstream repository https://github.com/flutter/flutter.git • Framework revision 098e7e7ff3 (10 hours ago), 2024-04-29 01:25:19 +0000 • Engine revision 752b146df7 • Dart version 3.5.0 (build 3.5.0-109.0.dev) • DevTools version 2.35.0-dev.16 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.88.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.86.0 [✓] Connected device (6 available) • Pixel 7 (mobile) • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.4.1 21E236 • macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.4.1 23E224 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91 [✓] Network resources • All expected network resources are available. • No issues found! ```
github-actions[bot] commented 1 day ago

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.