Building My First Flutter App: Challenges and Lessons Learned

Building my first Flutter app has been a nice experience, full of challenges, discoveries and learning moments. This post describes my journey from starting with zero mobile app development experience to launching an app to the Apple Store.

In 2022, I attended a software developer conference called Frontmania, where I was introduced to Flutter for the first time. The presenters demonstrated how Flutter enables easy app development for multiple platforms, including phones, tablets, and desktops. I was particularly interested in Flutter’s potential for developing apps on both Android and iPhone, which seemed exciting and highly practical. Seeing the hot-reload feature made me excited about how it could significantly speed up development.

Like many developers, my motivation began with a problem I wanted to solve for myself. For workouts I use a tabata timer, to have a good rhythm with rest and workout. Unfortunately, many apps are subscription based so I decided to make my own. Additionally I saw this as a perfect opportunity to learn mobile app development using Flutter after 2 years of thinking of doing. I aimed to build something functional for myself, small in scope with the end goal releasing it into the app store so I know the whole proces from start to end.

Getting Started

On November 4, 2024 I started with setting up the needed development tools and get to know Flutter and Dart. There are many good official and unofficial tutorials and guides to be found so I did not have much trouble setting everything up, and it was a nice feeling to see even a simple block on your phone in the end. The VS Code plugin makes development very easy, offering features like starting up the project with a simulator, autocomplete to quick options to wrap and unwrap components.

• setting up the environment
• cookbook

Key steps in development

Setting up routes and basic flow

One of the first tasks was implementing navigation routes to manage the user flow between different screens. Learning how Flutter handles routes helped me understand how to manage state and screen transitions. From here pages or screens can be easily added.

Updating the Design

Design was an iterative process. I began with a simple, functional interface and refined it over time, improving layout, colours, and user interactions to make the experience smoother and more appealing. I had some ideas but mostly figured it out by making something, working a few days with it and then revise.

Adding Local Storage

To persist user data, I implemented storage using SQLite. This was my first encounter with managing databases in Flutter. It was challenging, because Flutter’s strong type system proved tricky as you have to be clear with the types. Reworking the app’s core logic led to countless battles with type errors, but every problem learned me something more.

I found it hard to debug the database, so I’ve made a database route which shows the content of the database inside the app. This was not ideal, but workable, I hope there are better ways but could not find anything for the iPhone.

Adding more features

After the database and the core logic was in more features got added, like haptic feedback, statistics, landscape mode, more controls for your workout. It was fun creating these and testing it out on a real phone. I added adds which I wanted to let the user disable by paying a small one time fee, but after seeing the amount of work that is needed I wait first if people even want to buy.

Unit Testing (Better Late Than Never)

Unfortunately, unit testing came far too late in the process. Retrofitting tests after significant development was a lesson learned the hard way. Next time, testing will be integrated from the start. I wanted to focus more on learning Flutter and Dart but reworking logic made parts fail that could have been caught by tests.

Wrapping Up for Release

Creating documentation, screenshots, descriptions, a privacy policy, and support pages was a nice change from the app development, and with the help of some AI’s like ChatGPT this can be done pretty quick if you have all your data already present. For sounds, for example, I created a simple list with the sound name, author, and source, then let the AI generate additional descriptions.

Publishing to app store

Flutter has some great instructions how to release an app to the store. For the App Store of Apple it can take a while before you can start because some information needs to be processed. Here the timeline of work needed:

• December 27: Applied for a developer account.
• December 31: Received access to Store Connect.
• January 1: App was accepted, creating product page and fill in all needed data.
• January 2: Submitted the first release.
• January 6: Released version 1.0.1.
• January 6: Released version 1.0.2 (ads integration), spending over 2.5 hours navigating the update process.

The first release got approved without any feedback, so that was a pleasant surprise. After you have a developer account the process went pretty smooth and fast. Also making a follow up release (because I forgot some links in the product page) was very fast.

Future Code Improvements

After completing the first version of my app, there are still many things I would like to improve

• Android support. Currently the app is only supported for the iPhone but I would like to make a version for the Android as well to see how many changes are needed to make it work.While simulators exist, I’ve decided to postpone this until I have a physical device for thorough testing.
• Code improvements. There’s still room for optimisation, including better code sharing and separating logic from components to improve reusability.
• More tests. I introduced tests late in development, but adding more will help ensure future updates don’t break existing functionality.
• Ad Removal via Payment. It’s a lot of work to set up in-app purchases. I would have liked to explore it, but decided to wait if there are any users at all before implementing it.

Final Thoughts

Coming from a React development background, picking up Flutter felt surprisingly smooth. The reactive programming model in Flutter was conceptually similar, and the hot reload feature was a game-changer. Being able to instantly see changes reflected on both my laptop and phone made the development process highly efficient and enjoyable.

If you’re considering building your first app, my advice is to try Flutter out! And if you’re interested in the app you can download it here for free in the app store https://apps.apple.com/us/app/tabata-whip-timer/id6740058591