So a student could actually see how a course topic on the left animatedly transforms into a skill in his LinkedIn profile.
The more covered topics — the reacher experience.
The idea is approved;)
Looks like a hero animation, but within the same route — nothing suitable on pub.dev
, so let's consider how to implement it.
The key observations from a gif demo:
- Text widget flies from one layout position to another.
- There are two types of flight: first — from topic to LinkedIn profile, and second from one position in the profile to another to maintain a skill list in the profile vertically centered.
- After the first type of flight, a text is changed from topic to skill, but after the 'adjustment' flight text remains the same.
- Layout position in Profile is defined by a Column.
- A flight is done above the rest page content.
Those observations are important but don't make things much clearer at the moment, moreover trying to think out some of them simultaneously causes more confusion than helps.
Looks like a problem, so how to tackle it?
Let's break things into small subproblems so we could focus on solving smh relatively simple, the first obvious subproblem would be hero flight from one position to another.
Usage of Flutter SDK Hero
won't fit, as it animates a hero between different routes, while we have an animation within one route, but its key concepts do look promising:
- Flight is done between the positions of two Hero widgets with the same tag.
- Flying widget is implemented as an Overlay.
We may conclude that our HeroAnimation
implementation should be based on the inflation of the same child
widget into two
- still widget, which position change is tracked
- flying overlay widget, that flies between a still widget's previous and new positions.
So let's apply those observations to our HeroAnimation
widget, in the example
to which we show the cup game, by animating a moving cup from one position to another.