기차역 예매 UI 헷갈렷던 기능들 모음

 

Navigator.push 비동기 흐름 + context 설명

 전체 코드 예시

onTap: () async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => StationListPage(title: '출발역'),
    ),
  );

  if (result != null) {
    setState(() {
      departureStation = result;
    });
  }
}

---

📌 기능 설명

코드 역할

onTap: () async { ... }	터치 시 비동기로 실행
Navigator.push	새로운 페이지로 이동
await	새 페이지에서 돌아올 때까지 대기
Navigator.pop	새 페이지에서 값을 반환하며 종료
context	현재 위젯의 위치/상황 정보, 화면 이동 시 필수

---

📌 비동기 호출 흐름 예시

HomePage

1. 사용자가 출발역 박스를 클릭
2. Navigator.push → StationListPage로 이동
3. StationListPage에서 역 선택 → Navigator.pop(context, '수서')
4. 그러면 await Navigator.push의 결과가 '수서'가 됨
5. if (result != null) → departureStation = '수서' 로 저장하고 UI 갱신

---

📌 context란?

• 현재 위젯이 Flutter의 위젯 트리에서 어디에 위치하는지 알려주는 객체
• 화면 전환 등에서 현재 화면 기준으로 경로를 잡기 위해 필수
• BuildContext 타입

---

📌 일반 비동기 예시와 비교

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return "데이터";
}

void main() async {
  print("요청 전");
  String data = await fetchData();
  print("받은 데이터: $data");
}

await fetchData() == await Navigator.push(...)

둘 다 Future의 결과를 기다리는 흐름이야.

---

✅ Navigator.pop 예시

Navigator.pop(context, '수서');

• 현재 페이지를 닫고
• 이전 페이지에서 await Navigator.push의 반환값을 '수서'로 줌

---

 

✅ builder: (_) => StationListPage(title: '출발역') 사용하는 이유

📌 이건 **새 화면(위젯)**을 생성하는 함수

• MaterialPageRoute는 새 페이지를 생성할 때 어떤 위젯을 띄울지 알아야 함
• 그래서 builder에 새 화면을 생성하는 함수를 넘겨주는 것

---

✅ 함수의 구조

builder: (BuildContext context) => StationListPage(title: '출발역')

• builder는 context를 인자로 받는 함수를 요구.
• 그런데 우리가 그 context를 사용하지 않을 거라 _로 이름을 생략한 것

builder: (_) => StationListPage(title: '출발역')

---

✅ 왜 builder를 써야 할까?

• Flutter는 필요할 때 위젯을 동적으로 그리기 때문
• builder에 함수를 넘겨줘야 화면 이동 시점에 위젯을 생성할 수 있음
• 만약 그냥 위젯을 바로 넘기면, Navigator가 위젯이 아닌 함수가 필요해서 오류

---

✅ 예시 비교

잘못된 예시 ❌ 올바른 예시 ✅

builder: StationListPage(title: '출발역')

builder: (_) => StationListPage(title: '출발역')

---

✅ _의 의미

• builder는 항상 context를 받지만,
  지금은 context를 사용하지 않으므로 _로 무시
• 만약 context를 써야 한다면:

builder: (context) => MyPage(context),

---

✅ 요약

• builder는 새 페이지를 생성할 함수
• (_) => 위젯 형태는 context는 안 쓰고 위젯만 반환할 때 사용
• 이 덕분에 Navigator가 화면을 그릴 때마다 필요한 위젯을 생성할

---