Flutter Weather Forecast App

Project roadmap

1. 01

   Try the weather API

   ~1h

   Open the Open-Meteo geocoding and forecast APIs in the browser for your city, and note the fields you need (current temperature, weather code, wind, and daily highs, lows and codes). Create the Flutter project, add http and provider, and make a first request from a test to print the current temperature. Done when: the test prints the current temperature for a city.

2. 02

   Model the JSON

   ~1.5h

   Write Dart classes (City, CurrentWeather and DailyForecast) with fromJson factories, turning Open-Meteo's parallel arrays into lists of daily objects and parsing dates. Map weather codes to a description and an icon. Write unit tests with saved JSON responses. Done when: the tests turn sample responses into correct objects.

3. 03

   Build the Provider state

   ~1.5h

   Create a WeatherProvider extending ChangeNotifier with the state (loading, error message, current city, current weather and forecast) and methods to load a city's weather and change units, calling notifyListeners after each change. Put the API calls in a separate WeatherService passed to the provider, so tests can replace it. Done when: the provider loads data and exposes loading and error states.

4. 04

   Build the current weather screen

   ~1.5h

   Build the main screen with Consumer or context.watch: the city, a large temperature, the description and icon, wind and humidity, and a Celsius and Fahrenheit toggle that converts the values shown. Show a spinner while loading and an error message with Retry on failure. Done when: the screen shows the current weather and reacts to the unit toggle.

5. 05

   Add the forecast

   ~1.5h

   Add a list of the next 5 days with the weekday, icon, high and low, and a simple temperature chart (for example with the fl_chart package). Add pull-to-refresh with RefreshIndicator. Done when: the forecast list and chart show correct data, and pulling down refreshes it.

6. 06

   Add search and offline support

   ~1.5h

   Add a city search screen using the geocoding API, and remember the last chosen city and the last loaded forecast with shared_preferences. When a request fails because there's no connection, show the saved forecast with a note of when it was loaded. Done when: searching changes the city, and in airplane mode the app shows the last forecast with a note.

7. 07

   Test it

   ~1.5h

   Write unit tests for the provider with a fake service (loading, success, error and unit changes) and widget tests for the main screen's loading, error and data states. Done when: flutter test passes without internet access.

Resources

• DocsOpen-Meteo API documentation
• DocsFlutter: simple app state management (Provider)
• Docsprovider package
• DocsFlutter cookbook: fetch data from the internet
• Docsfl_chart package