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

  • @JoshMetcalfe
    @JoshMetcalfe2 жыл бұрын

    Loved the use of a Stack to handle multiple Hero actions in the same transition.

  • @JediPixels

    @JediPixels

    2 жыл бұрын

    The Stack is a great widget...

  • @ripern
    @ripern3 жыл бұрын

    Love the detailed explanations. Keep up the awesome work buddy!

  • @JediPixels

    @JediPixels

    3 жыл бұрын

    Thanks a ton!

  • @anton7974
    @anton79743 жыл бұрын

    Great tutorial! Thank you very much for showing differences between default and custom widget behavior

  • @JediPixels

    @JediPixels

    3 жыл бұрын

    Thanks, I appreciate it.

  • @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.

  • @chakrasudarsana5579
    @chakrasudarsana55794 жыл бұрын

    Such a wonderful Tutorial,You have given. Thanks a lot.

  • @JediPixels

    @JediPixels

    4 жыл бұрын

    Thanks, I appreciate it.

  • @MrRamchandranaik1
    @MrRamchandranaik13 жыл бұрын

    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!

  • @renanmendes35
    @renanmendes352 жыл бұрын

    Great! Thanks

  • @JediPixels

    @JediPixels

    2 жыл бұрын

    Thank you...

  • @TenzinThinley
    @TenzinThinley3 жыл бұрын

    Nice. Keep going.

  • @JediPixels

    @JediPixels

    3 жыл бұрын

    I appreciate it.

  • @omargr1801
    @omargr18013 жыл бұрын

    Ty broooo Such a wonderful

  • @JediPixels

    @JediPixels

    3 жыл бұрын

    Thanks, I appreciate it.

  • @VJKoding
    @VJKoding4 жыл бұрын

    Thanks you sir 🖤

  • @JediPixels

    @JediPixels

    4 жыл бұрын

    Thank you for watching.

  • @samyakjain2474
    @samyakjain24744 жыл бұрын

    The atual hero here is you. Thanks a lot :)

  • @JediPixels

    @JediPixels

    4 жыл бұрын

    Thank you for the kind comment.

  • @cinderellarouge
    @cinderellarouge4 жыл бұрын

    Thanks 😊

  • @JediPixels

    @JediPixels

    4 жыл бұрын

    Thank you.

  • @bennguyen1313
    @bennguyen13134 жыл бұрын

    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.

  • @torly2226
    @torly22263 жыл бұрын

    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
    @seeratafreen25254 жыл бұрын

    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

  • @sagarkc3662
    @sagarkc36623 жыл бұрын

    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
    @chakrasudarsana55794 жыл бұрын

    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
    @technosoid28213 жыл бұрын

    Recommended Playback Speed 1.5X

  • @JediPixels

    @JediPixels

    3 жыл бұрын

    Thank you for the feedback.

Келесі