## 프로젝트 개요
모바일 앱에서 실시간 환율 데이터를 사용해 두 개의 통화 간 금액 변환 기능을 제공하는 앱입니다. 네트워크 요청 처리, UI 업데이트, 오류 관리 등을 학습할 수 있습니다.
## 주요 기능
- 실시간 환율 데이터 가져오기
- 사용자 입력에 따른 금액 변환 계산
- 네트워크 에러 시 안내 메시지 표시
- 마지막 변환 기록 저장
- UI 상태 관리 및 반응형 디자인
## 사용 방법
1. Flutter 환경 설정 후 `main.dart` 파일에 코드 복사
2. `https://api.exchangerate-api.com` 서비스를 사용하므로 인터넷 연결 필요
3. 앱 실행 시 자동으로 USD 기준 환율 데이터를 불러옵니다.
4. 통화 선택 및 금액 입력 후 변환 결과 확인
## 확장 가능성
- 다국어 지원 추가
- 이력 기록 저장 기능 구현
- 캐시 메커니즘 도입으로 네트워크 요청 최적화
🎯 실시간 환율 기반 통화 변환기 앱 개발
Dart 예제
중급
난이도
예제
타입
11/02
등록일
실시간 환율 기반 통화 변환기 앱 개발
중급태그
코드 예제
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
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요