- Extra Resources
- Github Code:- https://github.com/bizz84/flutter_animations_course_materials
Build a completely custom habit tracking application.Not convinced? Here's an interactive demo showing what you'll build (Pssst. it's made with Flutter web):
Streaks App Clone. Note: try this on desktop if it doesn't work on mobile.
This project is inspired by the Streaks app - one of the top health & Fitness apps on the App Store (and also an Apple Design Award winner).
This app combines a very slick UI with custom animations to create a unique user experience.
And you know what? With Flutter you can truly build beautiful UIs, and my goal for this course is to show you how. I'll teach you how to build a beautiful app with complex animations, production-level code and a strong focus on architecture.
What's insideThe course is made of 10 independent modules, each with a specific learning objective.
Intro and Implicit AnimationsGetting started:
- A fun game with Implicit Animations!
- Introduction to Animations in Flutter
- Implicit Animations with examples
- Under the hood: Duration and Curves
- TweenAnimationBuilder and Tweens
UI Challenge: Stopwatch appLearn about the foundations of Flutter's animation framework and build a completely custom UI using:
- Ticker and TickerProvider
- Matrix Transforms
- Stacks, LayoutBuilder & other layout widgets
Habit Tracker App OverviewOverview of the starter project for the Habit Tracker app:
- Colors, fonts, assets, and required packages
- Project structure & linting rules
- Common model and widget classes
Explicit AnimationsHow to build a custom task completion UI using:
- Custom Painters
- Gesture Detectors
Local Data Persistence with HiveHow to read and write data to local storage:
- Introduction to Hive
- Creating custom model classes
- Type adapters and code generation
- Creating a domain-specific API class for data persistence
State Management with RiverpodHow to manage dependencies and state:
- Working with Providers, Consumers and ConsumerWidget
- Managing dependency overrides with ProviderScope
- Performing state changes with Riverpod
- Managing new models and their relationships with Hive
Page Flip AnimationDiving deeper with animations to build a custom page flip effect:
- AnimationController (advanced)
- AnimatedBuilder & AnimatedWidget
- 3D Matrix Transforms
- Custom interactive transitions
Advanced ThemingHow to apply custom UI themes to the app and animate between them:
- Adding a theme selection UI panel that can slide in and out
- Working with global keys and callbacks across multiple widgets
- Theme selection and persistence with Hive and Riverpod
- Advanced animated theming with ImplicitlyAnimatedWidget
More Explicit AnimationsMore eye-candy with custom UI and animations:
- Working with Tweens to animate Opacity and Scale
- Staggered Animations
- Using the built-in transition widgets
Add and Edit TasksFunctionality to add, edit and delete tasks:
- Custom Modal Bottom Sheets
- Custom TextFields
- Icon selection
And much more...Custom animations are great. But real apps are made of more than just UI.
So we will also learn about app architecture, local data persistence, state management, and how to write maintainable code following best practices.
You will not learn about animations in isolation. Instead you'll see how everything fits together to create a real app.
Who is this course for?This is not a beginners course.
To make the most of this, you need to have a good understanding of the Dart Language (my Complete Dart Course can help with that). I'll assume that you're already familiar with StatelessWidgets and StatefulWidgets, common layouts (Row, Column, Stack), and the foundations of state management in Flutter.
However, it's ok if you're completely new to animations in Flutter. I will explain how animations work from the ground up, and include additional resources that you can use to fill any gaps.
If you are a Flutter developer looking to build beautiful apps and take your skills to the next level, this course is for you. And this is worth a lot more than the price of admission.