🔀 Flutter 화면 전환(Navigation) 완전 정복 – 페이지 이동 구현하기

앱을 만들다 보면 단일 화면으로는 부족하죠.
로그인 페이지 → 홈 화면, 리스트 → 상세 화면 등 다양한 **페이지 이동(화면 전환)**이 필요합니다.

이번 글에서는 Flutter에서 화면을 전환하는 핵심 개념인 Navigator,
그리고 push(), pop(), MaterialPageRoute 사용법까지 차근차근 알아보겠습니다.

---

🚪 Navigator란?

Navigator는 Flutter에서 페이지(화면)를 스택 구조로 관리하는 도구입니다.

화면을 하나 열면 → 스택에 push,
뒤로 가면 → 스택에서 pop

✅ 이 구조 덕분에 여러 페이지 간 부드러운 전환과 뒤로 가기가 가능합니다.

---

✨ 기본 사용법 – 두 화면 이동 예제

✅ 1. 첫 번째 화면 (HomePage)

import 'package:flutter/material.dart';
import 'second_page.dart'; // 두 번째 페이지 import

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

---

✅ 2. 두 번째 화면 (SecondPage)

import 'package:flutter/material.dart';

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

---

✅ 3. main.dart 설정

import 'package:flutter/material.dart';
import 'home_page.dart'; // 홈 페이지 import

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

---

🔁 화면 간 값 전달하기

1️⃣ 페이지 이동 시 데이터 전달 (push)

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(name: "홍길동"),
  ),
);

2️⃣ SecondPage에서 데이터 받기

class SecondPage extends StatelessWidget {
  final String name;
  SecondPage({required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('$name님 안녕하세요!')),
    );
  }
}

---

🎯 다양한 화면 전환 방식

방법설명

Navigator.push()	새 화면 열기
Navigator.pop()	현재 화면 닫고 이전으로 돌아가기
pushReplacement()	현재 화면을 새로운 화면으로 대체
pushAndRemoveUntil()	특정 조건까지 모두 제거 후 이동

 

---

💡 팁: 라우트 이름으로 이동하기 (Named Routes)

앱이 커질수록 화면을 문자열 경로로 관리하는 게 유리합니다.

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

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

---

🧠 마무리 요약

개념설명

Navigator	Flutter의 화면 스택 관리자
push()	새 화면 열기
pop()	현재 화면 닫기
MaterialPageRoute	화면 전환 방식 지정
Named Routes	화면을 문자열 이름으로 관리 가능

 

Flutter에서의 화면 전환은 앱을 구성하는 핵심 중 하나입니다.
이번 예제를 이해하면 회원가입 → 로그인 → 홈, 목록 → 상세 보기 등 다양한 시나리오를 만들 수 있어요.