Flutter에서 화면 전환은 이렇게! – Navigator 완전 정복 🌈

Flutter로 앱을 만들다 보면, 한 화면에서 다른 화면으로 넘어가는 상황이 자주 발생한다. 예를 들어, 로그인 후 홈 화면으로 이동하거나, 리스트에서 아이템을 눌러 상세 페이지로 가는 등의 흐름 말이다.

이번 글에서는 Flutter에서 페이지 간 이동을 담당하는 Navigator에 대해 알아보고, push, pop, named routes 등 다양한 방법을 예제와 함께 정리해보았다.

---

🚀 Navigator란?

Flutter의 Navigator는 Stack 구조로 되어 있어 화면 이동을 쉽게 처리할 수 있도록 도와준다.
push는 새 화면을 추가하고, pop은 이전 화면으로 돌아가는 방식이다.

📄 예제: 페이지 이동 기본

import 'package:flutter/material.dart';

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

class FirstPage 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()),
            );
          },
        ),
      ),
    );
  }
}

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);
          },
        ),
      ),
    );
  }
}

🧭 Named Route 사용하기

라우트를 미리 등록하고 이름으로 호출하는 방식도 있다. 이 방식은 규모가 큰 앱에서 유지보수가 용이하다.

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

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

🧳 화면 전환 시 데이터 전달

// 데이터 전달
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: '안녕'),
  ),
);

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

  @override
  Widget build(BuildContext context) {
    return Text('받은 데이터: $data');
  }
}

🎯 요약

• Navigator.push(): 새 화면을 스택에 추가
• Navigator.pop(): 이전 화면으로 되돌아가기
• pushNamed, popAndPushNamed: 라우트 이름으로 화면 이동
• 화면 간 데이터 전달도 손쉽게 가능

Flutter의 화면 전환은 단순하지만, 앱의 흐름을 자연스럽게 만드는 핵심 기능이다.
처음에는 헷갈릴 수 있지만 몇 번만 써보면 자연스럽게 익힐 수 있다. 😄

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 여정입니다.