Flutter Custom & Staggered Page Transition Animation Tutorial

📗 Written tutorial & starter project 👇👇

📧 Get Flutter news 📰 and resources:

👨‍💻 Do you write good code? Find out now!

Navigating between routes is quite bland by default. Flutter graciously provides you with the MaterialPageRoute and CupertinoPageRoute classes and, while their transition animations don't look bad, there's certainly something more we can do.

Could we, for example, animate parts of the pushed page independently and even make the animation staggered? Of course, we can! We're in Flutter, after all 💙

Go to my website for more information, code examples, and articles:

Follow me on social media:

[overbyte]

literally the greatest tutorial about this subject

i've spent 2 days with stackoverflow, ddg and even (God help me) chatgpt trying to work this out and the indication about how to use it with named routes as well - amazing work 👍

[FilledStacks]

Nice one Matt! Really liked the tutorial. I didn't know about the custom PageBuilder parameters. Very powerful. can't wait to play around with it :)

[haidarrmehsen]

As usual, a like before watching because I'm sure the content is perfect :)

[Teclys]

Thank you for all your work, Matt. I really appreciate you and all you have done. I actually trying to learning a lot from all of your videos meanwhile I'm having trumbles at work because of this crysis. When I will get my economic stability back again, I will donate you something. I really love you, man. Thanks for all.

[BST-SLYR]

YOU ARE A LEGEND! That animation was so smooth. Thank you for sharing this 😍

[codevillage]

Matt, you are doing an amazing job. Thanks a lot. Waiting for the Domain Driven Development series.

[phyolinmg]

Thanks a lot for this amazing tutorial. And Waiting for your next DDD series

[koketsomashego]

This is awesome.... Looking forward to Flutter Bloc version 4

[Piyeycorp]

Awesome as usual, but I'm still waiting for next DDD video 😅

[francescofreddi]

Great work, like it's strange that you don't want to go through the Animation transition with BLoC, rather than using Provider 😁😁😁😁😁😁❤

[yadhusanil]

broo where are you plz come back with new videos

[yoosefazarnoush]

How can I access the "import library at 22:20?

[matthieuregnauld]

Maybe I get something wrong, but it doesn't work as expected...
Let's say you change the color of the first page to black, and click on the floating action button: the first page suddenly disappears, and a white page appears (actually the background of the second page), then the transition starts.
So, to make this work properly, add "backgroundColor: Colors.transparent" to the Scaffold of the second page.
Aside from that, nice tutorial :)

[Godwin]

Can we control transitionsBuilder animation with gestures? As in can the user drag them to change routes ?

[FriendlyDeveloper]

you should be using Provider.value constructor when you already have the object instantiated . In this case, your animation object is already instantiated.

[shreyanshdokania]

I really want this animation for my project, but I am not able to figure out how to create a route which has this animation as I want to use that for multiple page transitions, can you please make a generalized route which we can use for navigating to pages buy just changing the pagename.

[arifikhsanudin]

Could you do tutorial on flutter driver test?

[vincentmontano]

Hi Matt, thank you for this video. Please make your FB page active. Thanks.

[arifikhsanudin]

What software do you use for editing video

[escpEP]

Hi, may i know what plugin u use in VSCode to show the line indentation for child widget?
|_
|
|_
|__