A journey of creating first flutter appApril 19, 2020
Flutter a go.
And, to be honest the journey so far went really well.
@PublicisSapientto 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.
Summary of the cases:
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.
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.
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.
Last but not the list, here is the link to
apk file if you have android and want to give it a try.
As mentioned above, there will be issues but it is always better to have something instead of having nothing.
I will be exploring
MobX for flutter and React both as and when time permits.
For now, Stay home, Stay safe.