A simple COVID tracker app in Flutter

A few months back, when I entered the 3rd semester of engineering, I couldn’t even imagine developing mobile apps for both android and ios. Later on when I entered the Smart India Hackathon 2020, I had introduction to android app development with Java. While discussing the app UI with a senior, I heard about flutter for the first time. But I left it there.

Then the thing called ‘Coronavirus’ happened. Being in Pune which is one of the ‘COVID hotspots’, suddenly I got a lot of free time due to lockdown. So out of curiosity, I started to learn flutter in around March 2020. After completing basics and exploring widgets and packages, I gave a try to this app which keeps track of COVID-19 cases in India.

In this article, we’ll see the following things:

• Creation of User Interface
• Web scraping with dart

Here is how the app looks:

So, let’s get started. 😃

User Interface:

First let’s start with the bottom navigation bar. Flutter scaffold comes with a property ‘bottomNavigationBar’. Let’s get to the code!

But how to dynamically change display content as per this selection?

Well, best way is to create list of widgets and then set body attribute of scaffold as follows:

In this, index is an integer, initially assigned to 0. select is a function which takes index of tapped navigation bar item and assigns it to index.

And done! A dynamic bottom navigation bar is ready!

Coming back to the screenshots, on national statistics page, we can see cards to display the data. Since each card is same except some parameters, we’ll write a function of return type Widget and avoid extra code, as follows:

But how to get those exact numbers? Definitely we won’t be putting some static values there. Other approach is storing values to some back-end. But issue with that is that we’ll have to change the values in back-end manually every day. Then what is the solution to this issue? We’ll discuss in next section.

Web Scraping

This is very important section, as it is the core of this app and many other similar apps. Web scraping is basically extraction of data from a website. For this app, we’ll extract data from web portal of Government of India which keeps track of nation-wide and state-wise COVID-19 statistics. Let’s get back to the code!

First we’ll need http and html packages. http is required to make request to the website. The response to this request is contents of whole web page as an HTML markup. So we further need html package to parse the HTML markup and extract data.

To use these packages, first we need to add dependencies in ‘pubspec.yaml’ file then import them into .dart file.

After successful import, we’ll create an asynchronous function to get data.

The argument to getElementsByTagName is selector to the required value. To get the selector, open the target website. Then right-click the target value and select ‘Inspect’. On developers’ tools interface, right click the exact tag which contains the value (<strong> in this case) and select ‘Copy selector’. Paste the copied value to the getElementsByTagName as string.

Now you might imagine using same method for states’ data as well. But this imagination falls apart when we realize that India has 35 states and UTs. So we’ll follow a slightly different approach.

First we’ll create a class for states. In the class, we’ll define a factory function which will process html document and assign values according to our logic.

Remember the function getData() we used earlier? We’ll use similar function to extract and display state-wise data.

‘result’ is a list of widgets while ‘states’ is a list of IndState objects. getContainer is exactly same as getData which returns a card for the state. In the function, we access each <tr> tag in the table and pass it to fromDocument, which further accesses each <td> and assigns values. To display this data, we simply set child attribute of Column() to result.

We can see search bar on state-wise data page. Let’s quickly take a look at it. search is assigned to onSubmitted attribute of search bar TextField. It takes the string entered in the TextField as argument. We first convert it to all lowercase and search for entered name in previously created states array. The matching results are added to subresult list. Whether to use result or subresult is determined by value of isSearched flag.

And done! Your simple COVIDometer is ready!

Thanks a lot for reading. Hope you enjoyed this article and found it useful. I wish you happy fluttering.