Flutter Widget Guide — Hero Widget in 5 mins or less
This is Part 17 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
Animations and transitions are a great way to enhance your application’s user experience. Normally, when you create a transition from one screen inside your app to another, the change in the screens is rather abrupt. Wouldn’t it be great to show this transition between the screens with a nice and smooth animation? How can we achieve this? One option is to show a change with the help of a common widget on both the screens, be it an image, a widget or anything for that matter and flutter has a ready made solution for this.
Hero Widget
1 | What?
Hero transition is very common in modern day applications which let the user know that they moved from one screen to another. Flutter has Hero widget for this, which automatically creates a Hero transition between two navigator routes. It detects the common widget between the two routes and animates the change.
2 | Wondering how it works?
Have a look at the Code snippet below.
Below is the visual representation of the code above.
3 | Explanation
In the above example, we have two screens, first screen is Hero Widget and the second screen is Hero 2 Widget and we are transitioning from first screen to the second screen when we click on the circular yellow Container widget at the bottom of the first screen. As you may have observed in the Gif above, there is an animation when this transition happens.
Let’s see how that works out.
First, we need to wrap common widgets (Container widget containing a ClipRRect widget with different borderRadius) on both the screens with Hero widget. Next, we provide a common tag (here “hero”) to both the widgets to help flutter know which widgets to animate. That’s all, the animations will work as expected.
In the example above you might have observed two new things:
- WillPopScope: This widget will help you perform tasks on the press of the back button (when the screen is dismissed). It’s onWillPop method is triggered when the screen is dismissed. Return Future.value(true) for it to work as expected.
- timeDilation: This is a global property that lets you slow things down. You can increase or decrease its value as per your requirements. I have used it in this example to show you the animation in slow motion. We reset this property to its default value of 1.0 when user exits the Hero screen. Don’t forget to import ‘package:flutter/scheduler.dart’ show timeDilation in your dart class to access this property.
Previous 👆
Next 👇
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop an e-mail at [email protected] as well.
See more in the series -
Have a wonderful day 🙂