Skip to content

bizz84/open_weather_example_flutter

Repository files navigation

Flutter Weather App Example

An example Flutter weather app using the OpenWeatherMap API.

Flutter Weather App Preview

Related Tutorials

Supported Features

  • Current weather (condition and temperature)
  • 5-day weather forecast
  • Search by city

App Architecture

The app is composed by three main layers.

Data Layer

The data layer contains a single HttpWeatherRepository that is used to fetch weather data from the OpenWeatherMap API.

The data is then parsed (using Freezed) and returned using type-safe entity classes (Weather and Forecast).

For more info about this, read this tutorial:

For more info about the project structure, read this:

Application Layer

This contains some providers that are used to fetch and cache the data from the HttpWeatherRepository.

// current city stored in the search box in the UI
final cityProvider = StateProvider<String>((ref) {
  return 'London';
});

// provider to fetch the current weather
final currentWeatherProvider =
    FutureProvider.autoDispose<WeatherData>((ref) async {
  final city = ref.watch(cityProvider);
  final weather =
      await ref.watch(weatherRepositoryProvider).getWeather(city: city);
  return WeatherData.from(weather);
});

// provider to fetch the hourly weather
final hourlyWeatherProvider =
    FutureProvider.autoDispose<ForecastData>((ref) async {
  final city = ref.watch(cityProvider);
  final forecast =
      await ref.watch(weatherRepositoryProvider).getForecast(city: city);
  return ForecastData.from(forecast);
});

Presentation Layer

This layer holds all the widgets, which fetch the data from the FutureProviders above and map the resulting AsyncValue objects to the appropriate UI states (data, loading, error).

Packages in use

About the OpenStreetMap weather API

The app shows data from the following endpoints:

Note: to use the API you'll need to register an account and obtain your own API key. This can be set via --dart-define or inside lib/src/api/api_keys.dart.