How to show an Icon based on Weather Conditions. I did most of the code, need help in the concluding part

Question

I am writing an App which should be able to show an icon in the homescreen based on Weather Conditions. I am using weather package, geolocator package and OpenWeatherMap API. I am able to get latitude and longitude of the user, i am also able to get the weather condition at his position, but i am currently stuck because i can't find a proper way to change the icon based on the weather condition.

This is what i thought. The weather package when asking for weather conditions returns a String like "clear sky". Now, since i want to display the icons from Material Icons. I am using the IconData constructor.

Icon(IconData(FUNCTION-RETURNING-INT-NUMBER, fontFamily: 'MaterialIcons',)),

Where FUNCTION-RETURNING-INT-CODE is a Function that returns an int number, for example, "59097" when it's sunny. You can easily check that 59097 is the wb_sunny icon here

My idea is to write a function that, based on the weather condition, returns an int number corresponding to the apropriate icon. This should be easily implementable with a switch case.

Unfortunately i am new to OOP and async function, so i don't know how to do this. This is the code that prints the weather condition.

void checkMeteo() async {
  WeatherFactory wf = new WeatherFactory(
      "API KEY",
      language: Language.ENGLISH);
  late Position position;
  position = await determinePosition();
  Weather weatherWidget = await wf.currentWeatherByLocation(
      position.latitude, position.longitude);
  String weatherDescription = weatherWidget.weatherDescription!;
  print("Weather Description: $weatherDescription");
}

I am sure that it would be enough to replace the last print with a switch case like this:

switch (weatherDescription) {
  case 'clear sky':
    return 59097;
    break;
  case 'rain':
    // return rain icon;
    // break;
  default:
  // blabla
}

The fact is that, as stated, if i change the type of the function to int, i cannot, as flutter wants the async function to returns a Future. But even if put Future<int> as the type, the IconData constructor does not accept it because it is a Future<Int> and it only accepts an int.

Could someone help me?

Solution

You have to declare checkMeteo method as Future because it has to wait the request.

   Future<int> checkMeteo() async {
      WeatherFactory wf = new WeatherFactory("API KEY",language: Language.ENGLISH);
      late Position position;
      position = await determinePosition();
      Weather weatherWidget = await wf.currentWeatherByLocation(position.latitude,position.longitude);
      String weatherDescription = weatherWidget.weatherDescription!;
      switch (weatherDescription) {
        case 'clear sky':
           return 59097;
           break;
        case 'rain':
           // return rain icon;
           // break;
        default:
        // blabla
      }
    }

After that wait this function, then give it to IconData:

final int weatherNumber = await checkMeteo();
Icon(IconData(weatherNumber, fontFamily: 'MaterialIcons',)),

Edit 1: To use in StatefulWidget

int? weatherNumber = null;

       Future<void> checkMeteo() async {
          WeatherFactory wf = new WeatherFactory("API KEY",language: Language.ENGLISH);
          late Position position;
          position = await determinePosition();
          Weather weatherWidget = await wf.currentWeatherByLocation(position.latitude,position.longitude);
          String weatherDescription = weatherWidget.weatherDescription!;
          switch (weatherDescription) {
            case 'clear sky':
               weatherNumber = 59097;
               break;
            case 'rain':
               weatherNumber = 59098;
               // break;
            default:
            /
           }
           if(mounted) setState(() {})
       }

initState(){
   super.initState();
   checkMeteo();
}

In Widget:

weatherNumber == null 
                      ? CircularProgressIndicator()
                      : Icon(IconData(weatherNumber, fontFamily: 'MaterialIcons',)), 

Comments

[iocomxda]

Thank you for your suggestion. I am not sure where to put final int weatherNumber = await checkMeteo();. I am getting The await expression can only be used in an async function. Try marking the function body with either 'async' or 'async*'.. I am using a Stateful Widget in order to create the page.

[Hazar Belge]

I edited my answer. You may want to check out.

[iocomxda]

Hey, i never thanked you, so i would like to do it, today. Thank you very much, this made my app insane!