Flutter - Animations from Zero to Hero

Master flutter animations with the animation controller, learning how to start, reverse, and dispose animations, while synchronizing with screen refresh via vsync and ticker provider to ensure smooth, memory-safe widgets.

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.

Explore how animation curves govern the rate of change over time, combine curves with tweens for interpolation, and implement explicit and implicit curve usage in Flutter animations.

Master vertical synchronization (v-sync) in Flutter animations by syncing the animation controller to the device refresh rate. Choose single ticker provider for one animation or ticker provider for multiple animations.

Discover four Flutter animation builders—animated builder, tween animation builder, page route builder, and transition builder—each uses animation values and callbacks to update the user interface and control screen transitions.

Access the source code for each lecture on the course's GitHub repository, where changes are shown via pull requests from previous lectures.

Learn to use animated align in Flutter to animate two widgets inside a stack, moving between alignments with a floating button through implicit animation.

Explore building a Flutter animated align demo by stacking two animated components, cycling through nine positions with a floating action button, using Jerry and Tom assets.

Explore how to animate a flutter container by changing color, size, and border radius around the image of Jerry, with reset functionality to rehearse the animated container example.

Implement an animated container in Flutter using a stateful widget and gesture detector to animate color, width, height, and border radius with implicit animation.

Demonstrates animating a text widget in Flutter to enlarge size and change color, with a reset option to replay the animation.

Apply animated default text style in a Flutter project, adjusting font size and color with a stateful widget, including duration and curve for interactive text animation.

Explore an animated opacity demo in Flutter, showing text, Tom, and Jerry adjusting opacity for each component over time via a duration object and a floating action button.

Explore animated opacity in Flutter by fading three components—a text label and two images—using AnimatedOpacity with a 500 ms duration and a curve, controlled by a visibility toggle.

Demonstrate animated padding in Flutter by animating a parent padding value for four image components, producing smooth increases and decreases through an animation.

Explore animated padding in Flutter using a grid of character images, with a stateful widget controlling the padding value and a floating action button to toggle expansion.

Explore how to animate a physical model by controlling elevation with an animated physical model widget in Flutter, using implicit animation to respond to user interactions.

Learn to implement an animated physical model in Flutter by wiring a gesture detector to toggle elevation on a container that holds an image asset, while adjusting duration and curve.

Explore the animated positioned widget in flutter to place widgets at specific screen positions and animate their movement, illustrated by a cheese race.

Learn to implement animated positioned widgets in flutter, using a stack to move four components across the screen with top and left constraints, margins, and configurable duration.

Explore how to move a widget using the animated position directional widget, guiding movement to top, bottom, left, or right. Use a switch to apply and control the directional animation.

Explore flutter animations by implementing animated position directional to move a widget in four directions using start and top, with four control buttons and edge constraints via media query.

Explore a practical animated cross fade demo that switches between images on click, highlighting the transition animation from spike to Jerry.

Learn to implement an animated cross fade in Flutter using AnimatedCrossFade, toggling between Spike and Jerry images with a gesture detector and crossFadeState.

Explore animated switcher techniques in Flutter by swapping between a login button and a progress loader, using two widgets and smooth transitions.

Learn to build Flutter animated transitions with AnimatedSwitcher that toggles between a login button and a circular progress indicator. Configure duration, curves, and icons to control the animation.

Explore building an animated list in Flutter using implicit animation, with a global key to manage animated list state, enabling insertion and deletion of strings with a size transition.

Demonstrate how to use a position transition widget in Flutter to animate three layered widgets inside a stack, with click-driven transitions back and forth.

Explore Flutter explicit animations with a position transition using a single animation controller and relative rect to move three widgets on a stack. Learn vsync, forward and reverse playback.

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.

Demonstrates implementing size transition for explicit Flutter animations using an animation controller and size factor, triggered by a tap, with 900 ms bounce-out curve and differentiation from implicit animation.

