Flutter OpenWeatherMap api fetch forecast - flutter

Question

So... I got this One Call Api which also includes forecast for 7 days. I managed to get display the current weather (temp, and icon) but how do I get the forecast for the next 4 days?
My API: https://api.openweathermap.org/data/2.5/onecall?lat=lat&lon=lon&exclude=minutely,hourly,alerts&cnt=4&appid={MyKey}&units=metric
My model:
class CurrentWeatherModel {
final WeatherInfo weatherInfo;
final double temp;
const CurrentWeatherModel({
required this.weatherInfo, required this.temp
});
factory CurrentWeatherModel.fromJson(json){
return CurrentWeatherModel(
weatherInfo: WeatherInfo.fromJson(json['weather'][0]),
temp: json['temp'],
);
}
}
class HourlyWeatherModel {
final double temp;
final WeatherInfo weatherInfo;
const HourlyWeatherModel(
{
required this.temp,
required this.weatherInfo
}
);
factory HourlyWeatherModel.fromJson(json){
return HourlyWeatherModel(
temp: json['temp'],
weatherInfo: WeatherInfo.fromJson(json['weather'][0])
);
}
}
class DailyWeatherInfoModel {
final TempModel dailyTemp;
final WeatherInfo weatherInfo;
final DateTime date;
final int dt;
const DailyWeatherInfoModel(
{
required this.dailyTemp,
required this.weatherInfo,
required this.date,
required this.dt,
}
);
factory DailyWeatherInfoModel.fromJson(json){
return DailyWeatherInfoModel(
dailyTemp: TempModel.fromJson(json['temp']),
dt: json['dt'],
date: DateTime.fromMillisecondsSinceEpoch(json['dt'] * 1000,
isUtc: true),
weatherInfo: WeatherInfo.fromJson(json['weather'][0]),
);
}
}
class TempModel {
final double day;
final double min;
final double max;
const TempModel(
{
required this.day,
required this.min,
required this.max
}
);
factory TempModel.fromJson(json){
return TempModel(
day: json['day'],
min: json['min'],
max: json['max']
);
}
}
class WeatherInfo {
final String? description;
final String? icon;
WeatherInfo({this.description, this.icon});
factory WeatherInfo.fromJson(Map<String, dynamic> json) {
final description = json['description'];
final icon = json['icon'];
return WeatherInfo(description: description, icon: icon);
}
}
class WeatherForecastResponse {
final CurrentWeatherModel current;
final HourlyWeatherModel hourly;
final DailyWeatherInfoModel daily;
String get iconCurrentWeatherUrl{
return 'https://merakiapp.be/wp-content/uploads/2022/04/${current.weatherInfo.icon}.png';
}
String get iconDailyWeatherUrl{
return 'https://merakiapp.be/wp-content/uploads/2022/04/${daily.weatherInfo.icon}.png';
}
const WeatherForecastResponse(
{
required this.current,
required this.daily,
required this.hourly
}
);
factory WeatherForecastResponse.fromJson(json){
return WeatherForecastResponse(
current: CurrentWeatherModel.fromJson(json['current']),
hourly: HourlyWeatherModel.fromJson(json['hourly'][0]),
daily: DailyWeatherInfoModel.fromJson(json['daily'][0])
);
}
}
My Response:
Future<WeatherForecastResponse> getForecast(double lat, double lon) async {
try {
String api = 'https://api.openweathermap.org/data/2.5/onecall';
String appId = 'MyAPIKey';
String units = 'metric';
String cnt = '4';
String url = '$api?lat=$lat&lon=$lon&cnt=$cnt&appid=$appId&units=$units';
final response = await http.get(Uri.parse(url));
final json = jsonDecode(response.body);
return WeatherForecastResponse.fromJson(json);
} catch (e) {
rethrow;
}
}
Respons object:
void _currentWeather() async {
await FirebaseFirestore.instance.collection('Users').doc(currentUser).get().then((value) => _userLocation = value.data()!['Location']);
setState(() {
lat = _userLocation.latitude;
lon = _userLocation.longitude;
});
final response = await _dataWeatherService.getForecast(lat!, lon!);
setState(() {
temp = response.current.temp.round();
weather = response.current.weatherInfo.description;
icon = response.iconCurrentWeatherUrl;
});
}
void _dailyForecast() async {
final response = await _dataWeatherService.getForecast(lat!, lon!);
setState(() {
tempDaily = response.daily.dailyTemp.day.round();
weatherDaily = response.daily.weatherInfo.description;
iconDaily = response.iconDailyWeatherUrl;
date = response.daily.date;
});
}
JSON from OneCall API:
{
"lat": 33.44,
"lon": -94.04,
"timezone": "America/Chicago",
"timezone_offset": -21600,
"current": {
"dt": 1618317040,
"sunrise": 1618282134,
"sunset": 1618333901,
"temp": 284.07,
"feels_like": 282.84,
"pressure": 1019,
"humidity": 62,
"dew_point": 277.08,
"uvi": 0.89,
"clouds": 0,
"visibility": 10000,
"wind_speed": 6,
"wind_deg": 300,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"rain": {
"1h": 0.21
}
},
"minutely": [
{
"dt": 1618317060,
"precipitation": 0.205
},
...
},
"hourly": [
{
"dt": 1618315200,
"temp": 282.58,
"feels_like": 280.4,
"pressure": 1019,
"humidity": 68,
"dew_point": 276.98,
"uvi": 1.4,
"clouds": 19,
"visibility": 306,
"wind_speed": 4.12,
"wind_deg": 296,
"wind_gust": 7.33,
"weather": [
{
"id": 801,
"main": "Clouds",
"description": "few clouds",
"icon": "02d"
}
],
"pop": 0
},
...
}
"daily": [
{
"dt": 1618308000,
"sunrise": 1618282134,
"sunset": 1618333901,
"moonrise": 1618284960,
"moonset": 1618339740,
"moon_phase": 0.04,
"temp": {
"day": 279.79,
"min": 275.09,
"max": 284.07,
"night": 275.09,
"eve": 279.21,
"morn": 278.49
},
"feels_like": {
"day": 277.59,
"night": 276.27,
"eve": 276.49,
"morn": 276.27
},
"pressure": 1020,
"humidity": 81,
"dew_point": 276.77,
"wind_speed": 3.06,
"wind_deg": 294,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"clouds": 56,
"pop": 0.2,
"rain": 0.62,
"uvi": 1.93
},
...
},
"alerts": [
{
"sender_name": "NWS Tulsa",
"event": "Heat Advisory",
"start": 1597341600,
"end": 1597366800,
"description": "...HEAT ADVISORY REMAINS IN EFFECT FROM 1 PM THIS AFTERNOON TO\n8 PM CDT THIS EVENING...\n* WHAT...Heat index values of 105 to 109 degrees expected.\n* WHERE...Creek, Okfuskee, Okmulgee, McIntosh, Pittsburg,\nLatimer, Pushmataha, and Choctaw Counties.\n* WHEN...From 1 PM to 8 PM CDT Thursday.\n* IMPACTS...The combination of hot temperatures and high\nhumidity will combine to create a dangerous situation in which\nheat illnesses are possible.",
"tags": [
"Extreme temperature value"
]
},
...
]

Answer 1

I would change your WeatherForecastResponse to have a list of DailyWeatherInfoModel vs a single model.
class WeatherForecastResponse {
final CurrentWeatherModel current;
final HourlyWeatherModel hourly;
final List<DailyWeatherInfoModel> daily;
...
}
Then you parse a full list in the fromJson constructor
factory WeatherForecastResponse.fromJson(json) {
final dailyResponse = json['daily'] as List;
final dailyForecastList = <DailyWeatherInfoModel>[];
for (final day in dailyResponse) {
dailyForecastList.add(DailyWeatherInfoModel.fromJson(day));
}
return WeatherForecastResponse(
current: CurrentWeatherModel.fromJson(json['current']),
hourly: HourlyWeatherModel.fromJson(json['hourly'][0]),
daily: dailyForecastList);
}
I would also just put the icon url in each daily/hourly model. This way you have a fully self contained list of DailyWeatherInfoModel with everything you need.
class DailyWeatherInfoModel {
final TempModel dailyTemp;
final WeatherInfo weatherInfo;
final DateTime date;
final int dt;
final String iconUrl; // adding this
const DailyWeatherInfoModel({
required this.dailyTemp,
required this.weatherInfo,
required this.date,
required this.dt,
required this.iconUrl,
});
factory DailyWeatherInfoModel.fromJson(json) {
final weatherInfo = WeatherInfo.fromJson(json['weather'][0]);
final iconUrl =
'https://merakiapp.be/wp-content/uploads/2022/04/${weatherInfo.icon}.png'; // init iconUrl here
return DailyWeatherInfoModel(
dailyTemp: TempModel.fromJson(json['temp']),
dt: json['dt'],
date: DateTime.fromMillisecondsSinceEpoch(json['dt'] * 1000, isUtc: true),
weatherInfo: weatherInfo,
iconUrl: iconUrl,
);
}
}
You can apply the same concept to the hourly forecast as well.