플러터 화면 이동 완전 정복 – push부터 pushAndRemoveUntil까지 Navigator 함수 총정리!

플러터로 앱을 만들다 보면, 한 화면에서 다른 화면으로 이동하거나 되돌아오는 기능이 꼭 필요해요.
예를 들어, 로그인 → 홈화면, 상품 목록 → 상세 페이지, 설정 → 로그아웃 등등이 있죠.

이런 기능을 플러터에서는 Navigator 클래스를 통해 구현할 수 있어요.
처음에는 push와 pop만 써도 괜찮지만, 앱이 조금만 복잡해져도 화면을 교체하거나, 조건에 따라 이전 화면들을 지우는 기능이 필요해져요.

이 글에서는 화면 이동의 개념부터, 꼭 알아야 할 Navigator 함수 7가지를 예제와 함께 차근차근 소개할게요!

---

Navigator란?

• 화면 간의 이동을 스택(Stack) 구조로 관리하는 도구예요
• 새 화면을 열면 스택에 쌓고(push), 뒤로 가면 꺼내요(pop)
• 다양한 상황에 맞게 동작할 수 있도록 여러 함수들이 준비돼 있어요

실제 앱은 여러 화면을 전환하면서 동작하기 때문에 Navigator는 플러터 개발에서 아주 중요한 역할을 해요.

---

 

🖥️ 예제 구조

• main.dart: 홈 화면
• second_page.dart: 이동할 대상 화면

main.dart

import 'package:flutter/material.dart';
import 'second_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('홈 화면')),
      body: Center(
        child: ElevatedButton(
          child: Text('다음 화면으로 이동'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

 

second_page.dart

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('두 번째 화면')),
      body: Center(
        child: ElevatedButton(
          child: Text('뒤로 가기'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

예제 main.dart 파일

---

화면 이동 기능은 플러터 앱을 만들 때 거의 빠지지 않고 등장하는 아주 기본적인 기능이에요.
초보 단계에서는 Navigator.push()와 Navigator.pop()만으로도 충분할 수 있지만, 앱이 점점 복잡해질수록 조금 더 세밀한 화면 전환 컨트롤이 필요해져요.

 

예를 들어, 로그인 화면을 지나 홈 화면으로 이동하면서 로그인 페이지는 다시 돌아가지 않게 하고 싶을 때,
혹은 여러 화면을 거쳐 왔지만 중간 단계는 모두 건너뛰고 홈 화면으로 한 번에 돌아가고 싶을 때가 있죠.

이럴 때를 대비해 플러터에서는 다양한 화면 이동 함수들을 제공하고 있어요.

각 함수는 화면을 여는 방식, 닫는 방식, 이전 화면을 처리하는 방법 등에 따라 적절히 선택해서 사용할 수 있어요.

지금부터 소개해드릴 7가지 Navigator 함수들은 실제 앱 개발에서 매우 자주 사용되는 핵심 함수들이에요.
각 함수가 어떤 상황에서 쓰이는지, 어떻게 사용하는지 예제를 통해 천천히 살펴보도록 할게요 😊

🧭 자주 쓰는 Navigator 함수 7가지 정리

함수	설명	사용 예시
push	새 화면 추가	버튼 클릭 → 상세 페이지 이동
pop	현재 화면 닫기	상세 페이지 → 목록으로 돌아가기
pushReplacement	현재 화면을 새로운 화면으로 교체	로그인 → 홈 (뒤로가기 차단)
pushAndRemoveUntil	조건을 만족할 때까지 이전 화면 모두 제거	로그인 → 홈, 스플래시/로그인 화면 제거
popUntil	특정 조건을 만족할 때까지 pop	상세 → 설정 → 홈까지 한 번에 돌아가기
canPop	뒤로갈 수 있는지 확인	커스텀 뒤로가기 버튼 처리할 때
maybePop	뒤로갈 수 있을 때만 pop 시도	안전한 뒤로가기 시도

---

1. Navigator.push – 새 화면 열기 (기본 중의 기본)

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

• 새 화면을 현재 화면 위에 추가해요
• 스택 구조로 쌓이기 때문에 pop()으로 다시 돌아올 수 있어요
• 예: 상품 목록 → 상세 페이지

2. Navigator.pop – 현재 화면 닫기 (뒤로 가기)

Navigator.pop(context);

• 현재 화면을 닫고 이전 화면으로 돌아가요
• 안드로이드에서는 시스템 뒤로가기 버튼과 동일한 역할이에요
• 예: 상세 페이지에서 목록으로 돌아가기

3. Navigator.pushReplacement – 현재 화면을 새 화면으로 교체

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

• 현재 화면을 없애고 새 화면으로 바꿔요
• 뒤로 가기를 눌러도 이전 화면으로 돌아가지 않아요
• 로그인 후 홈 화면으로 이동할 때 많이 사용돼요

4. Navigator.pushAndRemoveUntil – 특정 조건까지 화면 다 지우고 이동

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
  (route) => false,
);

• 조건을 만족할 때까지 모든 화면을 제거한 후 새 화면을 열어요
• (route) => false는 모든 화면 제거를 의미해요
• 로그인 성공 시: 스플래시 → 로그인 → 홈만 남기고 나머지는 다 제거할 때 좋아요

5. Navigator.popUntil – 특정 조건까지 계속 뒤로 가기

Navigator.popUntil(context, ModalRoute.withName('/home'));

• 여러 화면을 한꺼번에 닫고 원하는 화면까지 돌아갈 수 있어요
• 이름(Route Name)을 기준으로 찾아가요
• 예: 설정 → 프로필 → 상세 → 홈으로 한 번에 돌아가기

이 기능을 쓰려면 MaterialApp에 routes를 지정해두고 각 화면에 name을 부여해야 해요.

6. Navigator.canPop – 뒤로 갈 수 있는지 확인

if (Navigator.canPop(context)) {
  Navigator.pop(context);
}

• 뒤로 갈 수 있을 때만 pop을 실행해요
• 앱 첫 화면에서 pop을 호출하면 오류가 나기 때문에 이걸로 먼저 확인해요

7. Navigator.maybePop – 안전한 뒤로 가기 시도

Navigator.maybePop(context);

• canPop() 체크 없이도, 가능한 경우만 pop을 해줘요
• 커스텀 뒤로가기 버튼이나 WillPopScope에서 자주 사용돼요

---

마무리하며

화면 이동은 플러터 앱에서 정말 자주 쓰이는 기능이에요.
처음엔 push와 pop만 써도 괜찮지만, 앱이 조금 복잡해지면

pushReplacement, pushAndRemoveUntil 같은 함수들도 꼭 필요하게 돼요.

 

이번 글에서 소개한 Navigator 함수들을 이해하고 나면, 다양한 화면 전환 시나리오를 유연하게 처리할 수 있어요.
처음에는 어려워 보여도, 하나씩 실습하면서 익히면 금방 익숙해질 거예요 😊

다음 글에서는 Named Route나 GoRouter 같은 라우팅 시스템에 대해서도 다뤄볼게요!
궁금한 점이 있다면 언제든지 댓글이나 메일로 문의해주세요!