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 :

• https://api.rootnet.in/covid19-in/stats/latest
• https://api.covid19india.org/v2/state_district_wise.json

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/