Flutter Chat App with Firebase

In an effort to jump into app development, I started taking a Flutter course to learn about general concepts in app development with object oriented programming. Originally, I did not plan on completing the full course because I only wanted some information on back-end development. However, I quickly found out that Flutter made it extremely simple to design user interfaces and after working through a small part of the course, I realized that it would be extremely useful to learn a little bit of UI development, especially if I wanted a career in app development. I ended up choosing to finish the course and use the culmination of my skills to build a basic chat app with Flutter and Firebase to display my learning outcomes.

After learning how to build a basic app that showed blank screens, I learned how the Flutter framework comes with basic objects and designs via the material.io package. Using these, I was able to build to design a basic app that displayed my name, email, and phone number along with a headshot, similar to a business card. I, then was introduced to the concept of state, which lead to a simple dice rolling app. Although this seems fairly simple, this was the first app that required the use of state and multiple classes and files, due to the complexity of having to reload an app every single time you change data on the screen.

Only after this did I jump into more complex coding projects. The first of the more advanced projects involved building my first sound based app. This was a basic rainbow colored xylophone that played sounds every time you tapped one of the colors. Although it was still relatively simple in hindsight, this was the first time I really struggled with writing code because it took a long time for me to understand how state worked. In the end, my final takeaway was that objects only required state if they were to be displayed on the screen, and that updating state was just a matter of displaying updates to the screen.

After this, I spent some time away from the course, learning how to copy UIs and change even the most specific aspects of objects, especially those that were most commonly used in the previously developed material.io packages. This involved making clones of previously existing apps, and taking examples from the course and trying to fill them out myself. The Flutter course that I took also involved some concepts on UI design, where I got my first chance to properly apply my knowledge about state. This later became fundamental for creating animations between pages so I'm glad I was able to spend a lot of time on this earlier.

Finally, as the last major parts of Flutter, I learned how to code the navigation between different screens and how to display live data. This involved creating a basic BMI calculator and then a weather app. This succession was especially helpful as I was able to apply my knowledge of screen navigation from the BMI calculator to the weather app and gain extra practice there. It also helped that I had some previous experience with the OpenWeatherMap API while I was learning Python, because this was also the API that my course happened to use. However, I encountered quite a few errors while developing the weather app due to some version incompatibilities with my version of flutter and some of the dependencies that I used, which led me to eventually drop it after almost three weeks of late night debugging.

Although I didn't have much to show for the weather app, I was able to spend a lot of time working on my final app, which involved working with something that I was originally dreading. I had tried "playing around" with Firebase before, and while the concept of Cloud Firestore made a lot of sense, I had struggled to integrate it properly into anything. The authentication process seemed even more difficult, although I had not previously looked into it before. Being crunched for time (we only had about 2-3 weeks left) especially didn't help! Eventually, I was able to understand how my course introduced it, however, when I started getting into implementation, I quickly realized that the course material involved an older version of both Flutter and the FirebaseAuth and Cloud Firestore packages. However, this was going to be my final project and I did not want to let it go at the last minute. I doubled down and spent a lot of time trying to understand how to convert old code into something more recent, however, after 3 days, I realized that I could revert the version of the the Firebase packages so that my old code could work. Finally, I was able to get the baseline features implemented, however, I realized while adding some style improvements that I had a bug where my chat window would not display the messages. I remembered having a similar bug before due to the text blending into the background because the colors were similar. Even after spending multiple more late nights changing text color, style, and completely redoing some of my classes, I couldn't figure out what the problem was. I eventually asked one of my friends to help, and he quickly found that I deleted the method that displayed the text. It was extremely embarrassing.

Lesson learned: don't code at night.

Honestly though, the late nights and last minute realizations were worth it. I learned a lot more about the Flutter framework and the Dart programming language than I originally expected, and having a little bit more exposure to Firebase is an added bonus that I will never decline! I think it definitely helped that I took CS 1331 and ECE 2035 at the same time, because my Individual Discovery Project was an extremely good way of actually putting to use my understanding of state, UI design, the call stack, and the basic OOP principles. I think this project has driven me more towards the Devices and Distributed Systems & Software Designs, because I truly enjoyed writing some of the code that I worked on, but it also reaffirms that I would rather not spend my whole day sitting in front of a computer and writing code. Given the chance, I would definitely do this again, and am actually considering trying to learn one language per semester as a way of expanding my technical knowledge in the Computer Science industry. For now though, I'll gladly take a small break.

Final Flash Chat App: Pictured are the registration screen and chat screen