{"id":13552014,"url":"https://github.com/bizz84/flutter_animations_course_materials","last_synced_at":"2025-04-07T07:16:44.244Z","repository":{"id":38681318,"uuid":"355928569","full_name":"bizz84/flutter_animations_course_materials","owner":"bizz84","description":"All projects from my Flutter Animations Course","archived":false,"fork":false,"pushed_at":"2024-02-27T08:56:24.000Z","size":1098,"stargazers_count":260,"open_issues_count":0,"forks_count":89,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-31T06:03:32.964Z","etag":null,"topics":["flutter"],"latest_commit_sha":null,"homepage":"https://nnbd.me/fa","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bizz84.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-08T13:57:35.000Z","updated_at":"2025-03-11T21:01:58.000Z","dependencies_parsed_at":"2024-01-19T06:55:52.331Z","dependency_job_id":"2d0119eb-54ed-467b-9170-349e9bb6d4f9","html_url":"https://github.com/bizz84/flutter_animations_course_materials","commit_stats":null,"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Fflutter_animations_course_materials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Fflutter_animations_course_materials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Fflutter_animations_course_materials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Fflutter_animations_course_materials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bizz84","download_url":"https://codeload.github.com/bizz84/flutter_animations_course_materials/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608154,"owners_count":20965952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter"],"created_at":"2024-08-01T12:01:57.520Z","updated_at":"2025-04-07T07:16:44.221Z","avatar_url":"https://github.com/bizz84.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Flutter Animations Course | Code With Andrea\n\nThis repo contains all the projects from my [Flutter Animations Course](https://nnbd.me/fa).\n\n![Animations course banner](media/flutter-animations-course-banner.png)\n\nThe main project for this course is a Flutter habit tracking app, a (simplified) clone of the [Streaks App](https://streaksapp.com/).\n\n## Projects structure\n\nThe entire course includes four [projects](projects/):\n\n- **Colors / Numbers Game with Implicit Animations**: This is [located here](projects/colors_numbers_game_flutter) and covered in section 1\n- **Flutter Intro Playground**: This is [located here](projects/intro_flutter_playground) and covered in section 1\n- **Flutter Stopwatch App**: This is [located here](projects/stopwatch_flutter) and covered in section 2\n- **Flutter Habit Tracking App**: This is [located here](projects/habit_tracker_flutter) and covered in sections 3 to 10 (rest of the course)\n\n*Note: each commit in this project corresponds to a specific lesson in the course.*\n\n## Course Syllabus\n\n### 1. Introduction and Implicit Animations\n\n1. Course Outline and Resources \n2. [Article] Join \"Code With Andrea\" on Slack + Course Q/A\n3. [Article] Flutter Installation and IDE Setup\n4. Introduction to Animations\n5. Download the animations playground project\n6. Implicit animations with AnimatedContainer\n7. [Exercise] `AnimatedOpacity`\n8. Animation Curves\n9.  Intro to `TweenAnimationBuilder`\n10. Animating HSV colors with `TweenAnimationBuilder`\n11. Wrap up on Implicit Animations\n\n### 2. UI Challenge: Stopwatch app\n\n1. Module Introduction\n2. Starter project for the Stopwatch app\n3. Dark Mode and Custom System UI Overlay\n4. Creating a periodic Timer\n5. `Ticker` and `TickerProvider`\n6. Creating a separate `StopwatchRenderer` widget\n7. Sizing the Stopwatch UI with `AspectRatio`\n8. Matrix transforms\n9. Getting the circle radius from `LayoutBuilder`\n10. Implementing the animated clock-hand\n11. Completing the stopwatch UI (part 1)\n12. Completing the stopwatch UI (part 2)\n13. Adding the start/stop/reset functionality (part 1)\n14. Adding the start/stop/reset functionality (part 2)\n15. Performance and testing considerations when working with tickers!\n\n### 3. Habit Tracker App Overview\n\n1. Habit Tracker App: Introduction\n2. Download the Starter Project\n3. Linting rules\n4. Code walkthrough: Project Assets\n5. Code walkthrough: Colors and Theming\n\n### 4. Explicit Animations\n\n1. Module intro \u0026 starter project\n2. Task completion ring: Technical planning\n3. Introduction to `CustomPainter`\n4. Drawing a task completion ring with the canvas\n5. Introduction to explicit animations with `AnimationController`\n6. Animated task completion ring with `AnimationController` and `AnimatedBuilder`\n7. Controlling the animation with `GestureDetector`\n8. Adding a centered SVG icon to the animated task\n9. Task completion UI tweaks\n10. Task completion state and final tweaks\n11. Bugfix: Handling tap cancel gestures\n12. Adding a Task Name\n13. Arranging multiple tasks inside a `GridView`\n14. Finished project and Wrap Up\n\n### 5. Local Data Persistence with Hive\n\n1. Module intro\n2. Technical planning: local vs remote storage\n3. Starter project overview\n4. Introduction to Hive\n5. Creating model classes with Hive\n6. Creating a type adapter with code generation\n7. Creating the `HiveDataStore`\n8. Creating the demo tasks inside `main()`\n9. Creating unique Task IDs with the `uuid` package\n10. Reading tasks with `ValueListenableBuilder`\n11. Wrap up\n\n### 6. State Management with Riverpod\n\n1. Module Intro \u0026 Starter Project\n2. Introduction to Riverpod\n3. Creating and using a data store with `Provider` and `Consumer`\n4. Dependency overrides with `ProviderScope`\n5. `TaskState` data modelling\n6. Creating and using a `TaskState` Hive model class\n7. Adding an `onCompleted` callback to the `AnimatedTask` widget\n8. Creating a `TaskWithNameLoader`\n9. Wrap Up + Using the Widget Inspector\n\n### 7. Page Flip Animation\n\n1. Module Intro: Page Flip Transition\n2. Starter project and walkthrough\n3. Designing the Page Flip widget API with WidgetBuilders\n4. Using a `GlobalKey` to modify the state of a child widget\n5. `AnimationController` setup\n6. `AnimatedBuilder` vs `AnimatedWidget`\n7. Rotation code with `Transform` and `Matrix4`\n8. Interactive page flip transition\n9. Widgets, elements and keys\n10. Extra Challenge: Card flip game\n\n## 8. Advanced Theming\n\n1. Module Intro: Advanced Theming\n2. Starter project and walkthrough\n3. Showing the bottom panels\n4. Creating a SlidingPanelAnimator\n5. Using the SlidingPanelAnimator\n6. Animating the sliding panels\n7. Managing app theme state changes: an overview\n8. Implementing the AppThemeManager class with StateNotifier\n9. Creating and using the AppThemeManager providers\n10. Applying the AppThemeSettings\n11. Advanced animated theming with ImplicitlyAnimatedWidget\n\n## 9. More Explicit Animations\n\n1. Module Intro\n2. Starter Project \u0026 Walkthrough\n3. Controlling animations on the TasksGrid widget\n4. Adding an AnimatedWidget subclass to scale widgets\n5. Staggered animations\n6. Adding an AddTaskItem widget\n7. Fade in/out animation with an Opacity widget\n8. Explicit animations with FadeTransition and ScaleTransition\n9. Overview: built-in transition vs implicitly animated widgets in Flutter\n10. Bugfix: disabling task completion in edit mode\n\n### TBC\n\n## Additional Resources\n\nA few official resources from the Flutter website:\n\n- [Introduction to animations | Flutter.dev](https://flutter.dev/docs/development/ui/animations)\n  - [Animations overview](https://flutter.dev/docs/development/ui/animations/overview)\n  - [Animations tutorial](https://flutter.dev/docs/development/ui/animations/tutorial)\n  - [Implicit animations](https://flutter.dev/docs/development/ui/animations/implicit-animations)\n  - [Hero animations](https://flutter.dev/docs/development/ui/animations/hero-animations)\n  - [Staggered animations](https://flutter.dev/docs/development/ui/animations/staggered-animations)\n- [Animation and motion widgets | Flutter.dev](https://flutter.dev/docs/development/ui/widgets/animation)\n\nSome additional resources from Code With Andrea:\n\n- [Flutter Animations: Interactive Page Flip Widget](https://codewithandrea.com/videos/flutter-animations-page-flip-widget-part1/)\n- [Flutter Animations: Interactive Page Flip Widget \\[Part 2\\]](https://codewithandrea.com/videos/flutter-animations-page-flip-widget-part2/)\n\nPage Flip Builder package:\n\n- [page_flip_builder | pub.dev](https://pub.dev/packages/page_flip_builder)\n\n### [License: MIT](LICENSE.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizz84%2Fflutter_animations_course_materials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbizz84%2Fflutter_animations_course_materials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizz84%2Fflutter_animations_course_materials/lists"}