🎯 실시간 환율 기반 통화 변환기 앱 개발

Dart 예제

중급 난이도
예제 타입
11/02 등록일

실시간 환율 기반 통화 변환기 앱 개발

중급
태그
실습 프로젝트 Dart Flutter 네트워크 UI 에러처리
## 프로젝트 개요
모바일 앱에서 실시간 환율 데이터를 사용해 두 개의 통화 간 금액 변환 기능을 제공하는 앱입니다. 네트워크 요청 처리, UI 업데이트, 오류 관리 등을 학습할 수 있습니다.

## 주요 기능
- 실시간 환율 데이터 가져오기
- 사용자 입력에 따른 금액 변환 계산
- 네트워크 에러 시 안내 메시지 표시
- 마지막 변환 기록 저장
- UI 상태 관리 및 반응형 디자인

## 사용 방법
1. Flutter 환경 설정 후 `main.dart` 파일에 코드 복사
2. `https://api.exchangerate-api.com` 서비스를 사용하므로 인터넷 연결 필요
3. 앱 실행 시 자동으로 USD 기준 환율 데이터를 불러옵니다.
4. 통화 선택 및 금액 입력 후 변환 결과 확인

## 확장 가능성
- 다국어 지원 추가
- 이력 기록 저장 기능 구현
- 캐시 메커니즘 도입으로 네트워크 요청 최적화
코드 예제
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() {
  runApp(CurrencyConverterApp());
}

class CurrencyConverterApp extends StatelessWidget {
  final List<String> currencies = ['USD', 'KRW', 'JPY', 'EUR'];
  final String baseCurrency = 'USD';
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '환율 변환기',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: CurrencyConverterScreen(),
    );
  }
}

class CurrencyConverterScreen extends StatefulWidget {
  @override
  _CurrencyConverterScreenState createState() => _CurrencyConverterScreenState();
}

class _CurrencyConverterScreenState extends State<CurrencyConverterScreen> {
  final TextEditingController amountController = TextEditingController();
  String? selectedFromCurrency;
  String? selectedToCurrency;
  double convertedAmount = 0.0;
  bool isLoading = false;
  
  @override
  void initState() {
    super.initState();
    _fetchExchangeRates();
  }

  Future<void> _fetchExchangeRates() async {
    setState(() => isLoading = true);
    try {
      final response = await http.get(Uri.parse('https://api.exchangerate-api.com/v4/latest/$baseCurrency'));
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        // 환율 데이터 처리 로직
        setState(() => convertedAmount = data['rates'][selectedToCurrency!]/data['rates'][selectedFromCurrency!] * double.parse(amountController.text));
      } else {
        throw Exception('환율 데이터 불가');
      }
    } catch (e) {
      print(e);
      setState(() => isLoading = false);
      showSnackBar(context, '네트워크 오류: 환율 정보를 가져올 수 없습니다');
    }
  }

  void showSnackBar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('환율 변환기')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(children: [
          Row(children: [
            DropdownButton<String>(
              value: selectedFromCurrency ?? baseCurrency,
              items: currencies.map((currency) => DropdownMenuItem(value: currency, child: Text(currency))).toList(),
              onChanged: (value) {
                setState(() => selectedFromCurrency = value);
              },
            ),
            Text(' -> ')
          ]),
          DropdownButton<String>(
            value: selectedToCurrency ?? currencies[1],
            items: currencies.map((currency) => DropdownMenuItem(value: currency, child: Text(currency))).toList(),
            onChanged: (value) {
              setState(() => selectedToCurrency = value);
            },
          ),
          SizedBox(height: 20),
          Row(children: [
            Expanded(child: TextField(controller: amountController, keyboardType: TextInputType.number, decoration: InputDecoration(labelText: '변환할 금액'))),
            ElevatedButton(
              onPressed: () {
                if (selectedFromCurrency != null && selectedToCurrency != null) _fetchExchangeRates();
              },
              child: Text('변환'),
            )
          ])
        ],)
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => selectedFromCurrency = selectedToCurrency),
        child: Icon(Icons.swap_vert),
      ),
    );
  }
}
등록일: 2025년 11월 02일 02:41
언어 정보
언어
Dart
카테고리
Mobile
인기도
#15
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요