FlutterFirebase

Very Basic Todo application to save all your notes in one go!

Summary

  • Users can only sign in using their google account credentials
  • Once that is successful, they can see the Notes page which is initially empty
  • They can start adding notes by clicking on the ➕ button in the bottom right corner of the screen
  • Added notes would appear in the same page with date and time of its addition
  • The note box could be clicked to update the note text
  • The note box could be left swiped to dismiss and thus delete it
  • The settings button in the top right corner shows the user info screen with a sign out button
  • The sort icon button shows a popup menu to sort notes in 4 ways
    • In ascending & descending order of timestamp
    • In ascending & descending order of note text
  • A snackbar/toast appears whenever a note is added, updated, deleted or there's a firebase error
  • The user info screen has 3 icons squares placed just to fill some empty space

screens-1

Create and Save notes

Challenges

I faced a lot of hardships and difficulties while implementing the draft UI and bringing it to life in the actual app. Initially, I had to think about what all features would my application have. Once the idea was clear, I implemented all the logic and backend functionalities. Then, faced some issues thinking about how the final user interface would look like. Thus, prepared a draft design on Adobe illustrator. Finally, implementating it took a while but over time it became simpler since I had learnt the art of googling stuff.

screens-2

Profile and Signout

Learnings

  • Firebase CRUD operations for flutter
  • Designing minimal and aesthetic user interfaces
  • Discovering new flutter widgets
  • New techniques and workarounds of implementing the design mockup
  • Writing null safe dart code