search

josiahsrc / dough

This package provides some widgets you can use to create a smooshy UI.
MIT License
703 stars 28 forks source link

[suggestion] A dough widget that is draggable and "detaches" e.g. a list item #2

Closed Schwusch closed 4 years ago

Schwusch commented 4 years ago

A squishy item that "comes off" when dragged somewhere else would be awesome.

josiahsrc commented 4 years ago

I like this, good thinking! I think the flow for this widget would go something like this

  1. User presses and beings to drag the list item
  2. While the user drags the item, it "sticks" to its last position at stretches towards where they're dragging it
  3. Once a "drag threshold" is met, the widget will elastically break its "sticky" hold, "boing" back into its original shape, and allow the user to drag it around freely

Is that something like what you had in mind?

Schwusch commented 4 years ago

You read my mind! I haven't worked with Draggable/DragTarget so I can't answer for how that would work, but I think the cartoony behaviour would be hilarious.

josiahsrc commented 4 years ago

Agreed, I think it would feel pretty snappy too. I'll have a look into how this can be achieved next time I work on this package! Thanks again!

josiahsrc commented 4 years ago

@Schwusch I gave this draggable widget a shot by wrapping flutter's built in draggable widget. Here's the first attempt:

draggable-dough

A lot of Flutter's "draggable" API is private, so I can't see a clear way to get the effect using their api :/ Any thoughts on this?

Here is the source branch for this feature you can check out if you like: https://github.com/HatFeather/flutter_dough/commits/draggable-dough

Schwusch commented 4 years ago

I checked it out, but I haven't gotten the time to understand how the code works. A thought that popped up is, the way the DraggableDough.child widget animates is by wrapping it it with Dough right? Is it possible to wrap the DraggableDough.feedback with a widget that animates in reverse from the childs state, but mirrored? And if it is possible to track whether the widget is being dragged, the DraggableDough.child can be wrapped in a Visibility that sets Visible.visibility = dragged, so it looks like the dough is actually pulled off.

Nice job so far, I am impressed :)

josiahsrc commented 4 years ago

I hadn't thought to invert that relationship, good thinking! I just gave your suggestions a shot, here is the result

draggable-dough-2pass

I think this is a much better result. This drastically reduced the complexity of the code as well (should be easier to understand now without all the gesture stuff). Let me know what you think

https://github.com/HatFeather/flutter_dough/tree/draggable-dough

josiahsrc commented 4 years ago

@Schwusch I finished up this feature yesterday. There's a gif on the readme that shows the behavior of the draggable dough (it's a bit different than the gifs above, but is much better I feel): https://github.com/HatFeather/flutter_dough

Let me know what you think!

Schwusch commented 4 years ago

Nice job! Especially when setting

DraggableDough(
  childWhenDragging: Container(),
)

It really feels like pulling it of 😄

josiahsrc commented 4 years ago

Awesome, glad you like it! Thanks!