1. Introduction & Implicit Animations [33m]
-
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)
-
Links and Resources about Implicit Animations
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)
-
Course progress + feedback request
3. Habit Tracker App Overview [18m]
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)
-
Course progress + feedback request
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)
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)
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)
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)
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)
10. Add and Edit Tasks [17m]
Conclusion and Next Steps
2 comments