bizz84/open_weather_example_flutter

Flutter Weather App Example

An example Flutter weather app using the OpenWeatherMap API.

Flutter Weather App Preview

Related Tutorials

• Flutter App Architecture: The Repository Pattern

Supported Features

• [x] Current weather (condition and temperature)
• [x] 5-day weather forecast
• [x] 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:

• Flutter App Architecture: The Repository Pattern

For more info about the project structure, read this:

• Flutter Project Structure: Feature-first or Layer-first?

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

• riverpod for state management
• freezed for code generation
• http for talking to the REST API
• cached_network_image for caching images
• mocktail for testing

About the OpenStreetMap weather API

The app shows data from the following endpoints:

• Current Weather Data
• Weather Fields in API Response
• 5 day weather forecast
• Weather Conditions

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.

LICENSE: MIT