How to Integrate FlutterFlow with a Weather API

Go to API Calls in the left panel and create a new API Group named WeatherAPI. Set the base URL to https://api.openweathermap.org/data/2.5. Add a Header: Content-Type set to application/json. Create the first API Call named GetCurrentWeather with method GET and path /weather. Add query parameters: q (String, the city name), appid (String, your API key), and units (String, set default to 'metric'). Test the call with a sample city to verify it returns temperature, weather description, and icon data in the response.

On your WeatherPage, add a TextField at the top for city search with a search IconButton. Below it, add a Container styled as a weather card with rounded corners and a subtle shadow. Inside the Container, place a Column. Add an Image widget bound to the weather icon URL: https://openweathermap.org/img/wn/{iconCode}@2x.png where iconCode comes from the API response at path weather[0].icon. Add a Text widget for the temperature from main.temp, formatted with a degree symbol. Add another Text for the description from weather[0].description. Add a Row below with humidity (main.humidity) and wind speed (wind.speed) in smaller text. On the search IconButton tap, trigger the GetCurrentWeather API call with the TextField value.

Create a Custom Action that uses the geolocator package to get the device's current latitude and longitude. The action should request location permission, get the current position, and return lat and lng as output variables. Create a second API Call in your WeatherAPI group named GetWeatherByCoords with path /weather and query parameters: lat, lon, appid, and units. On the WeatherPage, add an On Page Load action that runs the geolocation Custom Action, then calls GetWeatherByCoords with the returned coordinates, and binds the result to the weather card. Add a location IconButton that re-triggers this flow to refresh with current location.

1// Custom Action: getCurrentLocation
2import 'package:geolocator/geolocator.dart';
3
4Future<List<double>> getCurrentLocation() async {
5  LocationPermission permission = await Geolocator.checkPermission();
6  if (permission == LocationPermission.denied) {
7    permission = await Geolocator.requestPermission();
8  }
9  final position = await Geolocator.getCurrentPosition(
10    desiredAccuracy: LocationAccuracy.medium,
11  );
12  return [position.latitude, position.longitude];
13}

Add a third API Call named GetForecast with path /forecast and the same query parameters as GetCurrentWeather. This endpoint returns forecast data in 3-hour intervals for 5 days. On the WeatherPage below the current weather card, add a Text heading '5-Day Forecast'. Add a ListView set to horizontal scroll direction with a fixed height of 140. Bind it to the API response list at path list, but since the data comes in 3-hour intervals, create a Custom Function that filters the list to one entry per day (pick the noon entry for each unique date). Each child Container displays the day name, weather icon, and high/low temperatures.

Wrap the weather card in a Conditional Builder. Show a CircularProgressIndicator while the API call is in progress. If the API returns an error (city not found returns a 404 code in the JSON), display an error Container with a message like 'City not found. Please check the spelling.' Add a try-again button. For the geolocation flow, handle the case where the user denies location permission by showing a message asking them to enter a city manually. Store the last successful city in App State so the app loads cached data on relaunch before the API responds.