Calling the Weather API

🌦️ Using the Weather API in Flutter

Introduction and Importance

Weather apps are one of the most common beginner-friendly projects in mobile development. Learning to call APIs, decode JSON, and show data inside your Flutter UI builds the foundation for more advanced apps.

This example shows how to call the OpenWeatherMap API using Flutter + http.dart + dart:convert to get the current weather of any city.

Keywords

• Flutter
• Weather API
• OpenWeatherMap
• JSON decode
• http.dart
• API keys

Topics

What is an API?

An API (Application Programming Interface) is like a waiter in a restaurant: you request something, the waiter carries it to the kitchen, and brings the result back. Here, our “waiter” is OpenWeatherMap.

How Weather API Works

1. You register and get an API Key.
2. You call an endpoint like:
   https://api.openweathermap.org/data/2.5/weather?q=varanasi&appid=YOUR_KEY&units=metric
3. The server responds with JSON data.
4. Flutter converts this JSON into a Dart Map and extracts values (temperature, description, icon).

🌍 OpenWeatherMap

🔑 API Keys

☁️ Weather APIs Available

🌤️ Varanasi Current Weather

Uses and Spin-offs

• Build weather apps with live data.
• Learn networking in Flutter.
• Extend to forecast apps (hourly/daily).
• Practice JSON parsing & error handling.

History

APIs like OpenWeatherMap became popular as developers wanted real-time weather data without maintaining their own databases. Today, most mobile apps use similar REST APIs for services like maps, chat, or payments.

Interview Questions

1. What package is used in Flutter for API calls?

Answer: The http package.

2. In which format does OpenWeatherMap return data?

Answer: JSON.

3. Why do we need an API key?

Answer: To authenticate requests and track usage.

MCQs

1. What does JSON stand for?

Answer: JavaScript Object Notation.

2. Which Dart package decodes JSON?

Answer: dart:convert.

3. Which HTTP method do we use to fetch weather?

Answer: GET.

4. Which site provides free weather API?

Answer: OpenWeatherMap.

Assignments

1. Modify the code to fetch weather for Delhi.

2. Add error handling when city name is invalid.

3. Show weather icons using the icon code returned.

4. Display min and max temperature in your app.

5. Store the last searched city in local storage.

Future Study Links

📘 OpenWeatherMap APIs

📦 http.dart package

🔧 dart:convert docs

Code (Flutter + Dart)

▶ Show/Hide Code

import 'dart:convert' as convert;
import 'package:http/http.dart' as http;

Future getWeather(String cityname) async {
  String apikey = "4a1f8a61b74546825af1e0be106e797b";
  final url = Uri.https("api.openweathermap.org", "/data/2.5/forecast", {
    'q': cityname,
    'appid': apikey,
    'units': 'metric',
  });

  try {
    final response = await http.get(url);
    print(response.statusCode);

    final jsonResponse = convert.jsonDecode(response.body);
    Map map = jsonResponse;

    currenticon = map["list"][0]["weather"][0]["icon"].toString();
    currentcitytemp = map["list"][0]["main"]["temp"].toString();
    currentmaxtemp = map["list"][0]["main"]["temp_max"].toString();
    currentmintemp = map["list"][0]["main"]["temp_min"].toString();
    description = map["list"][0]["weather"][0]["description"].toString();
    weatherfound = true;

    return true;
  } catch (ex) {
    print(ex);
    weatherfound = false;
    currentcitytemp = "-";
    currentmaxtemp = "-";
    currentmintemp = "-";
    description = "-";
    return false;
  }
}

Pictures

Flow Diagram

Demo

Contact

📞 Contact us for software training, education or development