Flutter - Animations from Zero to Hero

Name: Flutter - Animations from Zero to Hero
Rating: 4.3 (202 reviews)

Learn Animations in Flutter for Beginners

Created byMina Farid

Last updated 6/2026

English

What you'll learn

Basics of Flutter Animations
Best Practices for Animations
Implicit Animations
Explicit Animations
Page Transition Animations
Custom Paint Animations
Lottie Animations
Flare Animations

Course content

6 sections • 73 lectures • 10h 7m total length

Lecture 1: About the Course0:31
Lecture 2: What is Animation in Flutter?10:34
Lecture 3: What are Animation Concepts in Flutter?13:25
Lecture 4: What are Animation Types in Flutter?5:14
Explore the four Flutter animation types - implicit, explicit, low level, and third-party frameworks - covering ease of use, developer control, and options like custom painter, Lottie, and Rive.
Lecture 5: Flutter Animtions Tree9:40
Explore Flutter's animation decision tree to pick implicit, explicit, or low-level animations, including third-party tools like Lottie and Flare, and when to use custom painter or animated builder.

Lecture 6: Animation Controller OverView5:41
Lecture 7: Animation Controller in Deep21:02
Discover how to control Flutter animations with an animation controller, using its status (forward, reverse, completed, dismissed), value, and listeners, with tween examples and add/remove listener patterns.
Lecture 8: Animation and Tweens19:07
Lecture 9: Animation Curves9:16
Lecture 10: Vertical Synchronization and TickerProvider4:29
Lecture 11: Animation Builders13:00

How To Get Source code?1:41
Lecture 13: Prepare the project8:51
Lecture 14: Animated Align Demo0:49
Lecture 15: Animated Align26:12
Lecture 16: Animated Container Demo0:52
Lecture 17: Animated Container14:46
Lecture 18: Animated Default Text Style Demo0:38
Demonstrates animating a text widget in Flutter to enlarge size and change color, with a reset option to replay the animation.
Lecture 19: Animated Default Text Style15:24
Lecture 20: Animated Opacity Demo0:57
Lecture 21: Animated Opacity12:07
Lecture 22: Animated Padding Demo1:00
Lecture 23: Animated Padding16:42
Lecture 24: Animated Physical Model Demo0:51
Lecture 25: Animated Physical Model9:31
Lecture 26: Animated Positioned Demo1:12
Lecture 27: Animated Positioned27:53
Lecture 28: Animated Positioned Directional Demo0:39
Lecture 29: Animated Positioned Directional25:11
Lecture 30: Animated CrossFade Demo0:54
Lecture 31: Animated CrossFade12:03
Lecture 32: Animated Switcher Demo1:00
Lecture 33: Animated Switcher8:47
Lecture 34: Animated List State Demo0:47
Lecture 35: Animated List State21:47

Lecture 36: Poistioned Transition Demo1:02
Lecture 37: Poistioned Transition28:07
Lecture 38: Size Transition Demo0:48
Explore Flutter size transition by animating a widget from zero to full size, using an explicit transition and a curve such as a bounce to illustrate the effect.
Lecture 39: Size Transition16:32
Lecture 40: Rotation Transition Demo0:48
Lecture 41: Rotation Transition10:54
Lecture 42: Animated Builder Demo0:46
Lecture 43: Animated Builder18:02
Lecture 44: Fade Transition Demo1:26
Lecture 45: Fade Transition8:34
Lecture 46: Positioned Directional Transition Demo1:28
Lecture 47: Positioned Directional Transition14:35
Learn to implement a position directional transition in flutter, animating a widget relative to the parent edge, and compare it with position transition using an animated builder.
Lecture 48: Tween Animation Builder Demo1:15
Lecture 49: Tween Animation Builder17:47
Lecture 50: Default Text Style Transition Demo0:53
Explore the default text style transition by animating a text widget from one style to another with a duration and curve, switching font size and color via floating action button.
Lecture 51: Default Text Style Transition12:09
Lecture 52: Inexed Stack Transition Demo1:05
Explore how indexed stack uses a fixed index to display specific children while applying scale and fade transitions to create dynamic visuals.
Lecture 53: Inexed Stack Transition19:16

Lecture 54: Page Fade Transition Demo0:59
Lecture 55: Page Fade Transition17:19
Lecture 56: Page Scale Transition Demo1:46
Lecture 57: Page Scale Transition11:28
Lecture 58: Page Rotation Transition Demo1:32
Learn to implement a page rotation transition in Flutter using route builder, rotating the screen until it fits the display, with a transition filter for custom animation on the page.
Lecture 59: Page Rotation Transition7:12
Lecture 60: Page Slide Transition Demo1:11
In Flutter, implement a page slide transition using an offset tween to animate entry and exit from right, left, top, or bottom.
Lecture 61: Page Slide Transition8:34
Lecture 62: Page Size Transition Demo1:09
Lecture 63: Page Size Transition4:14
Lecture 64: Page Mix Fade Size Transition Demo1:11
Lecture 65: Page Mix Fade Size Transition3:37
Lecture 66: Page Mix Scale Rotate Transition Demo1:06
Lecture 67: Page Mix Scale Rotate Transition4:59

Requirements

Just know the basics of dart and flutter, No expeirence needed in animations

Description

This course is prepared to teach you how to create engaging and dynamic UI using animations in Flutter.
You will learn the fundamentals of creating animations in Flutter using the Animation and Tween classes, and explore more.

The course will cover best practices for creating animations in Flutter, such as optimizing performance and minimizing visual clutter. Real-world examples and case studies will be used to demonstrate how animations can enhance the user experience and add personality to an app.

By the end of the course, you will have the skills and knowledge they need to create beautiful and engaging UI in Flutter applications using animations

You will learn how to use implicit animations to create basic animations such as changing the color or size of a widget. You will also explore advanced techniques for implicit animations, such as using the AnimatedBuilder widget and working with animations in a widget tree. Best practices for implicit animations will be covered, such as optimizing performance and minimizing visual clutter.

In addition, you will learn how to use explicit animations to create custom animations that reflect their app's unique personality. You will learn how to use the Animation and Tween classes to create complex animations, such as animating widgets along a path. The course will also cover best practices for explicit animations, such as optimizing performance and using animations to enhance the user experience.

Who this course is for:

For developers who have the passion in learning flutter Animations from zero

Flutter - Animations from Zero to Hero

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 39min

Animations Basics6 lectures • 1hr 13min

Implicit Animations24 lectures • 3hr 31min

Explicit Animations18 lectures • 2hr 35min

Page Transitions Animation14 lectures • 1hr 6min

More Animations6 lectures • 1hr 3min

Requirements

Description

Who this course is for: