Laggy Gesture Detection in Custom Widget

[roystontay]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

As you can see from the attached video, the onPanStart and onPanUpdate events only start after the finger has started moving over ~20px in the simulator. That's when the blue line starts being drawn.

Expected Behavior

when ran in flutter (without flutterflow), this gesture event would start firing almost immediately. i.e. the blue line tracing the finger movements has no lag.

I've created a project in my account specifically to recreate this issue report called "for issue reporting". Flutterflow team may access this.

Steps to Reproduce

1. Create Custom Widget
2. Use Gesture Detection - OnPanUpdate to trace finger panning movements on a canvas
3. use CLI command to export code locally to a mac
4. "flutter run" to run project in a simulator / iphone device
5. you will observe a lag when dragging finger across the screen. the first ~20px seems to not trigger onPanUpdate at all.

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4WksmBwItNrsNK0KrtbcBvmicXQkB/aIJIjMN9dwgdIYjqP6YPXfikSEpWZ9+kTHxcL2Gjqz4K7t7Hv/OTA+UrMk+aQIBlz5dudA3JTmembJiuCsyCR0ZBHtFJJVPG5MGRvyVBPuleV3g62WC6Pt6/dHffJL7pNmsZL/mIJof4+wqrQ0SLb3kNh1JWeC/v

Visual documentation

https://github.com/user-attachments/assets/3c23f804-4be4-4c9e-8373-f30eea5ed0e0

Environment

- FlutterFlow version: v4.1.85+
- Platform: Web - export to Mac - "flutter run"
- Browser name and version: Chrome 128.0.6613.85
- Operating system and version affected: MacOS Sonoma 14.5

Additional Information

I'm using a library (https://pub.dev/packages/stroke_order_animator) where the onPanUpdate mechanism is being used. When i run the provided example directly in flutter, it works perfectly (i.e. no lag). When I port the example into flutterflow as a custom widget, this lag is encountered. Through debugging, I think the issue can be isolated to how slow the onPanUpdate event starts firing.

This issue is critical to my use case that requires tracing a finger gesture, which I imagine would be required for many drawing apps?

[paulperez-dev]

Hi @roystontay! Can you please try running FF app on a local device and verify if the performance is better?

[roystontay]

do you mean running

"flutter run -d "

to have the code compiled and run on my physical iphone?

if so, yes I've just verified that using this same project. the lag is still there. however, i'm not able to record my screen with the touch gesture showing when i started tapping vs when the app starts detecting it (similar to the video i uploaded before). there doesn't seem to be a way to record that on iphones.

[roystontay]

Hi, have you been able to replicate this? I've tried building the app using CLI and using flutter desktop app. The lag is experienced in both.

When testing on flutter web, there's no perceivable lag. i.e. the line starts drawing where my mouse cursor first starts clicking and moving.

Please let me know if

1. This is something you're able to recreate. i.e. I'm not doing something dumb / wrong & there's an easy fix / workaround
2. If you do manage to recreate this issue, whether it's something flutterflow is keen to fix

As mentioned, this is a pretty critical part to my app. I'd have to look for alternatives otherwise, thanks!

[roystontay]

Any updates?

[paulperez-dev]

Hi @roystontay,

Apologies for the delayed response. I'll go ahead and verify the behaviors you mentioned and will get back to you shortly.

Thank you for your patience!

[paulperez-dev]

Hi @roystontay,

It seems that the issue is specific to the simulator. When running on the web and on a real device, I didn’t notice any lag.

[roystontay]

[Update for others who might have the same issue] It does seem fine on web. But on a real device even with a release build, there was a noticeable delay before onPanUpdate starts firing.

As a workaround, I wrote my CustomPanGestureRecognizer class to use within my custom widget. It works without a delay now. here's the code if it's useful

--

import 'package:flutter/gestures.dart';

// Custom Gesture Recognizer class CustomPanGestureRecognizer extends OneSequenceGestureRecognizer { CustomPanGestureRecognizer({Object? debugOwner}) : super(debugOwner: debugOwner);

Function(Offset)? onPanStart; Function(Offset)? onPanUpdate; Function()? onPanEnd;

@override void addPointer(PointerEvent event) { startTrackingPointer(event.pointer); resolve(GestureDisposition.accepted); }

@override void handleEvent(PointerEvent event) { if (event is PointerMoveEvent) { print('PointerMoveEvent at position: ${event.localPosition}'); // Logging onPanUpdate?.call(event.localPosition); } else if (event is PointerDownEvent) { print('PointerDownEvent at position: ${event.localPosition}'); // Logging onPanStart?.call(event.localPosition); } else if (event is PointerUpEvent) { print('PointerUpEvent detected'); // Logging onPanEnd?.call(); stopTrackingPointer(event.pointer); } }

@override String get debugDescription => 'customPan';

@override void didStopTrackingLastPointer(int pointer) {} }