Flutter: Hero

Apps often have views that are snippets of some larger datasource. When the user taps on the snippet, the app transitions to a new screen with more relevant data. Cross-platform using Flutter we can achieve this behavior with a Hero. Setting up a Hero widget is a straight-forward declaration of the transition between two views. Heroes are great tappable list items. After I click a transit station below, the Hero animates from the small list item to a bigger detailed view of the corresponding station.

My approach to creating a hero was to wrap the cell in a SizedBox with a GestureDetector on top. As it stand the SizedBox will stretch to fit the contents of the cell, which makes it an ideal widget for assisting the animation. After the GestureDetector registers a tap, the hero is resized and a new screen is pushed on top.

First a new Scaffold is declared, then we use Navigator to show the interface to the user. Since our Navigator holds the current route, we have knowledge of the previous Hero transition. With this power, we can declare another Hero that exits the detail screen. This animation is responsible for taking the big screen and shrinking it back into the cell inside the previous list.

In my app the transit stations are uniquely identified with an abbreviation. This abbreviation is a bookmark for the Hero animation. A Hero may use the bookmark to tether the interface back together. After expanding a Hero, a new Hero can compact the product back to the original interface.

The Heroes' from the gif above do not properly declare tags. But after linking the corresponding station list item with the new detail screen, one can observe the detail screen shrinking back into the list. The bottom gif is appropriate behavior for creating a Hero with a tag backwards.

Again my experience with Flutter widgets has made app development pleasant. If I were doing this with iOS, I would create a custom push animation that is called inside tableViews' did select cell function. My custom segue would likely need the cell frame and the destination frame, then I could navigate to the detail screen with a Hero like animation using UIView.animate. But getting back would be painful. I would create a new custom segue that has a protocol for asking which cell was tapped last on the previous screen. That protocol will be used inside a function to calculate where I need to shrink the popped screen.

The Hero widget is quite expressive. The programmer is not responsible for converting between coordinates spaces. And can use tags as a shortcut for unwind. The widget interaction is pretty too.