jordyhers/open_weather_example_flutter

Flutter Weather App Example using the OpenWeatherMap API

Flutter Weather App Example

An example Flutter weather app using the OpenWeatherMap API.

Related Tutorials

• Flutter App Architecture: The Repository Pattern

Supported Features

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

App Architecture

The app is composed by two main layers.

Data Layer

The data layer contains a single weather repository 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

Presentation Layer

This layer holds all the widgets, along with their controllers.

Widgets do not communicate directly with the repository.

Instead, they watch some controllers that extend the StateNotifier class (using Riverpod).

This allows to map the data from the layer above to AsyncValue objects that can be mapped 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