A journey of creating first flutter app

Update: New version published for the app. Covid19Info-IN-1.1.0

First thing first, I finally decided to do something different than React development or Javascript. So, I thought to give Flutter a go.
And, to be honest the journey so far went really well.

Special mention: @PublicisSapient to help with providing Udemy license.

While following along the course, I have learnt few things in both simpler and harder way. After couple of weeks, I have completed my Flutter course and thought to give it go by creating something without referencing the tutorial.

And then this Covid19 came which shook the whole world.

While writing this blog, I am locked down in my home and I am doing Work from home for almost a month now. Things have changed in lot of ways like working, communicating etc.

Nevertheless, coming to the point. I started to think on what I should build?
While following up news and all, I came across covid19indiaorg, an open-source react app and API tool for getting the latest data on Covid19 for India. Do check their github repository. https://github.com/covid19india

So, I decided to create an app which can leverage their API to show the data.

While doing the development, I had to follow couple of blogs, searching for charts plugin or sometimes to find the usage for a particular widget. In flutter world, widget is like main building block and can also be called as component.

But, overall, the learning experience while build this app were quite good and engaging. I know that the app is not 100% complete and need to have lot of code improvements/best practices etc. But I was able to run it successfully on real device including iOS and android both.

So, here I am going to mention what features it has and the list of plugins I have used to achieve it.

Features

• Summary of the cases:
  • Confirmed
  • Active
  • Recovered
  • Deceased > With beautiful graph visualization
• Tabular state wise data
• Pull to refresh on table to update main screen data
• A page with helpful links which can be navigated to find out more information
• A page to have 15 recent alerts/new feed
• And an FAQ section

To achieve above, I have used following extra plugins:

• fl_chart: A plugin to create beautiful charts
• modal_progress_hud: A plugin to show loader for async calls
• http: To make API call
• intl: Used for formatting. Eg. Number
• url_launcher: A plugin which provides feature handle external urls opening
• time_formatter: To get natural language time format from milliseconds timestamp

There were development challenges that I faced but I would like to mention one major challenge that I had.

First challenge

While I was trying to deploy to real device, I got an error where the build was failing. Somehow either flutter or cocoapod is not able to clear the App.framework for iOS device when trying to change the device from simulator to the real device.

FIX: I had to remove the folder using rm -rf ios/Flutter/App.framework. After that, I ran flutter clean and did the build. It worked.

Though, same issue occurred while switching from real to the simulator device too.

In case, if it still doesn't work, I am happy to support.

Second challenge:

When I was changing the bundle identifier for iOS app, I thought to change these for android too. All went well but after a cleanup, when I tried to do the build, android build started failing.

FIX: It was failing because after change in bundle identifier, somehow, the trace of existing one named example remained in android/app/src/main/kotlin/com/ folder. Removing that example folder from this location fixed the issue.

So far so good and I was able to run the application on both android and iOS successfully.

There are things that need to be done and couple of them are:

• Error handling
• Code refactoring/optimization
• Adaptive UI for different devices
• And more

But, I am quite happy to achieve this also and I am sure when we learn something new and create something interesting, it is always that joyful moment and a sense of great achievement.

I'll conclude this post here with the link to github source code. Feel free to look at, fork it and submit the improvements if you want to.

https://github.com/elanandkumar/covid19info-IN

Last but not the list, here is the link to apk file if you have android and want to give it a try.

Download Covid19Info-IN App (android only)

As mentioned above, there will be issues but it is always better to have something instead of having nothing.

What next?

I will be exploring MobX for flutter and React both as and when time permits.

For now, Stay home, Stay safe.

Happy learning.