Demonstrate a rotation transition in Flutter using explicit animation to rotate a widget on click through seven turns, illustrating how rotation transitions work in Flutter animations.

Explore rotation transition in Flutter by implementing an explicit animation with an animation controller, animating turns from 0 to seven to rotate an image, controlled by a start button.

Learn to implement rotation in Flutter using an AnimatedBuilder and transformation to rotate a widget, driving an angle from zero to a set value with repeat and reverse options.

Rotate the dog image (dog.png) using an animated builder driven by an animation controller, applying controller.value times 2π with a two-second reverse loop.

Explore fade transition in Flutter using explicit animation, an animation controller, and a tween to control opacity. Tap the floating action button to fade the widget in and out.

Learn to implement a fade transition in Flutter using an animation controller, tween, and opacity to animate a square text with a floating action button.

Explore how the positioned directional transition widget moves and animates a widget to a target point from any direction, enabling a custom drawer with a menu icon.

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.

Explore how to animate opacity in Flutter using tween animation builder, bypassing animation controller and animation object for a simple, controller-free animation demo.

Learn to implement opacity animation with tween animation builder, without an animation controller or animation object, using begin and end values, duration, and a builder callback.

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.

Explore implementing a default text style transition in flutter by animating between two text styles with a text style tween, an animation controller, and a floating action button to toggle.

Explore how indexed stack uses a fixed index to display specific children while applying scale and fade transitions to create dynamic visuals.

Learn to implement an IndexedStack in Flutter, control display with an index, and apply fade and scale transitions using an animation controller for dynamic UI.

Explore flutter animations by implementing a custom page fade transition for navigating from one screen to another, demonstrating fade-in and fade-out effects in a practical demo.

Learn to implement a page fade transition in Flutter by building a custom page route with a transition builder, and optional scale effects on navigation.

Apply a Flutter page scale transition by creating a tween and curve animation, then use a scale transition on the page root builder to open a new screen.

Explore a page scale transition in Flutter by using a tween and curved animation on bridge navigation, controlled by the primary animation to scale the next page.

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.

Learn to implement the Bhagirathi page rotation transition in flutter, with a rotation transition, controllable turns, and a curve animation from zero to one.

In Flutter, implement a page slide transition using an offset tween to animate entry and exit from right, left, top, or bottom.

Implement a slide page transition in Flutter using an offset tween and offset animation to move pages from left, right, top, or bottom, driven by the animation.

Explore Flutter animations with a page size transition demo that grows a screen from zero to full size using size transition, demonstrating from bottom center, bottom, and top alignments.

Explore how to implement a size transition in flutter with SizeTransition and a size factor animated from zero to full size, including center and bottom center alignment demonstrations.

Explore combining fade and size transitions to build page transitions in Flutter. This lecture demonstrates a page mix fade size transition and how to apply both effects together.

Learn to combine size and fade transitions on Flutter page routes, apply a custom transition to the page, and create a simple two-transition sequence for smooth animations.

Learn how to mix scale and rotate transitions on a page, creating a combined animation with two animations and customizable curves.

Explore custom painter in Flutter by overriding the paint function to draw circles, rectangles, and squares on the canvas, and combine size and color animation to create dynamic visuals.

Learn to implement a Flutter custom painter to animate a circle's size and color with an animation controller, size and color tweens, and an animated builder over a two-second cycle.

Learn when to use a Lottie animation in flutter and how to employ ready-made JSON files with the insights page builder to navigate between assets.

Install the lottie package, add three json assets, update pubspec.yaml, and build a lottie slider with a page view and bottom navigation to cycle animations.

Explore drive animation in Flutter using the drive file format, compare it to Lottie JSON and JSON files, and learn how this tool replaces Flare with Life for Flutter animations.

Learn to add and remove animations with the rive flutter package, wire three assets—pair, gear, rating—via pubspec.yaml and run flutter pub get to preview a rive slider animation.