Navigation 시리즈 001 - Navigator 1.0 화면 전환과 데이터 전달의 모든 것

Flutter Navigation 시리즈 시작 – 기본 구조부터 데이터 전달까지

Flutter 앱을 만들다 보면 화면 전환은 빠질 수 없는 요소입니다.
단순히 버튼을 눌러 다른 화면으로 이동하는 것 같지만,
그 뒤에는 Navigator, Route, Context 같은 복잡한 구조가 숨어 있죠.

이 시리즈에서는 Flutter의 Navigator 시스템을 차근차근 정리해봅니다.

 

먼저 Navigator 1.0의 기본 구조부터 살펴보고,
실전에서 자주 마주치는 전환 패턴까지 하나씩 풀어볼 예정이에요.

 

 

또한, 화면 전환과 밀접하게 연결된 AlertDialog도 함께 다룹니다.
Dialog 역시 Navigator를 통해 제어되기 때문에
이 타이밍에 함께 이해해두면 전체 흐름을 잡는 데 큰 도움이 됩니다.

 

 

Navigator 1.0 - 화면 전환과 데이터 전달의 모든 것

 

 

앱을 만들다 보면

반드시 마주치는 기능 중 하나가

화면 전환(Navigation)입니다.

 

 

로그인 후 메인 화면으로 이동하거나,

목록에서 상세 페이지로 넘어가는

모든 과정에 `Navigator` 가 사용되죠.

 

 

이번 글에서는 Navigator 1.0 의 기본 개념부터

실습 예제, 데이터 전달 방식까지

한 번에 정리해봅니다.

 

 

 

---

왜 알아야 할까?

• 페이지 간 전환은 거의 모든 앱에 존재합니다.
• 단순히 화면을 넘기는 것 같지만, 그 안엔 Stack, Route, Context 등 Flutter만의 구조가 숨어있습니다.
• Navigator를 이해하면 페이지 흐름 제어뿐 아니라, 데이터 흐름도 명확해집니다.

---

Flutter에서의 화면 전환 구조

Flutter는 내부적으로 Stack(스택) 구조를 사용해 화면을 관리합니다.

• Navigator.push(...) : 새로운 화면을 Stack 위에 올림
• Navigator.pop(...) :현재 화면을 Stack에서 제거하고 이전 화면으로 돌아감

즉, 후입선출(LIFO) 방식으로 화면이 전환됩니다.

---

Navigator 1.0의 대표 메서드

메서드	설명
push()	새로운 화면으로 이동
pop()	현재 화면 제거 후 이전 화면으로 복귀
pushReplacement()	현재 화면을 새로운 화면으로 대체
pushAndRemoveUntil()	조건에 맞는 이전 화면까지 모두 제거하고 새 화면으로 이동

---

예제를 통해 구조 이해하기

// 1️⃣ 기본 push 예제
Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => SecondScreen()),
);

// 2️⃣ 값을 되돌려 받는 예제
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => ResultScreen()),
);
if (result != null) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('받은 값: $result')),
  );
}

// 3️⃣ 현재 화면을 대체하는 예제
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => ReplacementScreen()),
);

// 4️⃣ 모든 이전 화면을 제거하고 이동
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => HomeScreen()),
  (route) => false,
);

---

각 메서드는 언제 쓰일까?

• push() : 가장 일반적인 전환. 단순한 이동에 사용
• pop() : 결과값을 전달하거나 단순 복귀할 때 사용
• pushReplacement() : 로그인 → 메인 화면 전환처럼, 이전 화면을 유지할 필요 없을 때
• pushAndRemoveUntil() : 회원가입 완료 → 홈화면 전환처럼, 이전 흐름을 모두 초기화할 때

---

데이터도 전달할 수 있다고?

Navigator는 단순히 화면만 이동하는 게 아닙니다.

데이터를 주고받는 것도 가능합니다.

1. 생성한 화면에 데이터 전달

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => DetailScreen(title: '상세 페이지'),
  ),
);

→ 생성자의 파라미터로 값을 넘겨줍니다.

2. 복귀할 때 데이터 반환

// 새 화면에서
Navigator.pop(context, '선택 완료');

// 이전 화면에서
final result = await Navigator.push(...);
if (result != null) {
  // 받은 결과 사용
}

→ 이전 화면에서 await로 기다리면 됩니다.

---

전체 구조를 연습해보자

4가지 방식의 화면 전환을 모두 실습해볼 수 있는 예제를 준비했습니다.
화면별 버튼을 누르고 어떤 방식으로 전환되는지 직접 확인해보세요.

각 예제는 다음 화면과 연결됩니다:

• SecondScreen: 기본 push
• ResultScreen: 값 반환
• ReplacementScreen: 현재 화면 대체
• HomeScreen: 이전 화면 모두 제거

---

마무리 정리

• Navigator는 Stack 구조로 동작한다
• push/pop 외에도 다양한 전환 방식이 존재한다
• 데이터를 주고받는 방식도 명확히 구분된다

Navigation은 Flutter 앱을 앱답게 만드는 시작입니다.
이해하고 실습하며 손에 익히면, 앱의 흐름을 내 손 안에 두게 됩니다.

---

다음 글

Navigator를 통해 화면을 전환하고,

데이터를 주고받는 흐름을 익혔다면

이제는 사용자와 직접 상호작용할 수 있는

다이얼로그(Dialog)를 살펴볼 차례입니다.

다음 글에서는 AlertDialog를 중심으로

• 어떻게 다이얼로그를 띄우고
• 어떤 방식으로 데이터를 주고받는지
• 커스터마이징은 어떻게 할 수 있는지
  하나씩 정리해보겠습니다.