Train_app 개인과제에 대한 트러블슈팅 및 회고

이번엔 콘솔프로그램이 아닌 앱이 구동이 되게끔 만드는게 과제였는데요

 

필수기능

1. StationList에서 출발역, 도착역 정보 받아오기
2. HomeScreen에서 출발역, 도착역 정보 받아온 후 좌석 지정
3. 좌석 지정 시 선택 된 좌석 퍼플 색상으로 변경
4. 좌석 선택 후 예매하기 버튼 누르면 좌석번호를 보여주면서 확인 또는 취소

도전기능

1. 출발역에서 이미 선택한 연은 도착역에서 나오지 않게 설정
2. 다크모드

나만의 기능

1. 전 우선 출발역과 도착역을 누르지 않고 좌석예매 버튼을 눌렀을때 다음화면으로 넘어가지않고 앱 하단에 알림창이 뜨며 출발역과 도착역을 선택 해달라고 2초동안 뜨는 것으로 세팅 했습니다.

---

전 일단 필수기능은 완성하였고 도전기능은 하지 못했어요..

그래도 나만의 기능은 프로그램 짤때 나왔으면 좋겠어서 같이 넣었어요!!

 일단!! 백문불여인건 이라고 앱이 어떻게 구동을 하는지 어떤점이 잘못됬는지 보여드릴께요!!

 

무제.mp4

18.72MB

 

음 mp4로 하니 이렇게 되는데.. 출발역과 도착역 을 선택한 후 좌석 페이지에 제가 고른 역들이 나와야 했지만

'출발역' 과 '도착역' 만 나오더라고여..

 

그래서 저는 seat_page 에 arguments 넣어 navigator 를 통해 받게 끔 수정 하였습니다

@override
  Widget build(BuildContext context) {
    // 전달받은 arguments를 Map으로 캐스팅
    final arguments = ModalRoute.of(context)?.settings.arguments as Map?;
    final startStation = arguments?['startStation'] ?? '출발역';
    final endStation = arguments?['endStation'] ?? '도착역';

 

그다음 arguments 를 어디서 넣을건지 도 넣어야겠죠?

 

원래는 이렇게 되었었는데

// 좌석 선택 버튼
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  // 출발역과 도착역이 모두 선택된 경우만 SeatPage로 이동
                  if (departureStation != null && arrivalStation != null) {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => SeatPage(
                        ),
                      ),
                    );

 

이렇게 변경을 했습니다

const SizedBox(height: 40),
            // 좌석 선택 버튼
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  // 출발역과 도착역이 모두 선택된 경우만 SeatPage로 이동
                  if (departureStation != null && arrivalStation != null) {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const SeatPage(),
                        settings: RouteSettings(
                          arguments: {
                            'startStation' : departureStation,
                            'endStation': arrivalStation,
                          },
                        ),
                      ),
                    );

설명하자면 

1. 출발역과 도착역을 선택: StationListPage 에서 선택한 값을 departureStation와 arrivalStation 변수에 저장

2. arguments 로 데이터 전달 : Navigator.push 에서 RouteSettings 의 arguments 로 선택된 역 정보를 SeatPage에 전달.

3. SeatPage 에서 데이터 수신 : ModalRoute를 사용해 전달 받은 arguments 를 읽고, 출발역과 도착역 정보를 UI에 표시.

 

이렇게 SeatPage 로 데이터를 성공적으로 전달하며 , arguments 를 통해 출발역과 도착역을 표시하게 만들었습니다.

 

잘되죠? 이렇게 이번 기초 과제는 끝이 났구여 더 열심히 정진해서 누구보다 잘하는 개발자가 되도록 노력하겠습니다!!