Building cross platform apps with Flutter

Background

After building the initial version of hdbpricer.com, I was thinking of what I could actually release as a next step.

Some of the options were

  • Feature engineering to improve the accuracy of prediction and get a better Root Mean Square Error (RMSE)
  • Improving the UX of searching latest transactions
  • CI/CD pipeline on Azure Devops for future changes and deployment
  • Improving data insights with more charts and toggling fields
  • Exposing the functionalities on multiple platforms (Mobile apps, Telegram Chatbots, etc.)

Given the nature of this app being a hobby project of mine, I threw away all forms of “product thinking” and went for the option that excites me the most. Here’s why.

I recall telling a friend of mine about a certain Robo-advisor based in Singapore, and instead of searching up the Robo-advisor on a search engine like Google, what she did was to open up the iOS app store and searched for the Robo-advisor app.

That got me thinking. The future is mobile. Why am I building my app for web browsers only? What if I could build a native mobile application that can allow people to do research on property prices in Singapore?

Choice of tool

I am a one-man team, doing this as a hobby on weekends. It does not make sense for me to build an iOS application in Swift and an Android app in Java. That brings me to two popular options.

React Native vs Flutter

I read through multiple blogposts such as this comparison between the two frameworks.

Some of my considerations are as follows

Factors I consideredElaboration
Ease of learningI do not have a lot of experience as a React dev, so both options are equal
Ease of developmentFlutter has more out of box components and Material design inbuilt
Documentation and developer communityReact Native is older and has more users, but Flutter is catching up
Use cases for my appBoth works for the components I plan to have for my app

I ended up watching a few video tutorials as well, and ended up with Flutter based on gut feel. I had a nightmare previously working on a React search filter component (cue PTSD) and I am definitely not good with design so I would prefer more out of the box features and design.

I read this on a forum too..

Person A: When do you NOT want to use Flutter?
Person B: When you are charging the client by hours

That made me decide on Flutter. Probably not the most well informed decision, but I prefer to build and discover more in the process.

Building the app

This will not be a detailed tutorial like my previous tutorials, as there is not much value I can add on outside of the impressive Flutter documentation. So I will just point you to the right tutorial and tell you more about the problems you might face while working on the tutorial.

Installing

I use a Windows machine, and went with VS Code as an IDE and downloaded Android studio for its SDK and device emulator. You may follow the official flutter installation guide.

You might see an error such as Android studio not found when you run

flutter doctor

All you need to do is to make sure flutter knows where to find Android studio by pointing the config to the directory.
Refer to this Stackoverflow solution

You might also face an issue with Android license status unknown, and for that you can refer to the simple solution here on Github

Building the app

Flutter is widget based and makes it simple for anyone starting out with the framework. Refer to this tutorial.

One thing to note is that Flutter works best when you follow a proper way of building the scaffolds and widgets. This is because if you nest widgets randomly within other widgets without thinking through, you will face a lot of possible UX issues in production. So the easiest way is to use off the shelf widgets and arrange them into Stacks / Columns / Rows as you prefer.

There are also best practices when it comes to designs, colors and managing state (data) across multiple components. It is also important to remember to do more abstraction and follow object oriented programming styles when developing the app to make the app more scalable in development.

Releasing the app

I do not have a Mac at this point in time so I will not be able to deploy to iOS. However, here is my experience with playstore.

CI/CD for Flutter is not as mature yet, however for a start, it is extremely easy to deploy your app as an app bundle to Google Playstore. The documentation is updated and you will not go wrong by following this. I did not face any errors in this step.

Important thing to note is that if you are new to mobile application deployment on playstore, you will need a Google play account that costs 25USD. You will also need to push your app as an app bundle for review. the staging process on the playstore is that you will have to start with Open testing (Alpha), Closed testing (Beta) and then finally production. It is a good way to slowly test the new features before pushing it to production.

The App

The very first version of my app is now available for download on Playstore. Feel free to check it out!

hdbpricer Android app

Conclusion

Thanks for reading my blogpost and do drop a comment if you have any specific questions you think I could help you with 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s