Hero (Flutter Widget of the Week)
Why Stack Overflow recommends it
Stack Overflow users link it when answering Flutter questions about animating an image or list item between screens, as a quick intro to how Hero and its tag work.
Recommended by 6 people across 5 different months, 2019 to 2020.
What it is
A 95-second entry in Google's Flutter Widget of the Week series explaining the Hero widget, which creates an animated shared-element transition between two navigator routes. It covers the idea of a hero transition and how matching tags link the widgets across screens.
What people said
Recommends iKK · 2019-04 · Stack Overflow · on “Flutter: Keep a Row alive when Navigation.push happens”
One trick that I've found is to use "Hero" [this video] Using Hero, I can "heroefy" my desired bottom-bar (i.e. screen-wide row) in Screen-Nr1 and "hereofy" it with the very same dimensions in Screen-Nr2. In both screens, I placed this bottom-bar into a Container that I was able to get wrapped around by Hero. The important part was to keep the dimensions of the two Hero-child-Containers in Screen1 and 2 identical. This has the nice effect that the Transition-shaddows are behind the "bottom-bar"-Containers and that is exactly what I need !
Recommends Sean Urgel · 2019-04 · Stack Overflow · on “Select Item effect in a GridView Builder”
You can try using the Hero widget for a simple animation, but if you're using custom animations you're going to have to change it to a stateful widget. short video on hero widget: [this video]
Recommends Kalpesh Kundanani · 2019-11 · Stack Overflow · on “Managing state for onBackPressed in Flutter bloc”
Why to do so much when you already have the hero widget [this video] in Flutter. Make a List. Use Hero animation for both list items and their details view. Whenever the list item is clicked the details view will be shown. When user presses back button, he/she will come to the position where that particular list item was. So, basically you don't have to much. I was going through some projects and I found this on github: [LINK] This project is walked through in this video that I found on YouTube: [LINK] this project uses Hero widget, I hope it helps you.
Recommends drogel · 2020-03 · Stack Overflow · on “How to animate fullscreen photo transition on swipe, like in Telegram?”
What you need is actually an out-of-the-box widget, and it's surprisingly easy to use. It's called Hero . Basically, you wrap the widget you want to animate like that in a Hero widget, with a specific tag string, and, when you navigate to another screen, you wrap the destination widget in another Hero with the same tag. An effect like the one you shared can be achieved by wrapping two widgets with the same photo with Hero es in different PageRoute s. Check out this Flutter widget of the week [this video] video to get you started, and this Flutter.dev [LINK] article for a more detailed explanation on Hero widgets. Edit: I see you are looking for a more specific image-viewer behavior. Then, I sugge
Recommends Rida Rezzag · 2020-05 · Stack Overflow · on “Navigator.push() shows a Black Screen”
i dont see the hero widget in the detailsPage.dart, when you set up a Hero widget in main and Navigate to detailsPage, you have to set up a hero widget to receive a hero transition from the main page, and because you have a listView in main you have to give a dynamic tag to each list item because each hero must have a tag associated with it so when it transfer to different layout it knows which hero to transit to it, you already set up a hero tag in main page and you already give it a tag as tag: imgPath tag is like an id for that hero, now you need to set the same tag (id) in the detailsPage, please watch this to understand the logic Hero Flutter Widget [this video]
Recommends Zeeshan Hussain · 2020-07 · Stack Overflow · on “Building specific Navigation animation with Flutter”
You can Hero Widget to achieve this. In the first screen wrap your image with Hero widget and provide it with a tag. In the second screen wrap your image with Hero widget and provide it with the same tag. Hero( tag: 'firstImage' child: Image.asset('images/1.png'), ) You can watch the Hero widget video in the Flutter widget of week [this video] . To read more about the hero widget, you can checkout [LINK] .