Flutter 라우팅 구조 이해하기: Navigator vs Jetpack Navigation

안드로이드 개발에서는 화면 전환을 위해 Intent 또는 NavigationComponent를 사용했죠.
Flutter에서는 이를 Navigator라는 객체로 처리합니다.
이번 글에서는 Navigator의 구조와 화면 이동 방식, 그리고 안드로이드 방식과의 차이를 비교해봅니다.

---

🔄 1. Navigator란?

Flutter의 Navigator는 Stack 구조로 라우트를 관리합니다.
화면 전환은 새 페이지를 push하고, 이전 화면으로 돌아갈 때 pop합니다.

// A → B로 이동
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => PageB()),
);

// B → A로 돌아가기
Navigator.pop(context);

💡 Android의 startActivity(Intent), finish()와 매우 유사합니다.

---

🧭 2. Named Route 사용

기본 라우팅 외에도 Route 이름을 등록해 사용할 수 있습니다.
프로젝트가 커질수록 이 방식을 주로 사용합니다.

// main.dart
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/settings': (context) => SettingsPage(),
    },
  ));
}

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

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

💡 Android Navigation의 navController.navigate()와 유사합니다.

---

📌 3. 화면 전달 값 (Arguments)

화면 이동 시 데이터를 함께 넘길 수도 있습니다.

// 데이터 전달
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(id: 42),
  ),
);

// Named Route로 전달
Navigator.pushNamed(context, '/detail', arguments: 42);

// 수신
final id = ModalRoute.of(context)!.settings.arguments as int;

---

🧱 4. Android Navigation과의 비교

Android	Flutter
Intent / FragmentTransaction	Navigator.push()
finish()	Navigator.pop()
Navigation Graph (XML)	routes: { '/home': HomePage() }
SafeArgs로 전달	arguments로 전달

💡 Flutter는 선언형 UI답게 라우트도 선언적으로 등록하는 것이 특징입니다.

---

✅ 5. go_router 사용 (보너스)

Flutter 3.0 이후, go_router 라이브러리가 사실상 표준처럼 사용됩니다.
더 복잡한 구조와 URL 라우팅이 필요한 경우 go_router를 고려해보세요.

final GoRouter router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => HomePage()),
    GoRoute(path: '/settings', builder: (context, state) => SettingsPage()),
  ],
);

---

🔚 마무리

Flutter의 라우팅은 처음엔 context 기반이라 생소할 수 있지만, 구조를 이해하면 매우 단순합니다.
Stack 기반의 push/pop 방식은 Android의 액티비티 스택과도 개념이 유사해 익숙하게 느껴질 겁니다.

---