Skip to content

moudgalya1223/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.

About

Flutter Weather App Example using the OpenWeatherMap API

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 82.9%
  • HTML 7.5%
  • Ruby 6.6%
  • Swift 2.6%
  • Other 0.4%