Flutter 화면 전환 (Navigation) 정리 + 간단 예제

📌 1. 화면 전환이란?

✅ 개념

• 다른 화면(Page)으로 이동하는 기능
• 앱에서 페이지 이동 / 뒤로가기 구현

👉 Flutter에서는 Navigator를 사용

---

📌 2. 기본 구조

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

👉 새 화면으로 이동

---

📌 3. 간단 예제 (두 화면 이동)

✅ 전체 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FirstPage(),
    );
  }
}

// 첫 번째 화면
class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("첫 화면")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const SecondPage(),
              ),
            );
          },
          child: const Text("다음 화면으로"),
        ),
      ),
    );
  }
}

// 두 번째 화면
class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

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

---

📌 4. 뒤로가기

Navigator.pop(context);

👉 현재 화면 닫고 이전 화면으로 이동

---

📌 5. 값 전달 (Forward)

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

---

📌 6. 값 받기

class SecondPage extends StatelessWidget {
  final String name;

  const SecondPage({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Text(name);
  }
}

---

📌 7. 결과 값 받기 (Back)

final result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const SecondPage(),
  ),
);

print(result);

---

📌 8. 결과 반환

Navigator.pop(context, "데이터");

👉 이전 화면으로 값 전달

---

📌 9. 핵심 정리

기능	코드
이동	Navigator.push
뒤로가기	Navigator.pop
값 전달	생성자
값 반환	pop(context, 값)

---

🚨 자주 하는 실수

❌ context 잘못 사용

👉 build context 사용해야 함

---

❌ await 안 붙임

final result = Navigator.push(...) // ❌

👉 값 못 받음

---

🚀 한 줄 핵심

👉 push = 이동 / pop = 돌아가기

---

🔥 실무 팁

• 페이지 이동 → push
• 결과 필요 → await + pop(값)
• 데이터 전달 → 생성자 사용

---