Тёмный
No video :(

Flutter Hero Animations and PageRouteBuilder 

JediPixels
Подписаться 5 тыс.
Просмотров 14 тыс.
50% 1

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/Jed...
Twitter: / jedipixels
Looking for Updates: JediPixels.dev
Blog Article: jedipixels.dev...
Beginning Flutter Book: www.amazon.com...
Subscribe: www.youtube.co...
#flutter #fluttertutorial #appdevelopment #dart #flutterdev

Опубликовано:

 

14 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 38   
@JoshMetcalfe
@JoshMetcalfe 3 года назад
Loved the use of a Stack to handle multiple Hero actions in the same transition.
@JediPixels
@JediPixels 2 года назад
The Stack is a great widget...
@333PerezJuan
@333PerezJuan Год назад
Hey Mr you're a Master. Thank you a lot for sharing your knowledge.
@JediPixels
@JediPixels Год назад
Thank you so much, I appreciate it.
@anton7974
@anton7974 3 года назад
Great tutorial! Thank you very much for showing differences between default and custom widget behavior
@JediPixels
@JediPixels 3 года назад
Thanks, I appreciate it.
@MrRamchandranaik1
@MrRamchandranaik1 3 года назад
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
@JediPixels 3 года назад
You're very welcome!
@ripern
@ripern 3 года назад
Love the detailed explanations. Keep up the awesome work buddy!
@JediPixels
@JediPixels 3 года назад
Thanks a ton!
@TenzinThinley
@TenzinThinley 3 года назад
Nice. Keep going.
@JediPixels
@JediPixels 3 года назад
I appreciate it.
@chakrasudarsana5579
@chakrasudarsana5579 4 года назад
Such a wonderful Tutorial,You have given. Thanks a lot.
@JediPixels
@JediPixels 4 года назад
Thanks, I appreciate it.
@renanmendes35
@renanmendes35 3 года назад
Great! Thanks
@JediPixels
@JediPixels 2 года назад
Thank you...
@samyakjain2474
@samyakjain2474 4 года назад
The atual hero here is you. Thanks a lot :)
@JediPixels
@JediPixels 4 года назад
Thank you for the kind comment.
@bennguyen1313
@bennguyen1313 4 года назад
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
@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.
@omargr1801
@omargr1801 4 года назад
Ty broooo Such a wonderful
@JediPixels
@JediPixels 4 года назад
Thanks, I appreciate it.
@VJKoding
@VJKoding 4 года назад
Thanks you sir 🖤
@JediPixels
@JediPixels 4 года назад
Thank you for watching.
@torly2226
@torly2226 3 года назад
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)!
@seeratafreen2525
@seeratafreen2525 4 года назад
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
@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
@seeratafreen2525 4 года назад
@@JediPixels thanku :p
@cinderellarouge
@cinderellarouge 4 года назад
Thanks 😊
@JediPixels
@JediPixels 4 года назад
Thank you.
@sagarkc3662
@sagarkc3662 3 года назад
Jumping from Screen A to Screen B is slow and nice but on pressing back from Screen B the animation is too fast..
@JediPixels
@JediPixels 3 года назад
Thanks for the comment.
@chakrasudarsana5579
@chakrasudarsana5579 4 года назад
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
@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
@chakrasudarsana5579 4 года назад
@@JediPixels Yes done,Thanks a lot :)
@chakrasudarsana5579
@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?
@technosoid2821
@technosoid2821 3 года назад
Recommended Playback Speed 1.5X
@JediPixels
@JediPixels 3 года назад
Thank you for the feedback.
Далее
Редакция. News: 129-я неделя
49:53
Просмотров 2 млн
I Built a Trampoline Park in My House!
29:50
Просмотров 11 млн
Hero Animation QR Code | TRANSITIONS | FLUTTER UI
51:30
Flutter Tutorial- Flutter PageRouteBuilder
9:55
Просмотров 4,9 тыс.
Flutter Layout Design Tutorial || Top 5 Widgets
21:04
#MadeByGoogle ‘24: Pixel Cameras
18:02
Просмотров 10 тыс.
Complex Animations in Flutter using Rive | Flare
15:44
Просмотров 224 тыс.
Top 12 Flutter Tips & Tricks
9:32
Просмотров 267 тыс.