Pull to refresh

Creating a Weather Predictions App Using Flutter

Development for iOS *Development for Android *Flutter *
Sandbox
Photo by Wolfgang Hasselmann on Unsplash
Photo by Wolfgang Hasselmann on Unsplash

This article describes how to develop a real-time weather prediction app in Flutter using the Tomorrow.io Weather API. The app consists of a single screen that displays the current weather and a 4-day daily forecast for a specific location. We’re creating this prediction app on Flutter because it is an open-source UI development kit, which means it can be integrated beautifully into desktop and mobile apps across various platforms, making it scalable. 

Prerequisites

If you wish to follow along with this tutorial, you must have the following set up:

  • A free Tomorrow.io account to access their weather-related features and data

  • Any IDE that has the Flutter SDK installed (i.e., Android Studio, VSCode)

  • A basic understanding of Dart and Flutter

This tutorial was verified with Flutter v2.5.1 and Android Studio v3.5. 

So, with everything out the way, let's get started.

Getting started with Tomorrow.io

Tomorrow.io is a SaaS weather intelligence platform that provides real-time weather forecasts. It offers one of the most reliable free-to-use weather APIs. They provide an all-in-one endpoint that makes it easy to retrieve weather data by making a single call to the endpoint.

After creating an account with Tomorrow.io, we need to retrieve our apikey from the Development menu on the sidebar.  The image below shows the Development screen. 

Project Setup

Step 1: Creating a new Flutter project

Create a new Flutter project by running the following command in your terminal.

flutter create weather_app

Step 2: Installing Dependencies 

Next, we need to add the dio package as a dependency in our project. The dio package will be used for making network requests. 

Run the following command to get the newest version of the dio package in your project.

flutter pub add dio

This command automatically adds the dio package in your pubspec.yaml file.

Step 3 : Creating the Weather Model

Let's create a weather model class. The class should have instance variables, a constructor for initializing fields upon object creation, and methods for translating JSON data from the API to Dart Classes. It is recommended that we write a model class to make our code easier to read, understand, and maintain.

Create a new dart file weather_model.dart and paste the following code in it.  

import 'dart:convert';

Weather weatherFromJson(String str) => Weather.fromJson(json.decode(str));

String weatherToJson(Weather data) => json.encode(data.toJson());

class Weather {

  Weather({

    required this.data,

    required this.warnings,

  });

  Data data;

  List<Warning> warnings;

  factory Weather.fromJson(Map<String, dynamic> json) => Weather(

        data: Data.fromJson(json["data"]),

        warnings: List<Warning>.from(

            json["warnings"].map((x) => Warning.fromJson(x))),

      );

  Map<String, dynamic> toJson() => {

        "data": data.toJson(),

        "warnings": List<dynamic>.from(warnings.map((x) => x.toJson())),

      };

}

class Data {

  Data({

    required this.timelines,

  });

  List<Timeline> timelines;

  factory Data.fromJson(Map<String, dynamic> json) => Data(

        timelines: List<Timeline>.from(

            json["timelines"].map((x) => Timeline.fromJson(x))),

      );

  Map<String, dynamic> toJson() => {

        "timelines": List<dynamic>.from(timelines.map((x) => x.toJson())),

      };

}

class Timeline {

  Timeline({

    required this.timestep,

    required this.startTime,

    required this.endTime,

    required this.intervals,

  });

  String timestep;

  DateTime startTime;

  DateTime endTime;

  List<Interval> intervals;

  factory Timeline.fromJson(Map<String, dynamic> json) => Timeline(

        timestep: json["timestep"],

        startTime: DateTime.parse(json["startTime"]),

        endTime: DateTime.parse(json["endTime"]),

        intervals: List<Interval>.from(

            json["intervals"].map((x) => Interval.fromJson(x))),

      );

  Map<String, dynamic> toJson() => {

        "timestep": timestep,

        "startTime": startTime.toIso8601String(),

        "endTime": endTime.toIso8601String(),

        "intervals": List<dynamic>.from(intervals.map((x) => x.toJson())),

      };

}

class Interval {

  Interval({

    required this.startTime,

    required this.values,

  });

  DateTime startTime;

  Values values;

  factory Interval.fromJson(Map<String, dynamic> json) => Interval(

        startTime: DateTime.parse(json["startTime"]),

        values: Values.fromJson(json["values"]),

      );

  Map<String, dynamic> toJson() => {

        "startTime": startTime.toIso8601String(),

        "values": values.toJson(),

      };

}

class Values {

  Values({

    required this.windSpeed,

    required this.windDirection,

    required this.temperature,

    required this.temperatureApparent,

    required this.weatherCode,

    required this.humidity,

    required this.visibility,

    required this.dewPoint,

    required this.precipitationType,

    required this.cloudCover,

  });

  double windSpeed;

  double windDirection;

  double temperature;

  double temperatureApparent;

  int weatherCode;

  double humidity;

  double visibility;

  double dewPoint;

  int precipitationType;

  double cloudCover;

  factory Values.fromJson(Map<String, dynamic> json) => Values(

        windSpeed: json["windSpeed"].toDouble(),

        windDirection: json["windDirection"].toDouble(),

        temperature: json["temperature"].toDouble(),

        temperatureApparent: json["temperatureApparent"].toDouble(),

        weatherCode: json["weatherCode"],

        humidity: json["humidity"].toDouble(),

        visibility: json["visibility"].toDouble(),

        dewPoint: json["dewPoint"].toDouble(),

        precipitationType: json["precipitationType"],

        cloudCover: json["cloudCover"].toDouble(),

      );

  Map<String, dynamic> toJson() => {

        "windSpeed": windSpeed,

        "windDirection": windDirection,

        "temperature": temperature,

        "temperatureApparent": temperatureApparent,

        "weatherCode": weatherCode,

        "humidity": humidity,

        "visibility": visibility,

        "dewPoint": dewPoint,

        "precipitationType": precipitationType,

        "cloudCover": cloudCover,

      };

}

class Warning {

  Warning({

    required this.code,

    required this.type,

    required this.message,

  });

  int code;

  String type;

  String message;

  factory Warning.fromJson(Map<String, dynamic> json) => Warning(

        code: json["code"],

        type: json["type"],

        message: json["message"],

      );

  Map<String, dynamic> toJson() => {

        "code": code,

        "type": type,

        "message": message,

      };

}

The weather model is based on the structure of the JSON data we are to receive from the endpoint.

Step 4: Setting up the ApiClient

After creating the weather model class, we'll need to construct our ApiClient class, which will handle network calls to the API endpoint.

The code snippet below shows how we get the weather data of a specific location using the Dio package. First, we initialize the Dio package with our baseUrl. Then, we specify our query parameters apikey, location, fields, units, timesteps, startTime, and endTime.  

You can access the Tomorrow.io documentation to see a preview of the query parameters accepted by the Tomorrow API, and what data you can get from the fields attribute.

Next, we create a method called getWeather, inside which we call the GET method on the Dio object and pass in the required parameters. Then, we await the response. If successful, we parse the JSON data and return it; otherwise, we produce an error message.

import 'package:dio/dio.dart';

import 'package:tomorrow_weather/model/weather.dart';

class ApiClient {

  final Dio _dio = Dio(BaseOptions(

    baseUrl: "https://api.tomorrow.io/v4",

  ));

  //replace with your ApiKEY

  //get your key from app.tomorrow.io/development/keys

  static const String apiKey = 'YOUR_API_KEY';

  //pick a location to get the weather

  static const location = [40.758, -73.9855]; //New York

  //// list the fields you want to get from the api

  static const fields = [

    "windSpeed",

    "windDirection",

    "temperature",

    "temperatureApparent",

    "weatherCode",

    "humidity",

    "visibility",

    "dewPoint",

    "cloudCover",

    "precipitationType"

  ];

  // choose the unit system, either metric or imperial

  static const units = "imperial";

  // set the timesteps, like "current" and "1d"

  static const timesteps = ["current", "1d"];

  // configure the time frame up to view the current and 4-days weather forecast

  String startTime =

      DateTime.now().toUtc().add(const Duration(minutes: 0)).toIso8601String();

  String endTime =

      DateTime.now().toUtc().add(const Duration(days: 4)).toIso8601String();

  //method to get the weather data

  Future<Weather> getWeather() async {

    try {

      final response = await _dio.get('/timelines', queryParameters: {

        'location': location.join(','),

        'apikey': apiKey,

        'fields': fields,

        'units': units,

        'timesteps': timesteps,

        'startTime': startTime,

        'endTime': endTime

      });

      //parse the JSON data, returns the Weather data 

      return Weather.fromJson(response.data);

    } on DioError catch (e) {

      //returns the error if any

      return e.response!.data;

    }

  }

}

That concludes the ApiClient class. Next, we'll build the UI for our weather application and consume the API data.

Step 5: Consuming the API Data

We have a single screen that displays the current and 4-day forecast weather statistics. 

The code snippet below shows how we used the FutureBuilder weather widget to display the result of our getWeather method. If it contains data, it returns the weather data; else, it renders an error on the screen. If none of the aforementioned apply, we display the CircularProgressIndicator widget to indicate that our data is loading.

//...

//...

class _HomePageState extends State<HomePage> {

  final ApiClient _apiClient = ApiClient(); //initialize the ApiClient 

  

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: AppColors.backgroundColor,

      body: SafeArea(

        child: FutureBuilder<Weather>(     //<<-- FutureBuilder 

            future: _apiClient.getWeather(),

            builder: (context, snapshot) {

              //loading state

              if (snapshot.connectionState == ConnectionState.waiting) {

                return const Center(

                  child: CircularProgressIndicator(),

                );

              } else {

                //when the future is complete and there is an error, display it.

                if (snapshot.hasError) {

                  return Center(

                    child: Text(

                      'Error: ${snapshot.error}',

                      style: const TextStyle(color: Colors.red),

                    ),

                  );

                } else {

                  //when the future is complete and has no error, show the weather.

                  //get weatherCode

                  int weatherCode = snapshot

                      .data!.data.timelines[0].intervals[0].values.weatherCode;

                  //get weatherName

                  String weatherCodeName =

                      ApiClient.getWeatherCodeName(weatherCode);

                  //get weatherIcon

                  String weatherCodeIcon =

                      ApiClient.getWeatherIcon(weatherCodeName);

                  return Stack(

                    children: [

                      //...

                      Padding(

                        padding: const EdgeInsets.symmetric(

                          vertical: 15,

                          horizontal: 15.0,

                        ),

                        child: ListView(

                          shrinkWrap: true,

                          children: [

                            const Text('Current Weather',

                                style: TextStyle(

                                  color: AppColors.greyShade1,

                                  fontSize: 30.0,

                                  fontWeight: FontWeight.w700,

                                )),

                            const SizedBox(height: 30.0),

                            Image.asset(

                              weatherCodeIcon,   //weatherIcon

                              width: 150,

                              height: 150,

                            ),

                            Center(

                              child: RichText(

                                text: TextSpan(

                                  //accessing the temperature value from the snapshot

                                  text: snapshot.data!.data.timelines[0]

                                      .intervals[0].values.temperature

                                      .toStringAsFixed(0)

                                      .toString(),

                                  style: const TextStyle(

                                      fontFamily: 'Raleway',

                                      fontSize: 144,

                                      color: AppColors.greyShade1,

                                      fontWeight: FontWeight.w500),

                                  children: const [

                                    TextSpan(

                                      text: '°F',

                                      style: TextStyle(

                                        fontFamily: 'Raleway',

                                        fontSize: 48,

                                        color: AppColors.textBlueColor,

                                        fontWeight: FontWeight.w500,

                                      ),

                                    )

                                  ],

                                ),

                              ),

                            ),

//...

//...

Conclusion

In this tutorial, we've learned what Tomorrow.io is and how we can interact with its API to build a weather prediction application. The source code of the demo application is available on GitHub. We’ve done this using Flutter to enable integration into desktop and mobile applications, making it scalable for any use – private or public.

Tags:
Hubs:
Rating 0
Views 1.9K
Comments Leave a comment