Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.

--

Completed

--

Lessons completed

to track your course
progress

Module 1

Intro and Implicit Animations

An introduction to implicit animations and implicitly animated widgets in Flutter, covering: duration, curves, tweens, TweenAnimationBuilder, and a fun game about animations.

01 - Course Intro (Updated December 2023)
2:20
02 - Join Code With Andrea on Discord
03 - Flutter Installation and IDE Setup
04 - Course Repository on GitHub
05 - Color/Number Game with Flutter Implicit Animations
4:13
06 - Introduction to Animations
2:02
07 - Implicit Animations Playground
2:19
08 - Implicit animations with AnimatedContainer
4:56
09 - [Exercise] AnimatedOpacity
3:13
10 - Animation Curves
2:42
11 - Intro to TweenAnimationBuilder
4:24
12 - Animating HSV colors with TweenAnimationBuilder
8:13
13 - Wrap up on Implicit Animations
1:13
14 - Request for Feedback (optional)

Module 2

UI Challenge: Stopwatch app

Learn about the foundations of Flutter's animation framework and build a custom stopwatch UI using Ticker and TickerProvider, matrix transforms, stacks, LayoutBuilder and other layour widgets.

01 - Module Introduction
1:44
02 - Starter project for the Stopwatch app
2:34
03 - Dark Mode and Custom System UI Overlay
1:47
04 - Creating a periodic Timer
4:58
05 - Ticker and TickerProvider
5:46
06 - Creating a separate StopwatchRenderer widget
2:30
07 - Sizing the Stopwatch UI with AspectRatio
2:33
08 - Matrix transforms
7:36
09 - Getting the circle radius from LayoutBuilder
3:34
10 - Implementing the animated clock-hand
6:52
11 - Completing the stopwatch UI (part 1)
6:15
12 - Completing the stopwatch UI (part 2)
7:40
13 - Adding the start/stop/reset functionality (part 1)
5:03
14 - Adding the start/stop/reset functionality (part 2)
5:15
15 - Performance and testing considerations when working with tickers
3:06
16 - Request for Feedback (optional)

Module 3

Habit Tracker App Overview

This module offers an overview of the starter project for the Habit Tracker app, including: colors, fonts, assets, and required packages; project structure & linting rules; common model and widget classes.

01 - Habit Tracker App: Introduction
5:49
02 - Download the Starter Project
2:37
03 - Linting rules
2:13
04 - Code walkthrough: Project Assets
3:03
05 - Code walkthrough: Colors and Theming
4:20
06 - Request for Feedback (optional)

Module 4

Explicit Animations

How to build a custom task completion UI using AnimationController, AnimatedBuilder, custom painters, and gesture detectors.

01 - Module intro & starter project
2:23
02 - Task completion ring: Technical planning
2:30
03 - Introduction to CustomPainter
4:44
04 - Drawing a task completion ring with the canvas
11:07
05 - Introduction to explicit animations with AnimationController
4:37
06 - Animated task completion ring with AnimationController and AnimatedBuilder
4:27
07 - Controlling the animation with GestureDetector
4:34
08 - Adding a centered SVG icon to the animated task
4:06
09 - Task completion UI tweaks
3:34
10 - Task completion state and final tweaks
4:48
11 - Bugfix: Handling tap cancel gestures
2:30
12 - Adding a Task Name
5:22
13 - Arranging multiple tasks inside a GridView
7:13
14 - Finished project and Wrap Up
1:48
15 - Extra Challenge: 3D Pushable Button
0:44
16 - Request for Feedback (optional)

Module 5

Local Data Persistence with Hive

How to read and write data to local storage using Hive. As part of this, we'll cover: creating custom model classes, type adapters & code generation, and how to create a domain-specific API for data persistence.

01 - Module intro
2:16
02 - Technical planning: local vs remote storage
2:46
03 - Starter project overview
2:38
04 - Introduction to Hive
3:28
05 - Creating model classes with Hive
3:00
06 - Creating a type adapter with code generation
2:44
07 - Creating the HiveDataStore
3:52
08 - Creating the demo tasks inside main()
3:43
09 - Creating unique Task IDs with the uuid package
5:14
10 - Reading tasks with ValueListenableBuilder
8:47
11 - Wrap up
1:32
12 - Request for Feedback (optional)

