Building WWIW: A Flutter Journey with OpenAI’s ChatGPT

Introduction

Over the past three weeks, I’ve had the pleasure of assisting in the creation of an exciting Flutter app called “WWIW — What Was I Wearing?”. The app is designed to help users remember what they wore on specific occasions, ensuring they never repeat an outfit at the wrong time. The journey was filled with code, bugs, fixes, and a lot of fun. Here’s a recap of our adventure.

The Beginning

Our journey began with a simple idea: an app that helps you remember what you wore. The user would take photos of their outfits, tag them with details, and associate them with specific events or people. The app would then store this information for future reference.

We started by setting up the project in Flutter, a UI toolkit by Google that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. Flutter’s hot reload feature made it a breeze to experiment, build UIs, add features, and fix bugs in milliseconds.

The Challenges

As with any development project, we faced our fair share of challenges. From handling user authentication with Firebase to managing state across the app, we had to tackle a variety of complex tasks.

One of the first challenges we faced was implementing user authentication. We decided to use Firebase Authentication with phone number verification. This involved sending a verification code to the user’s phone number and verifying it in the app. It was a bit tricky to get right, but with some debugging and tweaking, we managed to get it working smoothly.

Another significant challenge was managing the state of the app. We needed a way to manage the user’s outfits and the camera state across different screens. For this, we implemented a state management solution using Flutter’s Provider package. This allowed us to manage and access the state from anywhere in the app.

The Bugs

Of course, no development journey is complete without encountering a few bugs. We had our fair share of them, from minor UI glitches to more complex issues related to the camera functionality.

One of the most memorable bugs was related to the CameraPreview widget. We wanted the camera preview to fill the entire screen without distorting the image. However, on some devices, the preview image was stretched. After some investigation and a few attempts, we managed to fix this by using a combination of ClipRect, Transform.scale, and AspectRatio widgets.

Another interesting bug was related to Firebase. We encountered an error stating “A maximum of 1 ‘ARRAY_CONTAINS’ filter is allowed per disjunction.” This was a limitation of Firebase, and we had to adjust our data querying strategy to overcome it.

The Translations

One of the most exciting parts of the project was translating the app into multiple languages. We started with English and then translated the app into Dutch, German, French, Spanish, Italian, and UK English. This involved translating all the strings in the app and ensuring they fit the context and tone of the app. It was a fun exercise in localization and made the app accessible to a wider audience.

The Conclusion

Building WWIW was a fantastic journey. We faced challenges, squashed bugs, and learned a lot along the way. The app turned out to be a great tool for users to remember their outfits and avoid fashion faux pas.

Working with Flutter and Firebase was a pleasure, and the hot reload feature of Flutter made the development process smooth and enjoyable. The project also highlighted the power of AI (yours truly, ChatGPT) in assisting with app development, from solving complex issues to translating the app into multiple languages.

In the end, we built an app that we’re proud of, and we had a lot of fun doing it. Here’s to more coding adventures in the future!

This post was written by ChatGPT, an AI developed by OpenAI. It was trained on a diverse range of internet text, but it doesn’t know anything about the specific documents or sources that were used in its training. It generates responses to prompts and assists in tasks like writing emails, answering questions, creating written content, and more.