How to Implement a Currency Converter in FlutterFlow

In FlutterFlow, open the API Calls panel from the left sidebar. Click the + button to create a new API call. Name it GetExchangeRates. Set the method to GET and the URL to https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/USD. In FlutterFlow Settings, add your API key as an App Constant named EXCHANGE_RATE_API_KEY and reference it in the URL: https://v6.exchangerate-api.com/v6/[EXCHANGE_RATE_API_KEY]/latest/USD. Click Test API Call — you should see a JSON response with a conversion_rates object containing ~160 currency codes and their rates relative to USD. Click the JSON path arrows next to conversion_rates to create a JSON path for the rates map. Save the API call.

Open FlutterFlow's App State panel. Create two variables: ratesJson (String, persisted — stores the raw JSON string of conversion_rates), and ratesLastFetched (DateTime, persisted — records when rates were last fetched). On the App Start action (Settings → App Start Actions), add a conditional: if ratesLastFetched is null OR if the difference between DateTime.now() and ratesLastFetched is greater than 3 hours, then call GetExchangeRates. On success, update ratesJson with the response's conversion_rates JSON string and update ratesLastFetched to DateTime.now(). This means the API is called at most once every 3 hours per device, not on every user action.

Create the converter page layout. Add a TextField at the top for the amount input. Set its keyboard type to Decimal. Store its value in a Page State variable named inputAmount (String). Below it, add a Row with two DropDown widgets side by side. Both DropDowns use a static option list of currency codes — add the most common ones: USD, EUR, GBP, JPY, CAD, AUD, CHF, CNY, INR, MXN, BRL, SGD. Store the selected values in Page State variables fromCurrency (String, default USD) and toCurrency (String, default EUR). Add a swap IconButton between the two DropDowns. On tap, swap the fromCurrency and toCurrency Page State values and trigger recalculation. Below the DropDowns, add a large Text widget that will display the converted result, bound to a Page State variable named convertedAmount (String).

Create a Custom Function named convertCurrency. It takes four arguments: ratesJson (String), fromCurrency (String), toCurrency (String), and amount (String). It returns a String. The function parses ratesJson, finds the rates for both currencies relative to USD, converts the amount from fromCurrency to USD then from USD to toCurrency, and returns a formatted result string. In FlutterFlow, wire this function to trigger whenever inputAmount, fromCurrency, or toCurrency changes: on the TextField's On Change action, call Update Page State and set convertedAmount to the result of convertCurrency. Do the same for both DropDowns' On Change actions.

1// Custom Function: convertCurrency
2// Arguments: ratesJson (String), fromCurrency (String),
3//            toCurrency (String), amount (String)
4// Return type: String
5import 'dart:convert';
6
7String convertCurrency(
8  String ratesJson,
9  String fromCurrency,
10  String toCurrency,
11  String amount,
12) {
13  if (ratesJson.isEmpty || amount.isEmpty) return '0.00';
14  final input = double.tryParse(amount);
15  if (input == null || input <= 0) return '0.00';
16
17  try {
18    final rates = Map<String, dynamic>.from(json.decode(ratesJson) as Map);
19    final fromRate = (rates[fromCurrency] as num?)?.toDouble() ?? 1.0;
20    final toRate = (rates[toCurrency] as num?)?.toDouble() ?? 1.0;
21    // Convert: amount / fromRate * toRate (both relative to USD)
22    final result = (input / fromRate) * toRate;
23    if (result >= 1000000) return result.toStringAsFixed(0);
24    if (result >= 100) return result.toStringAsFixed(2);
25    return result.toStringAsFixed(4);
26  } catch (_) {
27    return 'Error';
28  }
29}

For the historical chart, create a second API call named GetHistoricalRates using the exchangerate-api.com history endpoint: GET https://v6.exchangerate-api.com/v6/YOUR_API_KEY/history/USD/YEAR/MONTH/DAY. You will need to call this endpoint for each of the last 7 days using a loop or parallel API calls. Store the 7 data points in a Page State variable named historicalRates (List of Doubles). Create a Custom Widget named RateChart that uses the fl_chart package's LineChart. The widget accepts historicalRates (List of Doubles) and currencyPair (String) as parameters. Display the 7 data points as a line chart with date labels on the x-axis and rate values on the y-axis. Place this widget below the converter in a collapsible container.