All projects from my Flutter Animations Course

Related tags

Templates flutter
Overview

Flutter Animations Course | Code With Andrea

This repo contains all the projects from my Flutter Animations Course.

Animations course banner

The main project for this course is a Flutter habit tracking app, a (simplified) clone of the Streaks App.

Projects structure

The entire course includes four projects:

  • Colors / Numbers Game with Implicit Animations: This is located here and covered in section 1
  • Flutter Intro Playground: This is located here and covered in section 1
  • Flutter Stopwatch App: This is located here and covered in section 2
  • Flutter Habit Tracking App: This is located here 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

TBC

Additional Resources

A few official resources from the Flutter website:

Some additional resources from Code With Andrea:

Page Flip Builder package:

License: MIT

You might also like...

App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

Rotas app App que simula um fluxo de telas para o curso de navegação e rotas com

Dec 19, 2021

The app was created based on the flutter course for consuming API's

The app was created based on the flutter course for consuming API's

Consumindo API's Este app foi criado com base no curso de flutter para consumo d

Dec 24, 2021

Udemy Course "Dart and Flutter: The Complete Developer's Guide" Project. (With Hive DB)

Udemy-Course-Flutter Udemy Course "Dart and Flutter: The Complete Developer's Guide" Project. (With Hive DB) The course: https://www.udemy.com/course/

Jun 11, 2022

A simple flutter application from an Udemy course to exchange the following currencies: real, dollar and euro using HG Brasil API.

cambiador Conversor de moedas como Dollar, Euro e Real. Getting Started This project is a starting point for a Flutter application. A few resources to

Mar 17, 2022

School Project to complete a course,uses a python backend and a flutter frontend

hit_400_app Getting Started This project is a starting point for a Flutter application. #Run flutter packages get #Run the python main.py after instal

Dec 28, 2021

This project follows the Reso Coder course for flutter test-driven-development with clean architecture and BloC state management for a random trivia simple app.

This project follows the Reso Coder course for flutter test-driven-development with clean architecture and BloC state management for a random trivia simple app.

Jan 5, 2022

Domain-Driven Design + Firebase Flutter Course

Domain-Driven Design + Firebase Flutter Course

Domain-Driven Design + Firebase Flutter Course The whole accompanying tutorial series is available at 👉 this link 👈 . Find more tutorials on resocod

Dec 31, 2022

Receitas app - Recipe app jointly developed by Cod3r on Flutter & Dart course

Receitas app - Recipe app jointly developed by Cod3r on Flutter & Dart course

Let's cook? Aplicativo de receitas desenvolvido em conjunto a Cod3r dentro do cu

Dec 22, 2022

It is a Mobile Application built with Flutter to help Instructors reach their students with the material needed for their course (Videos, PDFs, Exams)

It is a Mobile Application built with Flutter to help Instructors reach their students with the material needed for their course (Videos, PDFs, Exams)

Droos - Flutter Mobile Appliction It is a Mobile Application built with Flutter to help Instructors reach their students with the material needed for

