Module 1

Intro and Implicit Animations

01 - Course Intro (Updated December 2023)
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
05 - Color/Number Game with Flutter Implicit Animations

4:13
06 - Introduction to Animations
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

01 - Module Introduction
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

01 - Habit Tracker App: Introduction
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

01 - Module intro & starter project
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

01 - Module intro
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

01 - Module Intro & Starter project
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

01 - Module Intro: Page Flip Transition
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

01 - Module Intro: Advanced Theming
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

01 - Module Intro
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

01 - Module Intro: Add and Edit Tasks
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)

0% completed

Previous Lesson Next Lesson

Module intro & starter project

⚠️ Video is partially outdated - read notes below ⚠️

Updated Code Snapshot

To get the updated code snapshot for the habit tracker app, run this on the terminal:

git clone https://github.com/bizz84/flutter_animations_course_materials
cd flutter_animations_course_materials/projects/habit_tracker_flutter
git checkout section04-starter
# Needed to run on Flutter 3.24 and higher
flutter pub upgrade --major-versions
code .

Or, if you already have a clone of the course repo, run this from the root folder:

# Discard any working changes
git reset --hard HEAD
git checkout section04-starter
cd projects/habit_tracker_flutter
# Needed to run on Flutter 3.24 and higher
flutter pub upgrade --major-versions

Notes

In this section, we’ll learn how to build a custom task completion ring animation using:

Custom Painters
AnimationController
AnimatedBuilder
Gesture Detectors

By the end, we’ll have built this UI:

Questions? Let's chat