Module 6

State Management with Riverpod

How to manage dependencies and state with Riverpod. As part of this, we'll learn how to work with Providers, Consumers, and ConsumerWidget, and how to initialize the HiveDataStore as a dependency override with ProviderScope.

01 - Module Intro & Starter project
3:22
02 - Introduction to Riverpod
1:26
03 - How to use Provider, Consumer, and ConsumerWidget
7:16
04 - Dependency overrides with ProviderScope
3:27
05 - Data modeling for the TaskState class
2:02
06 - Creating and using a TaskState Hive model class
6:45
07 - Adding an onCompleted callback to the AnimatedTask widget
5:40
08 - Creating a TaskWithNameLoader
10:05
09 - Wrap Up + Using the Widget Inspector
1:57
10 - Request for Feedback (optional)

Module 7

Page Flip Animation

Diving deeper with animations to build a custom page flip effect, including: AnimationController (advanced usage), AnimatedBuilder & AnimatedWidget, 3D matrix transforms, custom interactive transitions.

01 - Module Intro: Page Flip Transition
1:50
02 - Starter project and walkthrough
3:45
03 - Designing the Page Flip widget API with WidgetBuilders
2:53
04 - Using a GlobalKey to modify the state of a child widget
2:18
05 - AnimationController setup
3:47
06 - AnimatedBuilder vs AnimatedWidget
3:35
07 - Rotation code with Transform and Matrix4
5:12
08 - Interactive page flip transition
3:03
09 - Widgets, elements and keys
5:06
10 - Extra Challenge: Card flip game
1:07
11 - Request for Feedback (optional)

Module 8

Advanced Theming

How to apply custom animated UI themes, including: adding a sliding theme selection UI panel, working with global keys and callbacks across multiple widgets, theme selection and persistence with Hive and Riverpod, Advanced animated theming with ImplicitlyAnimatedWidget.

01 - Module Intro: Advanced Theming
1:43
02 - Starter project and walkthrough
8:47
03 - Showing the bottom panels
5:01
04 - Creating a SlidingPanelAnimator
8:25
05 - Using the SlidingPanelAnimator
1:41
06 - Animating the sliding panels
9:42
07 - Managing app theme state changes: an overview
2:18
08 - Implementing the AppThemeManager class with StateNotifier
4:39
09 - Creating and using the AppThemeManager providers
9:19
10 - Applying the AppThemeSettings
4:45
11 - Advanced animated theming with ImplicitlyAnimatedWidget
11:31
12 - Request for Feedback (optional)

Module 9

More Explicit Animations

More eye-candy with custom UI and animations, including: working with Tweens to animate Opacity and Scale, Staggered Animations, using the built-in transition widgets.

01 - Module Intro
1:07
02 - Starter Project & Walkthrough
7:29
03 - Controlling animations on the TasksGrid widget
2:54
04 - Adding an AnimatedWidget subclass to scale widgets
3:21
05 - Staggered animations
5:04
06 - Adding an AddTaskItem widget
2:52
07 - Fade in/out animation with an Opacity widget
2:38
08 - Explicit animations with FadeTransition and ScaleTransition
4:48
09 - Overview: built-in transition vs implicitly animated widgets in Flutter
2:14
10 - Bugfix: disabling task completion in edit mode
4:01
11 - Request for Feedback (optional)

Module 10

Add and Edit Tasks

Wrapping up the habit tracking app with some functionality to add, edit and delete tasks, including: custom modal bottom sheets, slivers, custom text fields, list views, icon selection.

01 - Module Intro: Add and Edit Tasks
2:49
02 - Navigating to the Add Task and Edit Task pages
3:03
03 - Overview: AddTaskPage with slivers
2:05
04 - Overview: TaskDetailsPage and SelectIconPage
5:26
05 - Overview: Onboarding
3:20
06 - Conclusion and Next Steps
2:00
07 - Request for Feedback (optional)

⚠️