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
- Course Outline and Resources
- [Article] Join "Code With Andrea" on Slack + Course Q/A
- [Article] Flutter Installation and IDE Setup
- Introduction to Animations
- Download the animations playground project
- Implicit animations with AnimatedContainer
- [Exercise]
AnimatedOpacity
- Animation Curves
- Intro to
TweenAnimationBuilder
- Animating HSV colors with
TweenAnimationBuilder
- Wrap up on Implicit Animations
2. UI Challenge: Stopwatch app
- Module Introduction
- Starter project for the Stopwatch app
- Dark Mode and Custom System UI Overlay
- Creating a periodic Timer
Ticker
andTickerProvider
- Creating a separate
StopwatchRenderer
widget - Sizing the Stopwatch UI with
AspectRatio
- Matrix transforms
- Getting the circle radius from
LayoutBuilder
- Implementing the animated clock-hand
- Completing the stopwatch UI (part 1)
- Completing the stopwatch UI (part 2)
- Adding the start/stop/reset functionality (part 1)
- Adding the start/stop/reset functionality (part 2)
- Performance and testing considerations when working with tickers!
3. Habit Tracker App Overview
- Habit Tracker App: Introduction
- Download the Starter Project
- Linting rules
- Code walkthrough: Project Assets
- Code walkthrough: Colors and Theming
4. Explicit Animations
- Module intro & starter project
- Task completion ring: Technical planning
- Introduction to
CustomPainter
- Drawing a task completion ring with the canvas
- Introduction to explicit animations with
AnimationController
- Animated task completion ring with
AnimationController
andAnimatedBuilder
- Controlling the animation with
GestureDetector
- Adding a centered SVG icon to the animated task
- Task completion UI tweaks
- Task completion state and final tweaks
- Bugfix: Handling tap cancel gestures
- Adding a Task Name
- Arranging multiple tasks inside a
GridView
- Finished project and Wrap Up
5. Local Data Persistence with Hive
- Module intro
- Technical planning: local vs remote storage
- Starter project overview
- Introduction to Hive
- Creating model classes with Hive
- Creating a type adapter with code generation
- Creating the
HiveDataStore
- Creating the demo tasks inside
main()
- Creating unique Task IDs with the
uuid
package - Reading tasks with
ValueListenableBuilder
- Wrap up
TBC
Additional Resources
A few official resources from the Flutter website:
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: