100 Days of Flutter

My Repository of 100 Days of Flutter Practice

Loosely follows Olexale's Flutter Roadmap

App Releases:

• Calculator

Day 01

Learnings:

Learnt how stateless and stateful widgets function Learnt how to create classes and functions, and how to pass them through as parameters

Progress/Builds:

Built a simple Quotes Application It displays quotes, and quotes can also be deleted from the list. Pretty Basic

Built a Ninja ID Card Application Displays basic information about user. Learnt layout widgets and image assets Basic State Changing procedures

References:

• The Net Ninja's Flutter Tutorial for Beginners Series
• Flutter Button Documentation
• Flutter Docs

Day 02

Learnings:

• Learnt how navigator and routes work
• Learnt how to fetch data using APIs and how to convert them into Maps
• Learnt various data types and null safety features

Progress/Builds:

Worked on World Time Clock It displays the world time for selected locations using data from the worldtimeapi

Packages used:

• http
• intl

References:

• The Net Ninja's Flutter Tutorial for Beginners Series
• Flutter Button Documentation
• Flutter Docs

Day 03

Learnings:

• Learnt how to use loaders and spinners
• Learnt how to format and show the dates
• Learnt how the stack widget works

Progress/Builds:

• Progress on World Time Clock
  • Implemented loading screen spinner.
  • Started on making the UI better

Packages used:

• http
• intl
• flutter_spinkit

References:

• The Net Ninja's Flutter Tutorial for Beginners Series
• Flutter Button Documentation
• Flutter Docs

Day 04

Learnings:

• Learnt how to use Ternary Operators
• Learnt how to use Builders
• Learnt how to pass data through screens

Progress/Builds:

• Progress on World Time Clock
  • Implemented location lists
  • Completed the Project

Packages used:

• http
• intl
• flutter_spinkit

References:

• The Net Ninja's Flutter Tutorial for Beginners Series
• Flutter Button Documentation
• Flutter Docs

Day 05

Learnings:

• Learnt how to create a firebase project
• Learnt how to Integrate flutter with firebase
• Learnt how to use the flutterfire CLI tool

Progress/Builds:

• Simple Firebase CRUD Application
  • Added Firebase firestore and read the document from collection

Packages used:

• firebase_core
• firebase_firestore

References:

• CodeX's Flutter with Firebase Series
• Flutter Docs

Day 06

Learnings:

• Learnt how to implement CRUD on Firebase Firestore
• Learnt how audio streaming systems work

Progress/Builds:

• Simple Firebase CRUD Application
  • Added functionality to add and delete documents to the collection
  • Finished the application

Packages used:

• firebase_core
• firebase_firestore

References:

• CodeX's Flutter with Firebase Series
• Flutter Docs

Day 07

Learnings:

• Learnt how to implement Firebase Auth
• Learnt the Expanded widget features
• Learnt how to use images as background using Stack
• Learnt how to use Gradient on the whole app

Progress/Builds:

• Habit Tracker
  • Started work on building a Habit Tracker
  • Built the basic Homescreen UI
  • Built habit card for Home

Packages used:

• firebase_core
• firebase_auth
• firebase_firestore
• provider
• floating_bottom_navigation_bar
• google_fonts

References:

• Flutter Docs

Day 08

Learnings:

• Learnt how to make a custom drawer
• Learnt how to effectively refactor code
• Learnt how to use Figma
• Learnt various design principles

Progress/Builds:

• Habit Tracker
  • Started work on the drawer
  • Designed the Login and Signup screens on Figma
  • Looking to do a complete UI overhaul while I still can
  • Refactoring changes

Packages used:

• firebase_core
• firebase_auth
• firebase_firestore
• provider
• floating_bottom_navigation_bar
• google_fonts

References and Resources:

• Flutter Docs
• Figma

Day 09

Learnings:

• Learnt how Navigation between pages works

Progress/Builds:

• Habit Tracker
  • Implemented Login page UI
  • Implemented Register Page UI
  • Implemented Navigation between pages
  • Refactoring changes

Packages used:

• firebase_core
• firebase_auth
• firebase_firestore
• provider
• floating_bottom_navigation_bar
• google_fonts

References and Resources:

• Flutter Docs
• Figma

Day 10

Learnings:

• Learnt how Futures and Streams work in Dart
• Started learning Provider for state management

Progress/Builds:

• Habit Tracker

  • Taking a break from it

• Clock App

  • Built a simple clock app using the Canvas API

Packages used:

• firebase_core
• firebase_auth
• firebase_firestore
• provider
• floating_bottom_navigation_bar
• google_fonts

References and Resources:

• Flutter Docs
• Figma

Day 11

Learnings:

• Learnt how Futures and Streams work in Dart
• Started learning Provider for state management

Progress/Builds:

• Habit Tracker
  • No progress

Packages used:

• firebase_core
• firebase_auth
• firebase_firestore
• provider
• floating_bottom_navigation_bar
• google_fonts

References and Resources:

• Flutter Docs
• Figma

Day 12

Learnings:

• Learnt animations in Flutter
• Learnt how to use TweenAnimationBuilder

Progress/Builds:

• Experimented with building Animations

Packages used:

References and Resources:

• Flutter Docs
• Figma

Day 13

Learnings:

Progress/Builds:

• Habitalia:
  • Worked on getting the authentication methods setup
  • Switched out Facebook login for Phone and OTP based login

Packages used:

• Pinput
• Firebase_auth

References and Resources:

• Flutter Docs
• Figma

Day 14

Learnings:

• Continued learning about custom animations and canvas
• Tried Implementing Iron Man's Arc Reactor Design

Progress/Builds:

Packages used:

References and Resources:

• Flutter Docs
• Figma

Day 15

Learnings:

• Learnt animations in Flutter
• Learnt how to use TweenAnimationBuilder

Progress/Builds:

• Habitalia:
  • Continued work on the authentication methods
  • Implemented Phone based authentication
  • Started redesigning the main homescreen UI

Packages used:

• Pinput
• Firebase_auth

References and Resources:

• Flutter Docs
• Figma

Day 16

Learnings:

• Learnt using provider for theme management
• Learnt how to use TweenAnimationBuilder

Progress/Builds:

• Calculator:
  • Built a Calculator App
  • Implemented Theme Switching
  • Implemented Calculator Logic

Packages used:

• math_expressions
• provider

References and Resources:

• Flutter Docs
• Figma

Day 17

Learnings:

• Learnt using provider for theme management
• Learnt how to use TweenAnimationBuilder

Progress/Builds:

• Calculator:
  • Built a Calculator App
  • Implemented Theme Switching
  • Implemented Calculator Logic

Packages used:

• math_expressions
• provider

References and Resources:

• Flutter Docs
• Figma

Day 18

Learnings:

• Learnt using provider for theme management
• Learnt how to use TweenAnimationBuilder

Progress/Builds:

• Calculator:
  • Built a Calculator App
  • Implemented Theme Switching
  • Implemented Calculator Logic

Packages used:

• math_expressions
• provider

References and Resources:

• Flutter Docs
• Figma

Day 19

Learnings:

• Learnt how to implement phone based authentication using Firebase Auth
• Learnt how reCaptcha and SHA fingerprints work

Uvento Progress:

• Implemented Phone number auth
• Designed User data model
• Designed basic onboarding screen

Day 20

Habitalia Progress:

• Implemented Google Auth and Login
• Implemented Signout Feature
• Started designing the UI overhaul for the homepage

Losing motivation for this app 😢

Day 21

Learnings:

• Learnt how MediaQuery works
• Learnt differences between Google Authentication on the Web vs on Android/iOS

Habitalia Progress:

• Implemented Responsive UI
• Implemented Web platform support with responsive design

Day 22

Learnings:

• Learnt the guidelines for iOS appstore publishing

Habitalia Progress:

• Started designing the homepage

Day 23

Learnings:

• Learnt about FutureBuilders and Streams
• Learnt how to make data flow from one screen to another
• Learnt how to select images and upload them onto Firebase Storage

API Integration Assignment:

• Implemented Google Login
• Implemented Email Login
• Implemented User Data Input at Registration
• Implemented Image Picker and Uploading
• Implemented User and University Data models
• Implemented Data Fetching and Conversion

Things to implement:

• Offline data storage
• Webview for Universities

It's been a hectic day 😴

Day 24

Learnings:

• Learnt about SharedPreferences
• Learnt how to store data in SharedPreferences
• Learnt ways to convert and store data for your projects
• Learnt Hive Storage
• Learnt Isar Storage
• Learnt WebView

API Integration Assignment:

• Implemented SharedPreferences
• Implemented State Management Models for User Data and Universities
• Implemented offline mode for app
• Implemented WebView
• Implemented Network Image Fetching

Things to implement.... None actually The app's complete! It's been a hectic day 😴

Day 25

Learnings:

• Learnt about Carousels
• Learnt Supabase
• Learnt more about viewports
• Learnt about Scrollable PageView

New Project:

• Comic Tracker App
• Tracks your comics

Uvento Progress:

• Decided to switch over to Supabase as the database
• Built the Dashboard Homescreen
• Built the Profile Page

Day 26

Uvento Progress:

• Started integration with Supabase
• Using auth from firebase and database from supabase.. what could possibly go wrong? 😂

Day 27

Learnings:

• Learnt how to use Hive Database
• Learnt how to convert XML data into class
• Learnt how Hive Data Adapters work
• Learnt how to control flow and throw errors in async events
• Learnt how to get location data from device

Builds:

• Built an application that gets the users location
• Built converter class to convert XML data from API into usable format
• Implemented state management into the application
• Implemented Hive for Local data storage to store the data in case of no network connection

Day 28

Learnings:

• Learnt how to use SQLite DB in App
• Learnt basic SQL necessary for queries

Builds:

• Started work on a simple Task management application that uses SQlite database for storage

Day 29

Builds:

• Built the UI for the App. Created simple card based widgets for the Task list, along with the ability to check them on and off with code.

Day 30

Learnings:

• Learnt about Design Patterns in Flutter
• Learnt the Builder, Factor, Singleton and Dependency Injection Design Patterns
• Learnt the MVC, MVP and MVVM architectural models

Progress on Task Manager:

• Designed the Database structure for the application
• Decided to convert it from a simple application into a fully fledged project tracking and task management application. Let's see how this goes

Today marks 1 month of coding and learning about Flutter. Just 70 more days to go... yay.....

Day 31

Learnings:

• Learnt about creating my own factory patterns in Flutter
• Learnt about Abstract Base Classes

Progress on Task Manager:

• Implemented Task Class. Implemented functions to build the class from JSON (factory fromMap) and to export it to JSON (toMap)

Day 32

Learnings:

• Learnt about RiverPod for State Management
• Learnt about the Limitations of sqflite library and now am thinking of how to circumvent them.

Progress on Task Manager:

• Implemented Riverpod state management
• Implemented CRUD functions using sqflite

Day 33

Builds and Progress:

• Redesigned my Portfolio Website in Figma. Gonna start implementing it using Flutter Web

Day 34

Learnings:

• Learnt about Network Modes in Docker
• Learnt how to create a DockerFile
• Learnt how to use custom images in Docker Compose
• Learnt how to create a Docker Compose Stack
• Learnt base images work in Docker
• Learnt how to use PostgreSQL in my custom application
• Learnt the various terminologies of Docker

Builds and Progress:

• Dockerized my Task Management API. Created a Docker Compose file to orchestrate it using well.. Docker Compose.

Day 35

Builds/Progress:

• Added task retrieval functionality
• Created Tag View Page
• Resolved some bugs

The app is functionally complete! Another project done 😼

Day 36

Learnings:

• Learnt about the Supabase Database and Row Level Security Features

Uvento Progress:

• Integrated Supabase Database into the app
• Created Event model

Day 37

Uvento Progress:

• Created the functions required to fetch the events and turn them into widgets
• Built the Event Dashboard

Day 38

Uvento Progress:

• Created the Search Screen
• Created Notification Screen
• Created Orders Screen

Day 39

Learnings:

• Learnt about the Hero Widget and Animations

Uvento Progress:

• Created the Notification and Orders Model
• Created the Event Info Page

Day 40

Uvento Progress:

• Spent the whole damn day debugging null safety errors by trying to integrate Firebase Auth with Supabase Database
• Wrote Custom Calender Selector for Selecting the events according to dates
• Wrote functions to dynamically build notifications and orders from list
• Wrote state management stuff for events and auth

Day 41

Learnings:

• Learnt about payments gateways Razorpay, Paytm and Stripe

Uvento Progress:

• Integrated the Dashboard and Search Screen with State Management
• Integrated Calender Bar with Dashboard
• Created Genre based view for events
• Created Payment Page
• Tried Integrating Razorpay as well as Paytm, but at last ended up using Stripe

Day 42

Learnings:

• Learnt what a disaster it can be to try and integrate two services together
• Learnt about AppCheck rules and how to enable device check in Firebase

Uvento Progress:

• Added functionality to automatically update the events database and orders table whenever a payment is successful
• Added state management model for Profile
• Spent the day trying to debug authentication errors
• Debugged Profile Errors

Day 43

Learnings:

• Learnt about Splash Screens
• Learnt about how to change app icon in launcher

Uvento Progress:

• Added Finishing touches to the app
• Updated the launcher icon for the app
• Added Splash Screen for the app. Doesn't work for Android 12 tho.. (Thanks a lot google)
• Switched Auth Provider to Supabase
• Completed and Delivered the Application

With this another project comes to an end....

Day 44

Builds/Progress:

• Started a New Project
• Started working on Creating a Management Application for our Pharmacy
• Designed the basic UI of the application in Figma
• Decided on the colorscheme to be used for the app. Wanted to go for a lighter theme to match the pharmaceutical feel

Day 45

Progress on Rehnuma:

• Implemented Base Template to be used by the application
• Implemented the Theme class
• Implemented Quick Add Buttons (functionality remains yet to be implemented)
• Created custom widget for the Headers
• Implemented Medicine Class

Day 46

Progress on Rehnuma:

• Started Implementing the Database Service for the app
• Started Implementing the Authentication Service for the app
• Implemented the Login Screen

Day 47

Progress on Rehnuma:

• Implemented Medicine Fetching Functionality for Medicine Page
• Implemented Search Functionality on Medicine Page
• Did a lot of backend work on getting RLS (Row Level Security) to work in the App

Day 48

Progress on Rehnuma:

• Implemented Adding Medicine Page
• Implemented View Medicine Page

Day 49

Progress on Rehnuma:

• Implemented Adding Bill Page
• Implemented Autocomplete for Selecting Doctors and Patients

Day 50

Progress on Rehnuma:

• Worked on creating a splash screen when the app initially loads
• Worked on finishing the final design and flow for adding doctors and patients

References

• Flutter Docs
• The Net Ninja's Flutter Tutorial for Beginners Series
• Olexale's Flutter Roadmap