This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Flutter Animations Masterclass - Complete Package
1. Introduction & Implicit Animations [33m]
Course Intro (Updated December 2023) (2:21)
Join "Code With Andrea" on Slack + Course Q/A
Flutter Installation and IDE Setup
Course Repository on GitHub
Color/Number Game with Flutter Implicit Animations (4:13)
Introduction to Animations (2:02)
Download the animations playground project (2:19)
Implicit animations with AnimatedContainer (4:56)
[Exercise] AnimatedOpacity (3:13)
Animation Curves (2:42)
Intro to TweenAnimationBuilder (4:24)
Animating HSV colors with TweenAnimationBuilder (8:13)
Wrap up on Implicit Animations (1:13)
Request for Feedback (optional)
2. UI Challenge: Stopwatch App [1h07m]
Module Introduction (1:44)
Starter project for the Stopwatch app (2:34)
Dark Mode and Custom System UI Overlay (1:47)
Creating a periodic Timer (4:58)
Ticker and TickerProvider (5:46)
Creating a separate StopwatchRenderer widget (2:30)
Sizing the Stopwatch UI with AspectRatio (2:33)
Matrix transforms (7:36)
Getting the circle radius from LayoutBuilder (3:34)
Implementing the animated clock-hand (6:52)
Completing the stopwatch UI (part 1) (6:15)
Completing the stopwatch UI (part 2) (7:40)
Adding the start/stop/reset functionality (part 1) (5:03)
Adding the start/stop/reset functionality (part 2) (5:15)
Performance and testing considerations when working with tickers (3:06)
Request for Feedback (optional)
3. Habit Tracker App Overview [18m]
Habit Tracker App: Introduction (5:49)
Download the Starter Project (2:37)
Linting rules (2:13)
Code walkthrough: Project Assets (3:03)
Code walkthrough: Colors and Theming (4:20)
Request for Feedback (optional)
4. Explicit Animations [1h05m]
Module intro & starter project (2:23)
Task completion ring: Technical planning (2:30)
Introduction to CustomPainter (4:44)
Drawing a task completion ring with the canvas (11:07)
Introduction to explicit animations with AnimationController (4:37)
Animated task completion ring with AnimationController and AnimatedBuilder (4:27)
Controlling the animation with GestureDetector (4:34)
Adding a centered SVG icon to the animated task (4:06)
Task completion UI tweaks (3:34)
Task completion state and final tweaks (4:48)
Bugfix: Handling tap cancel gestures (2:30)
Adding a Task Name (5:22)
Arranging multiple tasks inside a GridView (7:13)
Finished project and Wrap Up (1:48)
Extra Challenge: 3D Pushable Button (0:44)
Request for Feedback (optional)
5. Local Data Persistence with Hive [40m]
Module intro (2:16)
Technical planning: local vs remote storage (2:46)
Starter project overview (2:38)
Introduction to Hive (3:28)
Creating model classes with Hive (3:00)
Creating a type adapter with code generation (2:44)
Creating the HiveDataStore (3:52)
Creating the demo tasks inside main() (3:43)
Creating unique Task IDs with the uuid package (5:14)
Reading tasks with ValueListenableBuilder (8:47)
Wrap up (1:32)
Request for Feedback (optional)
6. State Management with Riverpod [42m]
Module Intro & Starter project (3:22)
Introduction to Riverpod (1:26)
How to use Provider, Consumer, and ConsumerWidget (7:16)
Dependency overrides with ProviderScope (3:27)
TaskState data modelling (2:02)
Creating and using a TaskState Hive model class (6:45)
Adding an onCompleted callback to the AnimatedTask widget (5:40)
Creating a TaskWithNameLoader (10:05)
Wrap Up + Using the Widget Inspector (1:57)
Request for Feedback (optional)
7. Page Flip Animation [33m]
Module Intro: Page Flip Transition (1:50)
Starter project and walkthrough (3:45)
Designing the Page Flip widget API with WidgetBuilders (2:53)
Using a GlobalKey to modify the state of a child widget (2:18)
AnimationController setup (3:47)
AnimatedBuilder vs AnimatedWidget (3:35)
Rotation code with Transform and Matrix4 (5:12)
Interactive page flip transition (3:03)
Widgets, elements and keys (5:06)
Extra Challenge: Card flip game (1:07)
Request for Feedback (optional)
8. Advanced Theming [1h08m]
Module Intro: Advanced Theming (1:43)
Starter project and walkthrough (8:47)
Showing the bottom panels (5:01)
Creating a SlidingPanelAnimator (8:25)
Using the SlidingPanelAnimator (1:41)
Animating the sliding panels (9:42)
Managing app theme state changes: an overview (2:18)
Implementing the AppThemeManager class with StateNotifier (4:39)
Creating and using the AppThemeManager providers (9:19)
Applying the AppThemeSettings (4:45)
Advanced animated theming with ImplicitlyAnimatedWidget (11:31)
Request for Feedback (optional)
9. More Explicit Animations [37m]
Module Intro (1:07)
Starter Project & Walkthrough (7:29)
Controlling animations on the TasksGrid widget (2:54)
Adding an AnimatedWidget subclass to scale widgets (3:21)
Staggered animations (5:04)
Adding an AddTaskItem widget (2:52)
Fade in/out animation with an Opacity widget (2:38)
Explicit animations with FadeTransition and ScaleTransition (4:48)
Overview: built-in transition vs implicitly animated widgets in Flutter (2:14)
Bugfix: disabling task completion in edit mode (4:01)
Request for Feedback (optional)
10. Add and Edit Tasks [17m]
Module Intro: Add and Edit Tasks (2:49)
Navigating to the Add Task and Edit Task pages (3:03)
Overview: AddTaskPage with slivers (2:05)
Overview: TaskDetailsPage and SelectIconPage (5:26)
Overview: Onboarding (3:20)
Conclusion and Next Steps
Conclusion and Next Steps (2:00)
Request for Feedback (optional)
Starter Project & Walkthrough
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock