Flutter Animations Course | Code With Andrea

This repo contains all the projects from my Flutter Animations Course.

The main project for this course is a Flutter habit tracking app, a (simplified) clone of the Streaks App.

Projects structure

The entire course includes four projects:

• Colors / Numbers Game with Implicit Animations: This is located here and covered in section 1
• Flutter Intro Playground: This is located here and covered in section 1
• Flutter Stopwatch App: This is located here and covered in section 2
• Flutter Habit Tracking App: This is located here and covered in sections 3 to 10 (rest of the course)

Note: each commit in this project corresponds to a specific lesson in the course.

Course Syllabus

1. Introduction and Implicit Animations

1. Course Outline and Resources
2. [Article] Join "Code With Andrea" on Slack + Course Q/A
3. [Article] Flutter Installation and IDE Setup
4. Introduction to Animations
5. Download the animations playground project
6. Implicit animations with AnimatedContainer
7. [Exercise] AnimatedOpacity
8. Animation Curves
9. Intro to TweenAnimationBuilder
10. Animating HSV colors with TweenAnimationBuilder
11. Wrap up on Implicit Animations

2. UI Challenge: Stopwatch app

1. Module Introduction
2. Starter project for the Stopwatch app
3. Dark Mode and Custom System UI Overlay
4. Creating a periodic Timer
5. Ticker and TickerProvider
6. Creating a separate StopwatchRenderer widget
7. Sizing the Stopwatch UI with AspectRatio
8. Matrix transforms
9. Getting the circle radius from LayoutBuilder
10. Implementing the animated clock-hand
11. Completing the stopwatch UI (part 1)
12. Completing the stopwatch UI (part 2)
13. Adding the start/stop/reset functionality (part 1)
14. Adding the start/stop/reset functionality (part 2)
15. Performance and testing considerations when working with tickers!

3. Habit Tracker App Overview

1. Habit Tracker App: Introduction
2. Download the Starter Project
3. Linting rules
4. Code walkthrough: Project Assets
5. Code walkthrough: Colors and Theming

4. Explicit Animations

1. Module intro & starter project
2. Task completion ring: Technical planning
3. Introduction to CustomPainter
4. Drawing a task completion ring with the canvas
5. Introduction to explicit animations with AnimationController
6. Animated task completion ring with AnimationController and AnimatedBuilder
7. Controlling the animation with GestureDetector
8. Adding a centered SVG icon to the animated task
9. Task completion UI tweaks
10. Task completion state and final tweaks
11. Bugfix: Handling tap cancel gestures
12. Adding a Task Name
13. Arranging multiple tasks inside a GridView
14. Finished project and Wrap Up

5. Local Data Persistence with Hive

1. Module intro
2. Technical planning: local vs remote storage
3. Starter project overview
4. Introduction to Hive
5. Creating model classes with Hive
6. Creating a type adapter with code generation
7. Creating the HiveDataStore
8. Creating the demo tasks inside main()
9. Creating unique Task IDs with the uuid package
10. Reading tasks with ValueListenableBuilder
11. Wrap up

6. State Management with Riverpod

1. Module Intro & Starter Project
2. Introduction to Riverpod
3. Creating and using a data store with Provider and Consumer
4. Dependency overrides with ProviderScope
5. TaskState data modelling
6. Creating and using a TaskState Hive model class
7. Adding an onCompleted callback to the AnimatedTask widget
8. Creating a TaskWithNameLoader
9. Wrap Up + Using the Widget Inspector

7. Page Flip Animation

1. Module Intro: Page Flip Transition
2. Starter project and walkthrough
3. Designing the Page Flip widget API with WidgetBuilders
4. Using a GlobalKey to modify the state of a child widget
5. AnimationController setup
6. AnimatedBuilder vs AnimatedWidget
7. Rotation code with Transform and Matrix4
8. Interactive page flip transition
9. Widgets, elements and keys
10. Extra Challenge: Card flip game

8. Advanced Theming

1. Module Intro: Advanced Theming
2. Starter project and walkthrough
3. Showing the bottom panels
4. Creating a SlidingPanelAnimator
5. Using the SlidingPanelAnimator
6. Animating the sliding panels
7. Managing app theme state changes: an overview
8. Implementing the AppThemeManager class with StateNotifier
9. Creating and using the AppThemeManager providers
10. Applying the AppThemeSettings
11. Advanced animated theming with ImplicitlyAnimatedWidget

9. More Explicit Animations

1. Module Intro
2. Starter Project & Walkthrough
3. Controlling animations on the TasksGrid widget
4. Adding an AnimatedWidget subclass to scale widgets
5. Staggered animations
6. Adding an AddTaskItem widget
7. Fade in/out animation with an Opacity widget
8. Explicit animations with FadeTransition and ScaleTransition
9. Overview: built-in transition vs implicitly animated widgets in Flutter
10. Bugfix: disabling task completion in edit mode

TBC

Additional Resources

A few official resources from the Flutter website:

• Introduction to animations | Flutter.dev
  • Animations overview
  • Animations tutorial
  • Implicit animations
  • Hero animations
  • Staggered animations
• Animation and motion widgets | Flutter.dev

Some additional resources from Code With Andrea:

• Flutter Animations: Interactive Page Flip Widget
• Flutter Animations: Interactive Page Flip Widget [Part 2]

Page Flip Builder package:

• page_flip_builder | pub.dev

License: MIT