5 Features That You Asked For | COVID-19 APP

18 Apr 2020 | Saheb Singh

Hi all ,

Hope you all are fine and in best of your health

#StaySafe #StayAtHome

First of all, I would like to thank all my viewers and followers who gave so much love to our own COVID-19 Complete Tutorial Video series. If you are new to this website and haven't yet seen the video , then here is the link to the video on my Youtube channel.



I have written a blog explaining the structure. So, if you like to read the tutorials then you can read the blog here

Part 2 was uploaded soon where we added features like dark mode and real time searches.
Here you go :
 


Many viewers had some features and questions common to them, those are :

1.. API update(older api was depecated now)
2. Pull to Refresh
3. Pie Chart implementation
4. Search appBar customisation
5. Indian state wise details

Let's dig into these questions and see how we can implement all the requested features:

1.API update

The api that we used in the first part was deprecated and there was a slight change in the URL that we used, you just need to add /v2 after the base url to get our API working as before :) Forr example:

https://basUrl/v2/countries

2. Pull to Refresh 

To add pull to refresh feature in our app, we will use the RefreshIndicator() widget provided by flutter. The procedure is actually very straight forward and easy to implement, we will simply wrap or main widget with RefereshIndicator() (in our case the root widget in the body of Scaffold).The code becomes like this:


      body: RefreshIndicator(
        onRefresh: fetchData,
        child: SingleChildScrollView(
...


As you can see that this RefreshIndicator() takes a function as a value to the onRefresh parameter. So we created a new function named as fetchData and added rhe calling of other two functions in it. You can see that we had two functions responsible for fetching the data from the internet. But our refresh indicator can only take one function so we made another functon named fetchData.
 

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

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


  Future fetchData() async{
    fetchWorldWideData();
    fetchCountryData();
    print('fetchData called');
  }


3. PieChart implementation

You can always make your own custom shaped widget using the CustomPaint widget in flutter but to make things easy for you I'll be using a pre built package named as pie_chart where all the implementations are already done. To use pie_chart as a plugin head to your pubspec.yaml file and add pie_chart as a dependency and run packages get command.

Let's move onto the implementation now. Below is the code i wrote for the pie chart

  PieChart(dataMap: {
              'Confirmed':worldData['cases'].toDouble(),
              'Active':worldData['active'].toDouble(),
              'Recovered':worldData['recovered'].toDouble(),
              'Deaths':worldData['deaths'].toDouble()
            },
            colorList: [
              Colors.red,
              Colors.blue,
              Colors.green,
              Colors.grey[900]

            ],
            ),

After importing the pie_chart package you can simply use the PieChart as a widget. This PieChart takes up a Map object as a value to the parameter dataMao, pass the title and the respective values to it and see the magic happen .
 


4.Changing the search App Bar theme

When we open our search bar the appBar follows the default theme provided by Flutter. We can pass our own custom theme to the search bar by overriding the appBarTheme method of the SearchDelegate like this

  @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      primaryColor: primaryBlack,
      brightness: DynamicTheme.of(context).brightness
    );
  }


5. Indian state wise details

To get the Indian State wise details you can many APIs available on the internet .Below are some of the APIs that i found and some are suggested by my viewers on Youtube :

I guess I'll wrap up this blog now , If you have any doubts you can for sure comment on the video on youtube, To connect socially withme through other platfirms, below are the links. Hope you find this helpful 

For source code: https://github.com/singh-saheb/tgd_covid_tracker_app
Facebook link - https://www.facebook.com/thegrowingdeveloper/
Instagram Page link - https://www.instagram.com/thegrowingdeveloper/
LinkedIn Profile -https://www.linkedin.com/in/singh-saheb/

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

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

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

01 Dec 2021 | 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

01 Dec 2021 | 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

01 Dec 2021 | 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

01 Dec 2021 | Saheb Singh

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

PageView and PageController | Flutter Tutorial for Beginners

PageView and PageController | Flutter Tutorial for Beginners | Flutter

01 Dec 2021 | Saheb Singh

A complete guide on using PageView and PageController in Flutter....

© copyright 2020. All Rights Reserved.