Flutter Animations Tutorial For Beginners

In this video, we’ll dive deep into animations using Flutter. We'll explore different techniques that will build a strong foundation in animation. We’ll begin with 'Implicit Animations' which will teach us how to add smooth animations without the need for complex setups or code. Next, we'll dive into 'Explicit Animations’ where we’ll learn how to have complete control over every aspect of our animation, allowing us to create unique effects. After that, We'll explore 'Page Transitions' where we’ll learn the art of smoothly transitioning between different screens. And finally, we’ll learn about Custom Painter and how we can animate something drawn using Custom Painter! The prerequisite for this tutorial is the basics of Dart & Flutter.

Timestamps:
(00:00:00) Introduction & Prerequisites
(00:00:48) Code Explanation of Color Palette
(00:07:40) Demo of Animated Color Palette
(00:08:14) Implicit Animation Example 1: Coding Animated Color Pallete
(00:18:37) Demo of Animated Shopping App Cart Button
(00:19:27) Implicit Animation Example 2: Coding Animated Shopping App Cart Button
(00:32:07) ImplicitlyAnimatedWidget
(00:34:10) Implicit Animation Example 2: TweenAnimationBuilder
(00:55:56) Recap: Implicit Animations
(00:57:33) Explicit Animations
(00:58:37) Login Animation
(01:12:10) Recap Part 1: Login Animation Till Now
(01:15:07) Login Animation Slide Contd.
(01:29:44) List Animation (Staggered Animations)
(01:44:27) Recap: Interval Explanation
(01:47:12) Loading Animation
(01:56:10) Recap: Explicit Animations
(01:57:15) Implicit vs Explicit Animations
(01:59:15) Page Route Animations w/ Explicit Animations
(02:25:21) Custom Painter & Animations
(02:44:40) Recap: Custom Painter
(02:47:52) Conclusion

Connect With Me Here:

[MrOmanhomeland]

With Rivaan can't close your eyes

[dev_utkarsh]

After a long time the legend finally dropped a video!!!!

[verum]

Thanks a lot! These tutorials are heaven for people like us that can't afford paid courses ❤❤

[festusighalo]

Rivaan!! you always come through bro. Thanks for this.

[sujalutekar]

Love you Rivaan bro
You are awesome, I am learning so much from you everyday ❤

[njib]

I just loved it!. First time watching your video and your explanations are so good . Keep up the good work 💪

[teajhaney]

Thnak you forf this, I just started to watch but I want to request more content on custompainter and renderBox etc... there is not much content on advance topic like these. I believe you are the man for the job

[abhishekbhujel]

Was always intimidated by the word tween but with your video I properly understood. Subscribers = Subscribers +1;

[itsdark]

What a great tutorial.
Thank you so much bro♥❤.

[sunjowilliammburli]

It been a while but I'm happy your are back

[developerflutternew-jfyb]

This is amazing and we are waiting for flutter bloc course pls.

[sharathbnaik]

Thanks rivaan sir. This really great tutorial. ❣❣❣😍

[joaoantonio]

This is such a good work, I'm expecting to have intermediate and advance content later on! Congrats

[jayisampelliwar]

I was so worried about the animation with Flutter you made It so easy. Rivaan You're the best. ✨
btw what theme you're using?

[juniorMr]

amazing tutorial Rivan, keep going .By the way could you make a video talking about kotlin multplatform, bringing your opninion and kind things?

[soomann]

Hi.I am following your courses.Can you please show us how much space is it taking up in release mode.And also how can we save space by removing unused resources?
That would be of great help because the app you build in your one of the video (CurrencyConvertor App) is of 32MB in release mode for me.

[pravinprince]

Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir

[arhamjaved]

You teach far better thans my University professors 😂❤
Veey helpful video ❤

[roninspect]

waited so long for animation video!!!
thanks a lot!

[KhondwaniSikasote]

Awesome content Rivaan!! Just a quick question when you did the custom paint why did the dot appear in the bottom left corner and not the top right corner ?
This was before we gave the size to the BouncingBallPainter class. Does Custom pain have a default dx, dy offest value? as a result puts it in the bottom left ?