#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:
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
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
I have added many updates to the existing app. Learn to implememnt dark mode in Flutter application and ad search compatibilities
Read TutorialIt'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...
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....
Your Go-to Guide to decide which database to choose and why....
Let's create a Clean and Materialistic UI Design for Login and see how we can implement google signin using Firebase Auth...
In this video we will learn about fetching data from the Internet. Learn to make API calls from your flutter application...