학습/Flutter 빠른 시작

서버 API 키로 Flutter 통화 변환기 만들기

자체 proxy를 통해 source가 있는 FX quote를 로드하고 loading, error, cache age를 표시하며 표시할 때만 반올림하는 형식이 있는 Flutter 변환기를 만듭니다.

ERexchangerate.dev·Sep 29, 2026·8분 읽기

모바일 Flutter 앱은 공개 클라이언트이므로 exchangerate.dev bearer key를 포함하면 안 됩니다. 키를 서버 측 /api/fx proxy에 두고 Flutter가 {from,to}를 요청하게 하며 rate, source, market session, 관측 시각을 타입 모델에 함께 보관합니다.

핵심 요점
다운로드 가능한 Dart 파일은 앱에서 키를 사용하지 않고 proxy를 호출합니다.
렌더링 전에 rate와 data_updated_at을 검증합니다.
loading, HTTP/format 오류, source, market session, cache age를 표시합니다.
화면은 고정 소수점을 사용하지만 반올림 전 API 값은 코드에 남습니다.
지표 환율은 추정과 표시용이며 정산은 결제 제공자가 담당합니다.

자격 증명을 서버 뒤에 두기

서버 route는 from과 to를 받고 Authorization을 추가해 /v1/latest/{from}?symbols={to}를 호출하며 필요한 필드만 반환합니다. 키는 서버 환경에 두고 앱에 전달하지 않습니다.

proxy contract · responsecopy
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 패키지를 추가한 뒤 Flutter converter를 lib/main.dart로 저장하세요. proxy를 Node 20 이상에서 서버 환경의 EXCHANGERATE_API_KEY와 함께 node flutter-currency-converter-proxy.mjs로 실행합니다. 로컬에서는 loopback 8787을 사용하고 기기 연결 전 인증 HTTPS와 요청 제한을 준비하세요. Flutter의 공식 networking 레시피도 참고하세요.

렌더링 전 quote 검증하기

rate가 없거나 양수가 아니거나 유한하지 않거나 숫자가 아니거나 data_updated_at이 없으면 거부합니다. 10초 제한과 2xx가 아닌 상태도 표시합니다.

Dart · typed response shapecopy
class FxQuote {
  final String from;
  final String to;
  final double rate;
  final String source;
  final String marketSession;
  final DateTime dataUpdatedAt;
}

loading, 오류, 신선도 표시하기

요청 중 버튼을 끄고 progress를 표시하며 성공 시 금액, 환율, source, session, 관측 시각, 앱 cache age와 관측 age를 보여줍니다.

표시용 반올림과 값 보존

지원 통화에서 JPY는 소수 0자리, USD/EUR/GBP/IDR는 2자리, 환율은 6자리로 표시합니다. 원래 숫자값을 보존하고 표시값을 정산 기록으로 쓰지 않습니다.

모바일 자격 증명은 공개됩니다
obfuscation, compile-time 상수, 비공개 저장소도 배포된 앱의 키를 비밀로 만들지 않습니다. proxy 경계는 선택 사항이 아니라 설계의 일부입니다.

고객 경로 테스트하기

테스트 proxy로 timeout, 401/429, 잘못된 JSON, rate 누락, 오래된 data_updated_at을 시험하세요. 실제 기기나 emulator에서 Flutter 네트워크, TLS, proxy 배포도 확인해야 합니다.

지표 환율만 사용
변환 추정, 표시, 분석에 사용하세요. 결제 제공자나 규제 시스템은 자체 실행 가능한 quote와 정산 기록을 보관해야 합니다.
ER
exchangerate.dev
FX 데이터를 사용하는 개발자를 위한 통합 가이드입니다.

계속 읽기

참고환율 API 빠른 시작읽기 TutorialPython으로 환율 알림 만들기읽기
더 많은 비교Fixer vs exchangerate.devOpen Exchange Rates vs exchangerate.devCurrencylayer vs exchangerate.dev
학습ECB 기준환율 설명Next.js와 TypeScript에서 환율 사용하기Python으로 USD/IDR 환율 알림 만들기
실시간 환율EUR/USDGBP/USDUSD/JPY