Flutter Tutorial - Page Transition Animation | Route Navigation Transition
Вставка
- Опубліковано 22 лип 2024
- Add a custom page transition left to right, bottom to top, and add your own Route Navigation Transitions in Flutter.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/rout...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
Follow Twitter | intent/follow?ori...
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
User Profile Page UI Tutorial: • Flutter Tutorial - Use...
Complex Page Transition Tutorial: • Flutter Tutorial - Pag...
Navigation Tutorial: • Flutter Tutorial - 1/2...
Advanced Navigation Tutorial: • Flutter Tutorial - 2/2...
Focused Menu Tutorial: • Flutter Tutorial - Pop...
Persistent Bottom Sheet Tutorial: • Flutter Tutorial - Per...
Hidden Drawer UI Tutorial: • Flutter Tutorial - Hid...
Set Screen Background Color Tutorial: • Flutter Tutorial - Set...
Set Screen Background Image Tutorial: • Flutter Tutorial - Set...
Modal Bottom Sheet Tutorial: • Flutter Tutorial - Dra...
Sliding Up Panel Tutorial: • Flutter Tutorial - Sli...
Sidebar Menu & Navigation Drawer Tutorial: • Flutter Tutorial - Sid...
Collapsible Navigation Drawer Tutorial: • Flutter Tutorial - Col...
Scroll Controller Tutorial: • Flutter Tutorial - Scr...
Animated List Tutorial: • Flutter Tutorial - Ani...
Slidable & Dismissable Tutorial: • Flutter Tutorial - Sli...
TIMELINE
0:00 Introduction Page Transition Animation
0:30 Create Custom Page Transition
1:26 Create Scale Page Transition
2:10 Create Page Transition Left To Right
3:54 Create Page Transition From Bottom And More
5:51 Create Custom Route Animation For Navigator.pushedNamed
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke - Наука та технологія
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/route_transition_example
User Profile Page UI Tutorial: ua-cam.com/video/gSl-MoykYYk/v-deo.html
Complex Page Transition Tutorial: ua-cam.com/video/1nwuihDA8pE/v-deo.html
Navigation Tutorial: ua-cam.com/video/Xnp6ptZVs1g/v-deo.html
Advanced Navigation Tutorial: ua-cam.com/video/btuxZkofLbs/v-deo.html
Focused Menu Tutorial: ua-cam.com/video/Vttl7WGtkgg/v-deo.html
Persistent Bottom Sheet Tutorial: ua-cam.com/video/o01hE56RMrc/v-deo.html
Hidden Drawer UI Tutorial: ua-cam.com/video/vZ7vdMok98g/v-deo.html
Set Screen Background Color Tutorial: ua-cam.com/video/eN62zlmjAEQ/v-deo.html
Set Screen Background Image Tutorial: ua-cam.com/video/sDS4c1C-Fdg/v-deo.html
Modal Bottom Sheet Tutorial: ua-cam.com/video/AjAQglJKcb4/v-deo.html
Sliding Up Panel Tutorial: ua-cam.com/video/s9XHOQeIeZg/v-deo.html
Sidebar Menu & Navigation Drawer Tutorial: ua-cam.com/video/ts9n211n8ZU/v-deo.html
Collapsible Navigation Drawer Tutorial: ua-cam.com/video/eT9wTf6HFS8/v-deo.html
Scroll Controller Tutorial: ua-cam.com/video/XWfg_d2t_Hk/v-deo.html
Animated List Tutorial: ua-cam.com/video/E3SQOqUq8Mg/v-deo.html
Slidable & Dismissable Tutorial: ua-cam.com/video/uuScuU3Vqlc/v-deo.html
like always brilliant , Your lessons have taught entire generations of beginners
Johannes, Thank you very much for your excellent video. I now have a great transition dart program that I will use going forward. Again thanks
Always on the top thank you very much
Thank you for your video. Can you make a tutorial about this package? swipeable_page_route. I want to have parallax effect from 1st => 2nd page. But this current package only allow that from 2nd => other pages.
As always a good video. However, if you build the animation as described and then use the named route then the application context is lost in the named route and as such providers defined at the top of the widget tree cannot be accessed in the child widget
This is awesome. thanks man
thank you for showing how named transitions work. seems like all tuts on this start with navigator push and not pushnamed.
tks Johannes Milke !
is it can pop when doing swipe gesture?
Great video! Please, make a one about firebase could messaging on Android & iOS, this would be great to see tutorial on new versions
Tks man! :)
Great Video, it works great!!
Thanks, Emir Ülker! 🙂
thank you indeed
Hi, is that possible to animate the old page too? For example: After you click the button, the old page get animation fade to black, then the new page slide in from right to left. Can you give tutorial about that if possible? Thanks.
eu can use pageTransitionsTheme on themeData, have some cool options if u don't want create your`s own animation
I couldn't replicate your tutorial today, I have another Navigator with Provider. But the idea is top! tnx again.
You are welcome, Sergio Wanke!
why can't u share the code ?
thank you😀
Glad it was helpful, @akmalbukhariev7932 😀
Can you make video on google maps, advance like creating routes with custom places between the routes and how to track using firebase
@@HeyFlutter Is it possible to create polyline by providing multiple geopoints, I didn't find any resources. If yes, can you give me idea how?
On iOS will it work if we swipe our finger from the direction that screen came to pop the screen?
Thank You StarBattle08! Follow this link: stackoverflow.com/questions/55050463/how-to-detect-swipe-in-flutter
I hope you will get your answer 🙂
hi Johannes , I have tries this in my project , but I I the transition is not as smooth as yours . it obviously lags on some when it tries to show the second page ... could you please tell me whats the solution and what causes this ? another thing I would like to say is please make a video on how to clone the instagram zoom on every post . i saw the source code on instagram but no one teaches on youtube . if you make a video on that i will really appreciate it .
Thank you, delaram majestic! 🙂 lags will not be there in the released apk, debug apk is usually slower than released one. to make a zoom pinch effect you can try this package : pub.dev/packages/pinch_zoom
Can you make a video about resposive design on flutter ?
Thank you, GAMEOLOGIST! Check out this playlist about responsive UI and design: ua-cam.com/video/pYQAhrY_SQA/v-deo.html&ab_channel=JohannesMilke
Thank you
You're welcome, AlizeviA! 🙂
i think Material page route had tis type of property i do earler but not remember
yes it's pageTransitionsTheme from themeData
Can u make twitter like transition animation?
Thanks for the idea @nicholasjela1405 😀, i have added it in my list of future videos
best best best
my friend, you must have a spy program in my pc, no doubt about it
the "Confirm Your Subscription" button in the email sent is not clickable when subscribing to your newsletter.
Thanks, Zed Shockblade! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website
Yet I cant do it with named routes...
Thank you, Psycho! 🙂. Try to provide complete details whenever you face any issue or error.
@@HeyFlutter I said this video doesnt explain how to use transitions while havings namedRoutes
where is the code...there is nothing on github...thats so stupid
Thank You AVS!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
likw allways, every time i try folow your videos i faild... )-:
Thank you, Oded Gilad! 🙂. Kindly share the error message here.