Flutter gestures conflict in UIScrollview

[FlashTang]

If you embed FlutterViewController.view in UIScrollView the flutter gestures will conflict with the UIScrollView for example : the Textfiled selection handlers (longpress the Textfiled, will show 2 handlers),

[✓] Flutter (Channel stable, 3.7.8, on macOS 12.5 21G72 darwin-x64, locale en-CN) • Flutter version 3.7.8 on channel stable at /Users/tang/Documents/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 90c64ed42b (9 days ago), 2023-03-21 11:27:08 -0500 • Engine revision 9aa7816315 • Dart version 2.19.5 • DevTools version 2.20.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/tang/Library/Android/sdk ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

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

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

[✓] Android Studio (version 2021.2) • 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.12+0-b1504.28-7817840)

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

[!] Proxy Configuration • HTTP_PROXY is set ! NO_PROXY is not set

[✓] Connected device (3 available) • tang weichun’s iPhone (mobile) • d987e72f2840075e7432b831bf3db3b8d7a7672f • ios • iOS 15.6 19G71 • macOS (desktop) • macos • darwin-x64 • macOS 12.5 21G72 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.146

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

Edit: Here is the reproducible code sample

https://github.com/FlashTang/flutter_scrollview_issue_mini_project

[huycozy]

Hi @FlashTang In order to address the issue properly, please provide a completed and minimal reproducible code sample so that we may verify this.

Also, please provide the output of flutter doctor -v and be more specific on Steps to reproduce, Actual result, and Expected result.

Thank you!

[FlashTang]

Hi @FlashTang In order to address the issue properly, please provide a completed and minimal reproducible code sample so that we may verify this.

Also, please provide the output of flutter doctor -v and be more specific on Steps to reproduce, Actual result, and Expected result.

Thank you!

Just uploaded a minimal reproducible code sample https://github.com/FlashTang/flutter_scrollview_issue_mini_project

[huycozy]

Thanks for providing the sample code, but I'm not sure what the issue is here. What does it mean "can not select charactors"? Please be more specific on Steps to reproduce, Actual result, Expected result.

Demo (iOS)

[FlashTang]

@huycozy Thank you for response, I guess you are running 'my_flutter' project directly ?, my_flutter is a module please open and run the Xcode project EmbedInScrollView.xcworkspace locate in EmbedInScrollView folder, otherwise there will be no wrapped UIScrollView As you can see , there are two blue dots in Textfield

normally you can drag & move the blue dot to change the range (select characters you want, ) but in this case you can't, it will scroll the native UIScrollView instead (conflict)

[huycozy]

No, I ran the native project (I knew it's add-to-app project). I see the issue now, there are the conflict gestures between UIScrollView and Flutter TextField handlers.

Can you try implementing this solution to see if it works for your case?

[FlashTang]

No, I ran the native project (I knew it's add-to-app project). I see the issue now, there are the conflict gestures between UIScrollView and Flutter TextField handlers.

Can you try implementing this solution to see if it works for your case?

Hi, I just converted the Obj-C solution (by @HaoXianSen) to swift version and applied to the project here is the project which applied the solution above you mentioned https://github.com/FlashTang/flutter_scrollview_issue_try_fix but, unfortunately, the native UIScrollView will stop working completely as long as the touches are inside the 'FlutterView' I think. The textfield selecting issue is just an example, in fact all touch events are conflicting in such cases I think this issue is more complicated, maybe flutter should provide function(s) to stop bubbling events to native ? like webview - event.stopPropagation() and event.preventDefault() does. Thank you.

[huycozy]

Hi, I re-clone your updated sample code and see the handler can be dragged.

Demo with updated sample code

https://user-images.githubusercontent.com/104349824/229413955-424ec64b-c116-4c53-b1a9-17c142650441.MP4

I think this issue is more complicated, maybe flutter should provide function(s) to stop bubbling events to native ?

For another issue, you should control it manually by your own implementation. The idea behind this is that you can detect when to block/allow UIScrollView's gesture (maybe when focusing on TextField for example)

Please see https://flutter.dev/community for resources and ask questions like this. You may also get some help if you post it on Stack Overflow and if you need help with your code, please see https://www.reddit.com/r/flutterhelp.

Closing, as this isn't an issue with Flutter itself. If you disagree, please write in the comments and I will reopen it. Thank you!

[FlashTang]

Hi, I re-clone your updated sample code and see the handler can be dragged.

Demo with updated sample code

I think this issue is more complicated, maybe flutter should provide function(s) to stop bubbling events to native ?

For another issue, you should control it manually by your own implementation. The idea behind this is that you can detect when to block/allow UIScrollView's gesture (maybe when focusing on TextField for example)

Please see https://flutter.dev/community for resources and ask questions like this. You may also get some help if you post it on Stack Overflow and if you need help with your code, please see https://www.reddit.com/r/flutterhelp.

Closing, as this isn't an issue with Flutter itself. If you disagree, please write in the comments and I will reopen it. Thank you!

@huycozy Hi , the handler can be dragged because the UIScrollView gesture is disabled (since the view is FlutterView) Thanks for your help, the idea sounds good , maybe I should pass event to UIScrollView delegate from Flutter gesturedetector

[github-actions[bot]]

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.