An example Flutter weather app using the OpenWeatherMap API.
- Setup API key (
api_keys.default.dart) - Run the app in browser (
flutter run -d chrome) - Make search button functional (
city_search_box.dart) - Render date, icon and temperature on the weekly view (
weekly_weather.dart) - Render digit logo above search input (
weather_page.dart) - Change openWeatherMap icons to Wappu icons (
weather_icon_image.dart) - Render a DropdownButton to change the current unit (
unit_picker.dart) - Extra task: try running the app with your phone
- 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:
For more info about the project structure, read this:
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:
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.