CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-animationflutter-pageview
DeToxer
DeToxer

Reputation: 71

Flutter Hero-like transition in PageView

I have an image in one page of the PageView. I want to animate this image to the next page when i go to it, sort of like when you use Hero animations in navigator page transitions. Any ideas how this can be achieved?

Upvotes: 7

Views: 1905

Answers (2)

spkersten
spkersten

Reputation: 3386

This packages does what you want https://pub.dev/packages/coast

It is essentially taking the same approach as Flutter’s Hero and HeroController: Detect when a transition is started, search through the element trees of the source and target pages for the widgets marked for animation (heroes, crabs), pair them up based on their tags, and finally create an entry in an Overlay whose position and size is the interpolation between those on the source and target pages.

Upvotes: 1

Mohammad Kurjieh
Mohammad Kurjieh

Reputation: 1143

In order to achieve an animation similar to the hero animation. Basically what we will implement is this, you will need 5 elements:

  1. The initial global coordinates
  2. The final coordinates
  3. Initial widget size
  4. Final widget size
  5. The widget you want to animate

Now in order to create this animation that spans the 2 screens we will need to use the overlay that is present in flutter. link

  1. Add to the Overlay the widget that is to be animated (Not the widget present on the screen, a new instance).
  2. Position this overlay entry to be in the starting coordinate of the animation (The original widget's position).
  3. Hide the original widget.
  4. Create an animation that changes the x and y coordinates to the create the custom motion, this can be any curve, the simplest being a simple tween between the starting coordinate and the end coordinate.
  5. Another animation that animates size change between the start and end size. This animation can be combined with the previous one. (One tween animation but the values are calculated manually)
  6. After the animation is done, remove the overlay entry, and show the new widget. (This can be done as a timed operation or as a call back operation)

This is the most flexible between all of the available options since you have access to the widget in all of its states. However you must be very careful when using this method as it might cause a slowdown if not properly implemented.

Upvotes: 1

Related Questions