Currency Watchlist UI

Project roadmap

1. 01

   Choose the API and plan the app

   ~1h

   Pick a free exchange rate API that needs no key, for example Frankfurter (based on European Central Bank rates). Write README.md describing the screens (the watchlist, and adding a currency) and the data: the base currency, the watched currencies, and each rate with its date. Create the project with flutter create and add flutter_riverpod, http and drift. Done when: the app runs, and README.md describes the API and screens.

2. 02

   Load rates from the API

   ~1.5h

   Write a RatesApi class that loads the latest rates for a base currency with the http package and turns the JSON into a Dart class with the date and a map of rates. Throw clear errors for network problems and bad responses. Load the list of available currencies for the picker too. Done when: a test or a debug print shows the rates for EUR.

3. 03

   Store the watchlist and rates with Drift

   ~2h

   Create a Drift database with two tables: watched currencies (code and position) and cached rates (base, code, rate and date). Add methods to add and remove watched currencies, and to save and read rates. Done when: watched currencies and cached rates are still there after restarting the app.

4. 04

   Build the watchlist with Riverpod

   ~2h

   Create Riverpod providers for the database, the API and the watchlist state. Show the watchlist: each currency's code, name and rate, formatted to 4 decimals, with the rates date at the top. Add a screen to pick a currency to add (hiding ones already added), swipe to remove, and pull-to-refresh. Done when: adding, removing and refreshing currencies works.

5. 05

   Handle offline and errors

   ~1.5h

   Show a loading indicator on the first load. When refreshing fails, keep showing the cached rates with a banner such as Offline, rates from 12 March, and a Retry button. When there are no cached rates at all, show a friendly empty state. Let the user change the base currency. Done when: in airplane mode, the app shows the last known rates with the offline banner instead of an error screen.

6. 06

   Test it

   ~1.5h

   Write unit tests for parsing API responses (valid and broken) and for the database methods with an in-memory Drift database, and a widget test showing the watchlist with a fake API that fails, checking the offline banner. Done when: flutter test passes.

Resources

• DocsFlutter: get started
• DocsRiverpod documentation
• DocsDrift documentation
• DocsFrankfurter exchange rate API
• DocsFlutter cookbook: fetch data from the internet