Oct 5, 2022
Comments
  • Bug fixes

    Bug fixes

    Habit tracker Bug Fix

    Hello @bizz84 I saw your animation course on your website and I was fascinated by the habit tracking application. I went to your repository and forked it so I could test it on my physical android. I came across some runtime bugs.

    Screenshot from 2022-01-14 07-30-43

    So I decided to create a branch to solve these bugs.

    Screenshot from 2022-01-14 07-31-22

    Screenshot from 2022-01-14 07-31-53

    The application works perfectly.

    Screenshot from 2022-01-14 07-32-54

    Screenshot from 2022-01-14 07-34-04

    I hope this solution will benefit other students who will attend your course in the future. Thank you.

    opened by edilsonmatola 1
  • Duplicate GlobalKeys detected in widget tree

    Duplicate GlobalKeys detected in widget tree

    When running the habit tracker app with Flutter 2.10, the following error is thrown when flipping the page:

    FlutterError (Duplicate GlobalKeys detected in widget tree.
    The following GlobalKeys were specified multiple times in the widget tree. This will lead to parts of the widget tree being truncated unexpectedly, because the second time a key is seen, the previous instance is moved to the new location. The keys were:
    - [LabeledGlobalKey<SlidingPanelAnimatorState>#2cd41 backSlidingPanelLeftAnimator]
      [LabeledGlobalKey<SlidingPanelAnimatorState>#a0a7a backSlidingPanelRightAnimator]
    This was determined by noticing that after widgets with the above global keys were moved out of their respective previous parents, those previous parents never updated during this frame, meaning that they either did not update at all or updated before the widgets were moved, in either case implying that they still think that they should have a child with those global keys.
    The specific parents that did not update after having one or more children forcibly removed due to GlobalKey reparenting are:
    - Positioned(left: 0.0, bottom: 6.0, width: 54.0)
      Positioned(right: 0.0, bottom: 6.0, width: 336.0)
    A GlobalKey can only be specified on one widget at a time in the widget tree.)
    

    This will happen multiple times, and will also be followed by this:

    FlutterError (Looking up a deactivated widget's ancestor is unsafe.
    At this point the state of the widget's element tree is no longer stable.
    To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method.)
    

    And this:

    FlutterError (Duplicate GlobalKeys detected in widget tree.
    The following GlobalKeys were specified multiple times in the widget tree. This will lead to parts of the widget tree being truncated unexpectedly, because the second time a key is seen, the previous instance is moved to the new location. The keys were:
    - [LabeledGlobalKey<SlidingPanelAnimatorState>#5cb20 backSlidingPanelRightAnimator]
      [LabeledGlobalKey<TasksGridState>#7e5b1]
      [LabeledGlobalKey<SlidingPanelAnimatorState>#272dd frontSlidingPanelLeftAnimator]
      [LabeledGlobalKey<SlidingPanelAnimatorState>#c106a backSlidingPanelLeftAnimator]
      [LabeledGlobalKey<SlidingPanelAnimatorState>#b9fe3 frontSlidingPanelRightAnimator]
    This was determined by noticing that after widgets with the above global keys were moved out of their respective previous parents, those previous parents never updated during this frame, meaning that they either did not update at all or updated before the widgets were moved, in either case implying that they still think that they should have a child with those global keys.
    The specific parents that did not update after having one or more children forcibly removed due to GlobalKey reparenting are:
    - Positioned(right: 0.0, bottom: 6.0, width: 336.0) (2 different affected elements had this toString representation)
      Positioned(left: 0.0, bottom: 6.0, width: 54.0) (2 different affected elements had this toString representation)
      Padding(padding: EdgeInsets(24.0, 16.0, 24.0, 16.0), dependencies: [Directionality], renderObject: RenderPadding#7e3e9 relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE DETACHED)
    A GlobalKey can only be specified on one widget at a time in the widget tree.)
    
    bug 
    opened by bizz84 0
Owner
Andrea Bizzotto
Flutter GDE ❖ Creator of codewithandrea.com ❖ YouTube: nnbd.me/yt ❖ Complete Dart Course: nnbd.me/dart
Andrea Bizzotto
Flutter course chatapp - A Flutter Course Chat App Starter

flutter_course_chat_app_starter Getting Started Firebase installations 1- Open F

Dhari 0 Jan 5, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
This repository is meant to save all the code I may write about this course.

COD3R - Aprenda Flutter & Dart e Construa APPs iOS e Android ?? Idea: This repository is meant to save all the code and projects I may write with this

Amanda Cleto 2 Mar 9, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
All of my open source flutter and dart projects, tutorials are published here.

Flutter In this repository I publish all of my open source flutter, dart projects, and tutorials. Written Tutorials Dart Programming Language for Prog

Mahmud Ahsan 143 Jan 1, 2023
An all-in-one Fllutter package for state management, reactive objects, animations, effects, timed widgets etc.

Frideos An all-in-one package for state management, streams and BLoC pattern, animations and timed widgets, effects. Contents 1. State management Gett

Francesco Mineo 188 Dec 23, 2022
Tasawq App — Flutter framework and Firebase An application that objectives to display all nearby stores of all kinds and real estate.

Tasawq App — Flutter framework and Firebase An application that objectives to display all nearby stores of all kinds and real estate. Multi-vendor, standard user login to view nearby products and stores for rating, follow-up, messaging and more

null 1 Nov 10, 2022
Find The Latest trending and upcoming movies and tv shows with MovieDB app. The app contains all info about movies and tv shows. find similar movies or shows, Browse all genres, video trailers, backdrops, logos, and posters.

MovieDB App Features. Dynamic Theming Search Functionality Onboarding-Screen Select favourite movie Home Screen Tranding movie Movies different catego

Ansh rathod 80 Dec 12, 2022
Flutter mvvm archi - Flutter Advanced Course - Clean Architecture With MVVM

flutter_mvvm_archi A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Namesh Kushantha 0 Jan 8, 2022
Introductory course to learn Dart/Flutter

Flutter Workshop About Introductory course to learn mobile development using Dart/Flutter. The course is structured to allow you to select the content

rosie 22 Dec 17, 2022