An example Flutter weather app using the OpenWeatherMap API.

• Flutter App Architecture: The Repository Pattern

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

The app is composed by three main layers.

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?

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); });

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).

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

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.