Flutter Hero Animations and PageRouteBuilder
Ғылым және технология
In this video, you are going to take a look at:
- How hero animation allows a widget transition to fly into place from one page to another
- How to use the PageRouteBuilder to create custom navigation transitions with hero animation
GitHub: github.com/JediPixels/page_hero
Twitter: / jedipixels
Looking for Updates: JediPixels.dev
Blog Article: jedipixels.dev/flutter-hero-w...
Beginning Flutter Book: www.amazon.com/Beginning-Flut...
Subscribe: kzread.info?su...
#flutter #fluttertutorial #appdevelopment #dart #flutterdev
Пікірлер: 38
Loved the use of a Stack to handle multiple Hero actions in the same transition.
@JediPixels
2 жыл бұрын
The Stack is a great widget...
Love the detailed explanations. Keep up the awesome work buddy!
@JediPixels
3 жыл бұрын
Thanks a ton!
Great tutorial! Thank you very much for showing differences between default and custom widget behavior
@JediPixels
3 жыл бұрын
Thanks, I appreciate it.
Hey Mr you're a Master. Thank you a lot for sharing your knowledge.
@JediPixels
Жыл бұрын
Thank you so much, I appreciate it.
Such a wonderful Tutorial,You have given. Thanks a lot.
@JediPixels
4 жыл бұрын
Thanks, I appreciate it.
thank you for the detailed teaching I was searching for some widget that did the same and I had explored the hero tag but was not able to apply it properly, thank you 🙏
@JediPixels
3 жыл бұрын
You're very welcome!
Great! Thanks
@JediPixels
2 жыл бұрын
Thank you...
Nice. Keep going.
@JediPixels
3 жыл бұрын
I appreciate it.
Ty broooo Such a wonderful
@JediPixels
3 жыл бұрын
Thanks, I appreciate it.
Thanks you sir 🖤
@JediPixels
4 жыл бұрын
Thank you for watching.
The atual hero here is you. Thanks a lot :)
@JediPixels
4 жыл бұрын
Thank you for the kind comment.
Thanks 😊
@JediPixels
4 жыл бұрын
Thank you.
Love the idea of using PageRouteBuilder to add a time element to hero's animation transition! Any thoughts if there's a way 'flexible' could have been used to space each GestureDetector's Card? Or would it cause issues with stack/positioned code? Also, would love to hear your thoughts on the animation ui from the 'Implementing complex UI with Flutter - Marcin Szałek | Flutter Europe" video!
@JediPixels
4 жыл бұрын
I always wanted to slow down the Hero animation and the PageRouteBuilder is definitely a great choice. In the example, the ListView.builder itemExtent is responsible for the height of each Card containing the Stack to layout the child widgets. I personally like to use a stack with positioned widgets, but if you prefer to use other combinations like Columns/Rows and Flex that is fine too. Marcin's presentation 'Implementing complex UI' is excellent, I would recommend it to anyone interested in creating animations.
Thank you for this video! I have a question: How do you position widgets if the height of some of the ones above are variable? Such as the title. Let's say the title can be multiple lines. How would you know where to position the subtitle? Same thing with the image. If the image can be different sizes, the position of the title will depend on that. Then the position of the subtitle will depend on the height of both the image and title. And the container's height depends on all of those. So is there a solution to this? Thank you in advance (I'm new to Flutter)!
class Details extends StatefulWidget { final HeroType heroType; for what purpose (final HeroType heroType; ) is used? and how HeroType can be used as datatype for herotype....
@JediPixels
4 жыл бұрын
The HeroType class is passed to the Details page, which contains the data passed from the home page. The HeroType class contains the title, subTitle, image and the materialColor values. Instead of passing each value in a separate variable, all of them are passed togehter in the HeroType class (custom object).
@seeratafreen2525
4 жыл бұрын
@@JediPixels thanku :p
Jumping from Screen A to Screen B is slow and nice but on pressing back from Screen B the animation is too fast..
@JediPixels
3 жыл бұрын
Thanks for the comment.
i got a error 'type 'Color' is not a subtype of type 'MaterialColor'. I couldnot rectify this error.Can you say what is the mistake?
@JediPixels
4 жыл бұрын
I would need to see a little more of your code, but the HeroType class is looking for a MaterialColor to be used and not a Color. Please go ahead and download the sample code at github.com/JediPixels/page_hero and you can see how I am using it.
@chakrasudarsana5579
4 жыл бұрын
@@JediPixels Yes done,Thanks a lot :)
@chakrasudarsana5579
4 жыл бұрын
i got another error :( . Exception caught by image resource service Unable to load asset: assets/images/ Actually i used different JPG images. Can you say what is the mistake?
Recommended Playback Speed 1.5X
@JediPixels
3 жыл бұрын
Thank you for the feedback.