建立由伺服器保管 API 密鑰的 Flutter 貨幣轉換器

流動 Flutter 應用程式屬於公開用戶端，不能包含 exchangerate.dev bearer 密鑰。將密鑰放在伺服器 /api/fx 代理，讓 Flutter 請求 {from,to}，並在有型別的模型中一併儲存匯率、來源、市場時段及觀測時間。

讓伺服器保管憑證

伺服器路由接收 from 與 to，加入 Authorization: Bearer $EXCHANGERATE_API_KEY，呼叫 /v1/latest/{from}?symbols={to}，並只回傳應用程式所需欄位。將密鑰儲存在伺服器環境。應用程式透過 --dart-define=FX_PROXY_BASE_URL=… 接收代理 URL，始終不會收到上游密鑰。

GET /api/fx?from=USD&to=EUR

{"from":"USD","to":"EUR","rate":0.9245,"source":"live","market_session":"open","data_updated_at":"2026-09-29T10:00:00Z"}

加入 HTTP 相依套件

建立 Flutter 應用程式，將目前的 http 套件加入 pubspec.yaml，把完整的 Flutter 轉換器儲存為 lib/main.dart。執行 flutter run --dart-define=FX_PROXY_BASE_URL=https://your-app.example/api/fx。下載最小 Node 代理，在伺服器環境設定 EXCHANGERATE_API_KEY，使用 Node 20 或更新版本執行 node flutter-currency-converter-proxy.mjs。它監聽回送位址連接埠 8787，供本機測試。連接裝置前，應透過自有、設有身分驗證及請求限制的 HTTPS 後端提供存取。代理驗證貨幣及金額、轉送密鑰，並只回傳所需的有型別報價欄位。用戶端使用標準 Material 元件及 FxQuote 模型。Flutter 官方網絡請求教學介紹套件設定及請求方式。

顯示前驗證匯率

模型會拒絕缺失、非正數、非有限值或非數字的 rate，以及缺失的 data_updated_at，避免 HTML 錯誤頁、代理問題或空 JSON 進入換算結果。用戶端亦設定十秒請求逾時，並顯示非 2xx 狀態。

class FxQuote {
  final String from;
  final String to;
  final double rate;
  final String source;
  final String marketSession;
  final DateTime dataUpdatedAt;
}

顯示載入、錯誤及數據時間

請求期間，畫面會停用按鈕並顯示進度；代理失敗時顯示可讀錯誤。成功後顯示金額、匯率、來源、市場時段、觀測時間、應用程式快取時間（自裝置取得回應以來的時間），以及觀測資料已過時間（自 data_updated_at 起計）。使用者可以分辨數據是交易日內的即時觀測，還是每日參考值。

只對顯示值四捨五入

範例支援的貨幣中，JPY 顯示 0 位小數，USD、EUR、GBP、IDR 顯示 2 位；匯率顯示 6 位，方便閱讀。這只是顯示層的四捨五入。保留解析後的原始數值，正式會計處理應使用十進位或定點運算；不要把二進位浮點顯示值當作結算記錄。

測試使用者操作流程

以測試代理回應執行應用程式，再測試逾時、HTTP 401/429、無效 JSON、缺失匯率及過時的 data_updated_at。Flutter 各平台的網絡設定、TLS 與代理部署仍需透過實體裝置或模擬器檢查；下載檔案是可執行的用戶端範例，並非已託管的代理服務。