환율 변환기 어플 - ①

<Flutter로 껍데기 만들기>

프론트엔드 코딩을 시작한다.

 

1.어떤 게 필요할까?

1 메인화면에 필요한 ELEMENT들

 

로고
Input currency 드롭다운박스
output currency 드롭다운박스

input amount money
output amount money

 

 

2 메인화면에 필요한 계산 로직

 

변환을 원하는 두 가지 화폐의 환율이 필요하고,

이는 하나은행 API를 이용하기로 계획한다.

 

 사용자 행동 흐름:

입력 화폐 및 값 설정, 출력 화폐 설정 

 

 

---

2.어떻게 구현할까?

1. 디렉토리 구조 

 

Flutter 프로젝트에서 기능별로 코드를 분리해두면 유지보수성과 확장성이 좋아진다. 따라서, 다음과 같은 구조를 사용할 예정이다.

lib/
├── main.dart               # 앱 진입점
├── screens/                # 화면 단위로 구성되는 위젯
│   └── home_screen.dart    # 메인 환율 변환 화면
├── widgets/                # 공통 UI 컴포넌트들 (예: 커스텀 드롭다운, 텍스트박스 등)
├── models/                 # 데이터 구조 정의 (예: 환율 응답 모델)
├── services/               # API 호출 및 로직 처리 (하나은행 API 등)
└── utils/                  # 유틸 함수 모음 (숫자 포맷, 입력 검증 등)

디렉토리 구조 생성 - PowerShell 명령어

mkdir lib\screens, lib\widgets, lib\models, lib\services, lib\utils

 

 

main.dart는 lib 폴더 안에 자동으로 생성되거나 직접 만들어주면 된다.

---

이제 이 구조를 기반으로 본격적인 UI와 API 연결 작업을 시작할 수 있다.
다음 단계로는 home_screen.dart에서 필요한 위젯들을 먼저 구성해보자.

 

2.main

main 이 시작점. main void

runapp (첫위젯)이 첫 화면에서 보이는 위젯.
첫 위젯은 보통stateful widget으로 만들고
state를 따로 저장해줘야한다.

이 때 사용되는게 create state 이고 ,
여기다가 State를 저장해주면된다.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() =>
      _MyAppState(); // createState 위치 변경 및 _MyAppState 호출
}

이 때 createstate의 결과 값 또한 class로 만든다 .
그리고 이 class내부에 widgetbuild 가 있음.
그러니까 실질적으로 첫 화면에
빌드되는 위젯은 이거인 것임 .

드롭다운 박스코드와 그 사용

    **DropdownButton<String>**(
                    **value:** fromCurrency,
                   ** items**: currencies.map((String value) {
                      return DropdownMenuItem<String>(
                        value: value, // value를 value로 수정
                        child: Text(value), // e 대신 value 사용
                      );
                    }).toList(),
                    onChanged: (String? newValue) {
                      setState(() {
                        fromCurrency = newValue!; // 변경된 값 적용
                      });
                    },
                  ),

주의점: 이 때 dropdown 아래로 쭉 펼쳐지는 애들이 "items"인데,
여기에 string list를 냅다 넣으면 안되고,
여기에 필요한 형식으로 변환을 해줘야한다. 이 때 사용하는것이 "map" 명령어임.
return 값으로는 dropdownmenuitem을 보내주고, 얘를 출력할거다.
이 떄 setState를 통해 변수 할당하자!

사용자가 고른 newvalue를 fromcurrency에 할당하였다.

같은 방법으로 out currency도 구현하자.
아주 간단 !

다소 허접하지만 여기까지 했다 !