Flutter your way to beautiful cross-platform apps
Learning to Flutter
How I built a Covid-19 Dashboard Application in less than a week of starting Flutter
Introduction
In this article, I am going to share my experience learning and building a simple application in Flutter. What I made is a dashboard application for the Covid-19 statistics of all the countries. I started learning Flutter in a Sunday morning, and by Saturday evening, I was building the release apk on my machine.
You can look at the project on my GitHub. Any changes and suggestions are welcome and appreciated. You can also contribute to make it better.
You can download the apk from here.
What Flutter really is
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
This is what the official website for Flutter has to say about it. And that’s pretty much it. With Flutter, one can build beautiful cross-platform applications from a single codebase. This means that you don’t need to learn Swift for iOS, Java or Kotlin for Android. You can even build apps for web and desktop with Flutter but the support for web is in beta and support for Windows and Linux apps is in Alpha. You can find more about Flutter on their site here.
Flutter vs Other solutions
Flutter is relatively new compared to other technologies that are tried and tested and have been leading app development from a long time. What makes Flutter stand out from the crowd is Dart. Dart is the programming language that flutter uses.
Of course, you can say that Dart is like any other languages. But it really stands out in Flutter. It is used as both the presentation language and the procedural language in Flutter.
Which means, you can implement the UI and the logic in the same language. For example, in React Native the presentation language is something that looks like JSX and the procedural language is JavaScript.
UI as code and everything is a widget
All of the UI elements in Flutter can be expressed by code. And it is fairly easy to do so. Furthermore, almost all of the UI elements in Flutter are called widgets and we can add some more lines to our code to customize those widgets however we like. Flutter’s official YouTube channel has a series called “Widget of the Week” where you can find really good content from the creators of Flutter.
Flutter can’t really be described in a section of an article or even a whole article. If you’re interested, head over to the Flutter website and try it out on your own.
Why I learned Flutter?
My motivation of learning to build mobile applications was Machine Learning. I wanted to build apps that can detect objects in images or video streams (and I did). Flutter was the best choice for me. I started to learn Flutter and I really enjoyed it.
Building the Application
Now that I’ve introduced Flutter, so even beginners can have a sense of what we’re trying to achieve at the end, we can now go ahead and start building our application.
After I learned about using ListView builders to display the data fetched from an API, I wanted to create something and put my Flutter skills to the test.
So, I decided to make an app that can show country wise data related to Covid-19.
With this app, we wouldn’t have to constantly visit websites and search for the data. One app has it all.
Setting the stage
I started with the research for an API that I could use. There were a lot of publicly available APIs, but I was looking for a simple API whose JSON data I could parse easily. After experimenting with several APIs in Postman, I found the one I was looking for.
Click here to go to the exact URL I used or here to view the API docs in postman.
Now I could start with the Flutter project.
Designing the UI in my mind
I did not have a UI pre-designed or the colors decided beforehand. I decided to shape the UI as I go. I wanted the app to have three screens.
- When the user opens the app, they are shown a list of countries along with their flag, alphabetically ordered. There is a search bar on the top.
- After the user clicks on a country, basic details of the country is shown.
- A button labeled ‘Click for more info’ takes the user to another page with detailed info on that country.
Parsing JSON
I thought making the UI without any prior design would be tough. But I was wrong. Parsing the JSON returned by the API was the hardest. I spent so much of my time creating a custom parsing class. Then I discovered this website. You just paste the JSON response and select your language, it automatically generates a class that exposes a function you can call to parse the data. I then made some changes as per my requirement and in no time I had the perfect parser.
This could be a life saver for many of you out there. Many thanks to the devs of this site.
Instantly parse JSON in any Language. Click here.
Sending API request
The http package is the go to for sending requests to the API. I wrote a custom class to send the request and a getCovidData function that returns a Future List of the response. The list returned is already parsed by the custom class mentioned in the previous section.
Putting it all together
Now that I had the data and other pieces, I could start to put it all together to create a functional application. The JSON parsing class parsed the data and the List returned is used to display all the data in this application.
I arranged all the constants and text styles, the custom icons used inside a constants.dart file for ease of access and clean code.
The Landing Page
I used the ListView Builder widget available in Flutter to build the list of countries. The API also had a link for flags of the countries. In the leading side of the ListView, I used the image widget to show the country flags. There is an arrow that indicates that the tile is clickable and users can navigate to the next page. Global cases and death count are shown below the search bar.
The Details Page
For the details page, I decided to show Total Cases, Deaths, Recovered and the Active Cases and newly added data. I used the ListTile widget to display the data and a custom SVG icon on the leading side. I used the flutter_svg package to easily use the SVG assets.
There is a Cupertino Button labeled ‘Click for more info’ that takes you to a screen to view more details.
The more info page
For the last page, I wrapped the card widget inside a ListView widget. Inside the card widget, I used a ListTile to display the relevant data.
Conclusion
And that’s it, at least in paper, how I built this application. I did not show much code here, because I wanted to give you a feel of how to build the app rather than look at the code and scratch your head. To look at the code, you can always visit the repo here.
Flutter is a really good framework that you can use to build great cross platform apps. Me endorsing Flutter so much doesn’t mean that I am against other technologies. They have existed before Flutter and are tested and used extensively in the industry. Flutter is still young and it may take time to mature and make developers make the switch, but it won’t be long before it becomes widely used (at least in my opinion).
If you want to dive into the world of building apps, Flutter maybe a good choice for you. It is easy to learn and works cross-platform too. The hot reload feature is one of the best and saves a lot of development time.
I recommend trying out Flutter and maybe you’ll build something that can make a difference.
You can find me online on my Portfolio, GitHub and LinkedIn to know more about me and take a look at what I’ve worked.
