Flutter Navigator를 통한 화면전환

Navigator 기본 개념

• 스택(Stack) 구조
  • 새로운 화면을 열면 push → 스택에 쌓임
  • 뒤로 가면 pop → 스택에서 제거됨

 

[Home] → push → [Second] → push → [Third] pop → [Second] pop → [Home]

 

 

Navigator 기본 문법

1. 화면 이동 (push)

Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), );

👉 SecondPage()가 현재 화면 위로 쌓이고, 뒤로 가면 자동으로 이전 화면이 나타납니다.

 

2. 화면 닫기 (pop)

Navigator.pop(context);

👉 스택에서 현재 화면을 제거하고 이전 화면으로 돌아갑니다.

 

3. 데이터 전달하기

(1) 화면으로 값 넘기기

Navigator.push( context, MaterialPageRoute(builder: (context) => DetailPage(data: "Hello")), );

 

(2) 화면에서 값 반환하기

Navigator.pop(context, "결과 데이터");

 

(3) 호출한 곳에서 결과 받기

final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), );

print(result); // "결과 데이터"

 

4. 이름 기반 라우팅 (Named Route)

(1) MaterialApp에 라우트 등록

MaterialApp( initialRoute: '/', routes: { '/': (context) => HomePage(), '/second': (context) => SecondPage(), }, );

 

(2) 이동 & 닫기

// 이동 Navigator.pushNamed(context, '/second');

// 뒤로가기 Navigator.pop(context);

 

5. 기존 화면 교체 (pushReplacement)

현재 화면을 새로운 화면으로 교체 (뒤로 가기 시 이전 화면으로 돌아갈 수 없음).

Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => LoginPage()), );

 

6. 모든 화면 닫고 이동 (pushAndRemoveUntil)

스택에 쌓여 있는 모든 화면을 제거하고 새 화면만 남김.

Navigator.pushAndRemoveUntil( context, MaterialPageRoute

(builder: (context) => HomePage()), (route) => false, // false면 기존 스택 다 삭제 );

 

👉 로그인 후 홈 화면으로 가고, 로그인 화면으로 못 돌아가게 만들 때 자주 씀.

 

7. 여러 화면 관리 (Navigator 2.0, Router)

복잡한 네비게이션은 Navigator 2.0 / go_router / auto_route 같은 패키지를 사용합니다.

Flutter 공식 권장 방식은 go_router.

 

정리

• push → 새 화면 열기
• pop → 현재 화면 닫기
• pushReplacement → 현재 화면 교체
• pushAndRemoveUntil → 기존 화면 모두 닫고 새 화면으로 이동
• 데이터 전달/반환 가능 (await Navigator.push)
• 규모가 커지면 Named Route 또는 go_router 사용