Weather Snapshot App
Build a Flutter weather app: search for any city, and see its current weather (temperature, feels-like, wind and conditions with an icon) plus a compact card with the next few days' highs and lows. Data comes from the free Open-Meteo API, which needs no key, and app state is managed with Riverpod, so loading, errors and results are handled cleanly. The app remembers your favorite cities for quick access. It's a good first Flutter app that uses the internet: you'll learn calling an API with the http package, turning JSON into Dart classes, Riverpod's async providers, showing loading and error states, and saving simple data on the phone.
- Estimate
- ~8h
- Steps
- 6
- Completed by
- 0
- Proposed by
- codeseed.app
Flutter · Riverpod
Project roadmap
- 01
Plan the screens and data
~1hWrite README.md describing the screens (search with results, and the weather screen with current conditions and a 5-day forecast card) and the two API calls (Open-Meteo geocoding to find a city, and forecast for its coordinates). Create the project and add http, flutter_riverpod and shared_preferences. Done when: the app runs, and README.md describes the screens and API calls.
- 02
Model the API data
~1.5hLook at the JSON responses in the browser and write Dart classes (City, CurrentWeather and DailyForecast) with fromJson factories, handling missing fields safely. Map weather codes to a description and an icon. Write unit tests using saved JSON responses. Done when: the tests turn sample responses into correct objects.
- 03
Search for cities
~1.5hBuild a search screen with a text field that searches after the user stops typing for a moment (at least 2 characters), showing matching cities with their country and region. Use a Riverpod FutureProvider (or AsyncNotifier) for the results, showing a spinner while loading, a message for no results, and an error message with Retry. Done when: searching shows matching cities, and errors are shown clearly.
- 04
Show the weather
~1.5hWhen a city is chosen, load its weather with a provider that takes the city as a parameter (a family provider), and show the current conditions and a card with the next 5 days' highs, lows and icons. Add pull-to-refresh. Handle loading and errors the same way as the search. Done when: the weather for any searched city appears correctly.
- 05
Save favorite cities
~1hAdd a star button to save a city as a favorite, stored with shared_preferences, and show favorites on the home screen for one-tap access, with swipe to remove. Done when: favorites survive restarting the app and open their weather with one tap.
- 06
Test it
~1.5hWrite tests with a fake weather service injected through Riverpod provider overrides: the search screen's loading, results and error states, and the weather screen's display. Add unit tests for the favorites storage. Done when: flutter test passes without internet access.
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack