COVID-19 Tracker Mobile app | Overview and Explanation

11 Apr 2020 | Saheb Singh COVID-19 Tracker Mobile app | Overview and Explanation

#StaySafe #StayAtHome

Corona Virus outbreak has undoubtedly shut-down all the world , be it be the powereful USA or the med-giant Italy. COVID-19 has now become a serious concern and needs to be tackled with great patience and public co-operation. It's always better to stay aware of the cases around the globe and to be aware of the countries that are most affected by this disease.

The complete video is out on our Youtube channel
 


The main points covered in this tutorial are:

  • API used
  • methods to call the API
  • sorting the data according to the cases counts
How to fetch data from API and parse it

Read this tutorial if you are beginner to flutter to learn about fetching data from internet in Flutter before starting this tutorial

Read Tutorial


Let's see how the code is structured.

In this tutorial , we will learn how we can develop or own COVID-19 mobile application using Google's latest framework Flutter. So without wasting any time let's start.
Start by creating a new flutter project and I'll name it as tgd_corona_tracker

We will first create a column and wrap it with SingleChildScrollView() widget to make it scrollable(Column by default is not scrollable).

The code for making the first container having the quote is as follows:
 

    Container(
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      color: Colors.orange[100],
      child: Text(DataSource.quote,
              style: TextStyle(color: Colors.orange[800],
              fontWeight: FontWeight.bold,
              fontSize: 16),),
    ),


We have our main data class where we have stored the quote as well as the faqs written statically.Let's see what is inside our DataSource class in datasource.dart file.

Now comes the WorldWide panel, for this world wide panel we have created another class and passed the worldwide data from our main HomePage() class.(HomePage() is our root class )

First, let's see how the data is fetched and then we will look into the WorldWide panel structure.

Fetching data from the Corona Api:
 

  Map worldData;
  fetchWorldWideData()async{
    http.Response response = await http.get('https://corona.lmao.ninja/all');
    setState(() {
      worldData = json.decode(response.body);
    });
  }


Map worldData is now storing the data which is passed to WorldWide Panel. The reference is made just after the quote Container like this:
 

worldData==null?CircularProgressIndicator():WorldwidePanel(worldData: worldData,),


WorldWidePanel() structure is as follows-- :
 

import 'package:flutter/material.dart';

class WorldwidePanel extends StatelessWidget {
  final Map worldData;

  const WorldwidePanel({Key key, this.worldData}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Container(
      child: GridView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,childAspectRatio: 2),
        children: <Widget>[
          StatusPanel(
            title: 'CONFIRMED',
            panelColor: Colors.red[100],
            textColor: Colors.red,
            count: worldData['cases'].toString(),
          ),
          StatusPanel(
            title: 'ACTIVE',
            panelColor: Colors.blue[100],
            textColor: Colors.blue[900],
            count: worldData['active'].toString(),
          ),
          StatusPanel(
            title: 'RECOVERED',
            panelColor: Colors.green[100],
            textColor: Colors.green,
            count: worldData['recovered'].toString(),
          ),
          StatusPanel(
            title: 'DEATHS',
            panelColor: Colors.grey[400],
            textColor: Colors.grey[900],
            count: worldData['deaths'].toString(),
          ),

        ],
      ),
    );
  }
}
class StatusPanel extends StatelessWidget {

  final Color panelColor;
  final Color textColor;
  final String title;
  final String count;

  const StatusPanel({Key key, this.panelColor, this.textColor, this.title, this.count}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return Container(
      margin: EdgeInsets.all(10),
      height: 80,width: width/2,
      color: panelColor,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
                Text(title,
                style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 16,
                color: textColor),
                ),
               Text(count,
               style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: textColor),)],
      ),
    );
  }
}


Similarly for the most affected countries , I have created another function as follows:

  List countryData;
  fetchCountryData()async{
    http.Response response = await http.get('https://corona.lmao.ninja/countries');
    setState(() {
      countryData = json.decode(response.body);
    });
  }

countryData will now have the most affected countries data in descending order, we will bw displaying only the top five affected countries. Let's have a look at the structure MostAffectedCountries panel.
 

class MostAffectedPanel extends StatelessWidget {

  final List countryData;

  const MostAffectedPanel({Key key, this.countryData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (context,index){
        return Container(
          margin: EdgeInsets.symmetric(horizontal: 10,vertical: 10),
          child: Row(
            children: <Widget>[
              Image.network(countryData[index]['countryInfo']['flag'],height: 25,),
              SizedBox(width: 10,),
              Text(countryData[index]['country'],style: TextStyle(fontWeight: FontWeight.bold),),
              SizedBox(width: 10,),
              Text('Deaths:' + countryData[index]['deaths'].toString(),
              style: TextStyle(color:  Colors.red,fontWeight: FontWeight.bold),)
            ],
          ),
        );
      },
      itemCount: 5,),
    );
  }
}


For the sake of the length of this blog , I have uploaded the entire code structure on my Githib repo  :

tgd_corona_tracker source code

The same API (corona.lmao.ninja/countries) was used in the Countryy wise stats page to get the country details.
Watch the video for a more detailed explanation

Update to the COVID-19 App

I have added many updates to the existing app. Learn to implememnt dark mode in Flutter application and ad search compatibilities

Read Tutorial
the growing developer
Hi, my name is Saheb Singh , I am a A Software Engineer by Profession. I love to spread the knowledge I gain.I make tutorial videos on Youtube and write blogs for the same.

More blogs related to Flutter

Understanding Bloc in Flutter | The Easiest Guide

Understanding Bloc in Flutter | The Easiest Guide | Flutter

13 Oct 2024 | Saheb Singh

It's been over 2 years since Bloc was mentioned with respect to State Management in Flutter. While it is now widely used in some of the biggest applic...

How to create models in Flutter | Dart? A Beginners Guide

How to create models in Flutter | Dart? A Beginners Guide | Flutter

13 Oct 2024 | Saheb Singh

Models are the core of the data flow in any of the MVC architecture. Learn how to make models in Flutter/Dart in a professional way....

Realtime Database vs Cloud Firestore - Which database to choose ?

Realtime Database vs Cloud Firestore - Which database to choose ? | Flutter

13 Oct 2024 | Saheb Singh

Your Go-to Guide to decide which database to choose and why....

Flutter Tutorial - How to build Beautiful Login Screen with Google Sign - Part I

Flutter Tutorial - How to build Beautiful Login Screen with Google Sign - Part I | Flutter

13 Oct 2024 | Saheb Singh

Let's create a Clean and Materialistic UI Design for Login and see how we can implement google signin using Firebase Auth...

How to fetch data from Internet | Flutter API Integration

How to fetch data from Internet | Flutter API Integration | Flutter

13 Oct 2024 | Saheb Singh

In this video we will learn about fetching data from the Internet. Learn to make API calls from your flutter application...

© copyright 2020. All Rights Reserved.