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.
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 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
- 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!
- Habit Tracker App: Introduction
- Download the Starter Project
- Linting rules
- Code walkthrough: Project Assets
- Code walkthrough: Colors and Theming
- 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
- 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
- Module Intro & Starter Project
- Introduction to Riverpod
- Creating and using a data store with
Provider
andConsumer
- Dependency overrides with
ProviderScope
TaskState
data modelling- Creating and using a
TaskState
Hive model class - Adding an
onCompleted
callback to theAnimatedTask
widget - Creating a
TaskWithNameLoader
- Wrap Up + Using the Widget Inspector
- Module Intro: Page Flip Transition
- Starter project and walkthrough
- Designing the Page Flip widget API with WidgetBuilders
- Using a
GlobalKey
to modify the state of a child widget AnimationController
setupAnimatedBuilder
vsAnimatedWidget
- Rotation code with
Transform
andMatrix4
- Interactive page flip transition
- Widgets, elements and keys
- Extra Challenge: Card flip game
- Module Intro: Advanced Theming
- Starter project and walkthrough
- Showing the bottom panels
- Creating a SlidingPanelAnimator
- Using the SlidingPanelAnimator
- Animating the sliding panels
- Managing app theme state changes: an overview
- Implementing the AppThemeManager class with StateNotifier
- Creating and using the AppThemeManager providers
- Applying the AppThemeSettings
- Advanced animated theming with ImplicitlyAnimatedWidget
- Module Intro
- Starter Project & Walkthrough
- Controlling animations on the TasksGrid widget
- Adding an AnimatedWidget subclass to scale widgets
- Staggered animations
- Adding an AddTaskItem widget
- Fade in/out animation with an Opacity widget
- Explicit animations with FadeTransition and ScaleTransition
- Overview: built-in transition vs implicitly animated widgets in Flutter
- Bugfix: disabling task completion in edit mode
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: