[Flutter] 트러블 슈팅 : 기차 예매 서비스 - 기차역 리스트를 enum class로 다뤄보기

1. 개요

Flutter로 기차 예매 서비스 앱을 만들면서 고민했던 내용에 대해 다뤘습니다.

 

 

2. 기차역 리스트를 enum class로 다뤄보기

 

기차역 리스트를 일일이 관리한다는 것이 비효율적이라 생각했습니다.

 

기차역만 담을 enum class로 분리하면 좋을 것 같다는 생각을 했습니다.

 

기차역은 한국어로 표시는 것이 요구사항이기 때문에 label을 붙여 enum 값과 함께 한글 이름도 같이 저장하였습니다.

 

enum Station {
  suseo('수서'),
  dongtan('동탄'),
  jije('평택지제'),
  cheonanAsan('천안아산'),
  osong('오송'),
  daejeon('대전'),
  gimcheonGumi('김천구미'),
  dongdaegu('동대구'),
  gyeongju('경주'),
  ulsan('울산'),
  busan('부산');

  const Station(this.label);

  final String label;
}

 

 

final filteredStations = Station.values
        .where((station) => station.label != selectedStation)
        .toList();

 

 

 

https://ctoahn.tistory.com/27

[Flutter/Dart] dart에서 열거형(enum) 의 효율적인 변환과 활용

 

 

 

3. 프로젝트 소개

1) 프로젝트 파일 구조

📦lib
 ┣ 📂data
 ┃ ┗ 📜station.dart
 ┣ 📂pages
 ┃ ┣ 📂home
 ┃ ┃ ┣ 📂widgets
 ┃ ┃ ┃ ┗ 📜station_box.dart
 ┃ ┃ ┗ 📜home_page.dart
 ┃ ┣ 📂seat
 ┃ ┃ ┣ 📂widgets
 ┃ ┃ ┃ ┣ 📜seat_box_row.dart
 ┃ ┃ ┃ ┣ 📜seat_label.dart
 ┃ ┃ ┃ ┣ 📜seat_number.dart
 ┃ ┃ ┃ ┗ 📜station_header.dart
 ┃ ┃ ┗ 📜seat_page.dart
 ┃ ┗ 📂station_list
 ┃ ┃ ┣ 📂widgets
 ┃ ┃ ┗ 📜station_list_page.dart
 ┣ 📂theme
 ┃ ┣ 📜dark.dart
 ┃ ┗ 📜light.dart
 ┗ 📜main.dart

 

 

2) 홈 화면

 

하얀색 컨테이너를 클릭하면 기차역 리스트 화면으로 이동합니다.

 

기차역 리스트 화면에서 선택한 기차역을 홈 화면에 표시하고,

출발역과 도착역이 선택되었으면 좌석 선택 버튼이 활성화 됩니다.

 

 

3) 기차역 리스트 화면

 

출발역과 도착역을 선택하는 화면입니다.

 

출발역에서 수서를 선택했다면, 도착역에서 선택할 수 있는 기차역 중 수서를 제외한 기차역 목록을 표시합니다.

 

 

4) 좌석 선택 화면

 

 

좌석을 선택할 수 있는 화면입니다.

 

좌석을 선택하면 보라색으로 표시되며, 예매하기 버튼을 클릭하면 CupertinoDialog가 표시됩니다.

확인 버튼을 누르면 다시 홈 화면으로 이동합니다.

 

 

5) GitHub

https://github.com/Meezzi/flutter-train-app

GitHub - Meezzi/flutter-train-app