#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

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

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