Trigger action on Drag

Widgets & Design

Hi there everyone,

I'm quite fresh to FlutterFlow, having a grand old time breaking through brick walls with my head and generally (eventually) getting great results.

However, I fear I've hit a dead end when it comes to triggering an action when dragging. Here's what I'm specifically trying to do:

  • I've set up a central drag target surrounded by six draggable icons. On drag accept, we navigate to a new page, all working splendidly.
    Additionally, on drag a blank container is enabled for Child When Dragging and Feedback is set to a new component that triggers a slightly different animation and a sound clip for the icon - all designed to feel fun and responsive.

  • What I'd really like is to clearly highlight where to drag the icon - say upon initially dragging, everything but the target animates to grey / fades / lowers in opacity, like the below photoshopped image:

    And - crucially - when the draggable is released, I need the page to animate / reset to its initial state.

  • I can almost acheive the effect by updating the App State upon initialisation of either the blank container child or the feedback component, but this doesn't provide for the state to reset when the draggable is released, and generally feels like a longwinded workaround at best.

It'd be sweet to have an Action Trigger on Drag (and drag release), making this a simple solution. In lieu of that helpful friend... does anyone else have any suggestions? I'm open to ideas but terrified by complex code.

Thanks FlutterFriends.

What have you tried so far?

Read guides, forums, fiddled endlessly and fruitlessly. This is my first question post!

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