Write in the front, the effect is basically OK, but some details have not been dealt with. There are three main problems for the time being:

  • User gestures are released when they reach the edge of the screen. If the rotation Angle is too small, the animation always feels a bit awkward (or maybe it’s my illusion).
  • The API provided for data refresh is not ready, now it is more troublesome to plug data;
  • Because the UI design is based on the user gesture to move the layout position, so every time the user gesture position changes, the layout needs to be refreshed. Now, setState is used to refresh the layout. It is not clear whether there will be performance problems in the case of complex layout.

Unlimited refresh is supported.

Code: github.com/yumi0629/Fl…

Effect:

The overall train of thought

On the upper layer is a Widget that supports user gesture monitoring, translating and rotating with the user’s gesture. The lower-level Widget does not support gesture listening, but it receives the upper-level layout’s animation progress callback to zoom in, so it appears to follow gestures as well:

When is the data refreshed

By default, the upper-layer layout displays the first data and the lower-layer layout displays the second data. When the upper layout is removed from the screen, the upper layout can be refreshed to display the second piece of data, with the corresponding callback listening onSlideCompleted; After the lower layout miniatures animation is completed and the upper layout instantaneously moves back to its original position, the lower layout refreshes the data and displays the third data, and the corresponding callback listens as “refreshBelow”.

Animated implementation of the bottom like/dislike icon

As with the lower layout, it also receives the progress value of the upper layout animation to achieve the effect of enlarging and changing colors as the user gestures. Zoom in to the peak, and then perform a reduction animation, reduce to the original size.

The Widget that monitors user gestures is modified from the previous one that wrote the QQ side swipe menu: the hand handles teach you to implement a function that mimes the QQ side swipe menu. How to monitor user gestures is explained clearly in the article, so there is no need to elaborate on it.

Finally, I would like to thank the leaders of the Flutter Chinese user group for their advice to me. They provided me with a solution to move the upper layer layout back directly and make a fake one. This solved my problem of where to put the upper layer layout after it was removed for a long time.