💬
Get Help
Kaito Asano
Kaito Asano
 · Japanese IT entrepreneur

Seeking Solutions for Smooth State Management with Draggable Widget: Drag Start, Cancel, and End Triggers

Actions & Logic

Hello FlutterFlow Community,

I'm working on making an image draggable using the Draggable widget, with the background state toggling when the image is dragged. Currently, I’ve set an onTapDown trigger on the image wrapped in the Draggable widget so that when tapped down, the page state changes, causing the background to disappear.

However, there are a few issues with this setup:

  1. The drag does not start smoothly: Because I'm using the onTapDown trigger, I have to first tap, lift my finger, and then start dragging. This disrupts the natural flow of the drag gesture, leading to a suboptimal user experience.

  2. A firm press is required: The drag and background toggle only activate if I press down firmly on the image. This makes the drag interaction feel less smooth and intuitive.

  3. Re-showing the background when the drag is canceled: Ideally, I’d like the background to reappear (i.e., page state returning to false) if the drag is canceled or if the user releases the drag midway. However, detecting this cancel action reliably has been challenging, and the state doesn’t always reset as expected.

The ideal behavior would be for the drag to start immediately upon touching the image, the background to disappear, and then for the background to reappear once the drag is completed or canceled. Due to limitations with the current onTapDown trigger and the Draggable widget, however, the background toggle and drag action are not smoothly linked, resulting in an awkward interaction.

画面収録 2024-11-11 23.11.41.mov
14.83MB
画面収録 2024-11-11 23.10.44.mov
16.65MB
What have you tried so far?

To manage the background state, I’ve tried setting an onTapDown trigger on the image, wrapped within a Draggable widget, to change the background state to "off" when tapped down. However, this approach requires me to either lift my finger before starting the drag or press firmly on the image for the trigger to activate.

Additionally, I’ve explored adding a GestureDetector to the parent Stack with onPanStart and onPanEnd triggers to toggle the background state based on drag start and end, but this setup doesn’t reliably capture the drag events when interacting directly with the Draggable widget.

Did you check FlutterFlow's Documentation for this topic?
Yes