Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bizz84/flutter_animations_course_materials

All projects from my Flutter Animations Course
https://github.com/bizz84/flutter_animations_course_materials

flutter

Last synced: 3 days ago
JSON representation

All projects from my Flutter Animations Course

Awesome Lists containing this project

README 

        
# Flutter Animations Course | Code With Andrea



This repo contains all the projects from my [Flutter Animations Course](https://nnbd.me/fa).



![Animations course banner](media/flutter-animations-course-banner.png)



The main project for this course is a Flutter habit tracking app, a (simplified) clone of the [Streaks App](https://streaksapp.com/).



## Projects structure



The entire course includes four [projects](projects/):



- **Colors / Numbers Game with Implicit Animations**: This is [located here](projects/colors_numbers_game_flutter) and covered in section 1

- **Flutter Intro Playground**: This is [located here](projects/intro_flutter_playground) and covered in section 1

- **Flutter Stopwatch App**: This is [located here](projects/stopwatch_flutter) and covered in section 2

- **Flutter Habit Tracking App**: This is [located here](projects/habit_tracker_flutter) 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



1. Course Outline and Resources 

2. [Article] Join "Code With Andrea" on Slack + Course Q/A

3. [Article] Flutter Installation and IDE Setup

4. Introduction to Animations

5. Download the animations playground project

6. Implicit animations with AnimatedContainer

7. [Exercise] `AnimatedOpacity`

8. Animation Curves

9.  Intro to `TweenAnimationBuilder`

10. Animating HSV colors with `TweenAnimationBuilder`

11. Wrap up on Implicit Animations



### 2. UI Challenge: Stopwatch app



1. Module Introduction

2. Starter project for the Stopwatch app

3. Dark Mode and Custom System UI Overlay

4. Creating a periodic Timer

5. `Ticker` and `TickerProvider`

6. Creating a separate `StopwatchRenderer` widget

7. Sizing the Stopwatch UI with `AspectRatio`

8. Matrix transforms

9. Getting the circle radius from `LayoutBuilder`

10. Implementing the animated clock-hand

11. Completing the stopwatch UI (part 1)

12. Completing the stopwatch UI (part 2)

13. Adding the start/stop/reset functionality (part 1)

14. Adding the start/stop/reset functionality (part 2)

15. Performance and testing considerations when working with tickers!



### 3. Habit Tracker App Overview



1. Habit Tracker App: Introduction

2. Download the Starter Project

3. Linting rules

4. Code walkthrough: Project Assets

5. Code walkthrough: Colors and Theming



### 4. Explicit Animations



1. Module intro & starter project

2. Task completion ring: Technical planning

3. Introduction to `CustomPainter`

4. Drawing a task completion ring with the canvas

5. Introduction to explicit animations with `AnimationController`

6. Animated task completion ring with `AnimationController` and `AnimatedBuilder`

7. Controlling the animation with `GestureDetector`

8. Adding a centered SVG icon to the animated task

9. Task completion UI tweaks

10. Task completion state and final tweaks

11. Bugfix: Handling tap cancel gestures

12. Adding a Task Name

13. Arranging multiple tasks inside a `GridView`

14. Finished project and Wrap Up



### 5. Local Data Persistence with Hive



1. Module intro

2. Technical planning: local vs remote storage

3. Starter project overview

4. Introduction to Hive

5. Creating model classes with Hive

6. Creating a type adapter with code generation

7. Creating the `HiveDataStore`

8. Creating the demo tasks inside `main()`

9. Creating unique Task IDs with the `uuid` package

10. Reading tasks with `ValueListenableBuilder`

11. Wrap up



### 6. State Management with Riverpod



1. Module Intro & Starter Project

2. Introduction to Riverpod

3. Creating and using a data store with `Provider` and `Consumer`

4. Dependency overrides with `ProviderScope`

5. `TaskState` data modelling

6. Creating and using a `TaskState` Hive model class

7. Adding an `onCompleted` callback to the `AnimatedTask` widget

8. Creating a `TaskWithNameLoader`

9. Wrap Up + Using the Widget Inspector



### 7. Page Flip Animation



1. Module Intro: Page Flip Transition

2. Starter project and walkthrough

3. Designing the Page Flip widget API with WidgetBuilders

4. Using a `GlobalKey` to modify the state of a child widget

5. `AnimationController` setup

6. `AnimatedBuilder` vs `AnimatedWidget`

7. Rotation code with `Transform` and `Matrix4`

8. Interactive page flip transition

9. Widgets, elements and keys

10. Extra Challenge: Card flip game



## 8. Advanced Theming



1. Module Intro: Advanced Theming

2. Starter project and walkthrough

3. Showing the bottom panels

4. Creating a SlidingPanelAnimator

5. Using the SlidingPanelAnimator

6. Animating the sliding panels

7. Managing app theme state changes: an overview

8. Implementing the AppThemeManager class with StateNotifier

9. Creating and using the AppThemeManager providers

10. Applying the AppThemeSettings

11. Advanced animated theming with ImplicitlyAnimatedWidget



## 9. More Explicit Animations



1. Module Intro

2. Starter Project & Walkthrough

3. Controlling animations on the TasksGrid widget

4. Adding an AnimatedWidget subclass to scale widgets

5. Staggered animations

6. Adding an AddTaskItem widget

7. Fade in/out animation with an Opacity widget

8. Explicit animations with FadeTransition and ScaleTransition

9. Overview: built-in transition vs implicitly animated widgets in Flutter

10. Bugfix: disabling task completion in edit mode



### TBC



## Additional Resources



A few official resources from the Flutter website:



- [Introduction to animations | Flutter.dev](https://flutter.dev/docs/development/ui/animations)

  - [Animations overview](https://flutter.dev/docs/development/ui/animations/overview)

  - [Animations tutorial](https://flutter.dev/docs/development/ui/animations/tutorial)

  - [Implicit animations](https://flutter.dev/docs/development/ui/animations/implicit-animations)

  - [Hero animations](https://flutter.dev/docs/development/ui/animations/hero-animations)

  - [Staggered animations](https://flutter.dev/docs/development/ui/animations/staggered-animations)

- [Animation and motion widgets | Flutter.dev](https://flutter.dev/docs/development/ui/widgets/animation)



Some additional resources from Code With Andrea:



- [Flutter Animations: Interactive Page Flip Widget](https://codewithandrea.com/videos/flutter-animations-page-flip-widget-part1/)

- [Flutter Animations: Interactive Page Flip Widget \[Part 2\]](https://codewithandrea.com/videos/flutter-animations-page-flip-widget-part2/)



Page Flip Builder package:



- [page_flip_builder | pub.dev](https://pub.dev/packages/page_flip_builder)



### [License: MIT](LICENSE.md)