📌 Day 8: Dart & Flutter 기초부터 실전까지! Flutter 화면 전환 완벽 가이드! (Navigator.push, pop,

 
 
 

📃 개요

⚠️ Flutter 앱에서 여러 개의 화면을 이동할 때, 어떻게 구현해야 하는가?
⚠️ 화면 전환을 잘못 구현하면 UI가 어색해지고, 유지보수도 어렵다.
✅ Flutter의 Navigator.push()와 Navigator.pop()을 활용, 쉬운 화면 전환이 가능하다.
✅ 또한 Named Routes를 사용하면 더 깔끔한 코드 작성이 가능하다.
✅ 애니메이션을 추가하면 더욱 부드러운 UX를 만들 수 있다.
 

🔔 주제

🔸 Navigator.push()를 활용한 화면 이동
🔸 Navigator.pop()을 사용한 화면 닫기
🔸 Named Routes를 활용한 네비게이션
🔸 페이지 이동 시 애니메이션 효과 적용
 
 
 
 
 

---

1️⃣ Flutter 네비게이션 기본 개념

🔸 Flutter에서 화면(Screen)은 하나의 위젯이며, Navigator 를 사용해 화면을 전환한다.
🔸 Flutter 네비게이션은 Stack 구조 ⇒ 새로운 페이지가 기존 페이지 위에 쌓이는 방식
🔸 Navigator.push() → 새로운 화면을 열 때 사용
🔸 Navigator.pop() → 현재 화면을 닫고 이전 화면으로 돌아갈 때 사용
 
 
 
 
 

---

2️⃣ 기본 화면 전환 (Navigator.push)

 

📌 기본 화면 전환 구조 예제

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

🔔 코드 설명
🔸 Navigator.push() → 새로운 화면을 여는 함수
🔸 MaterialPageRoute() → Flutter의 기본적인 화면 전환 방식
🔸 builder: (context) => const SecondScreen() → 이동할 페이지 지정
 

📌 MaterialPageRoute를 사용하여 새로운 화면으로 이동하는 예제

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 네비게이션',
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({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 SecondScreen()),
            );
          },
          child: const Text("다음 화면으로 이동"),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({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("뒤로 가기"),
        ),
      ),
    );
  }
}

🔔 코드 설명
🔸 Navigator.pop() → 현재 화면을 닫고 이전 화면(HomeScreen)으로 이동
 

🔻 화면 이동 테스트 결과

 
 
 
 
 
 

---

3️⃣ Named Routes를 활용한 화면 전환

🔔 Named Routes를 사용하면 더 깔끔한 네비게이션 구현 가능
 

📌 기본 Named Routes 구조

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/second': (context) => const SecondScreen(),
  },
)

🔔 코드 설명
🔸 initialRoute: '/' → 앱이 실행될 때 기본적으로 띄울 첫 번째 화면
🔸 routes → 화면 경로를 미리 설정하여 Navigator.pushNamed()로 간편 이동 가능
 

📌 Named Routes 활용 예제

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Routes',
      initialRoute: '/',  // 기본 시작 화면
      routes: {
        '/': (context) => const HomeScreen(),
        '/second': (context) => const SecondScreen(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("홈 화면")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: const Text("다음 화면으로 이동"),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({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("뒤로 가기"),
        ),
      ),
    );
  }
}

🔔 코드 설명
🔸 Navigator.pushNamed() → 화면 이동
🔸결과는 push 사용 방식과 동일
 
 
 
 

---

4️⃣ 페이지 이동 시 애니메이션 효과 추가

🔸 기본 화면 전환 대신 애니메이션을 추가하여 부드러운 화면 이동 효과 적용 가능
🔸 PageRouteBuilder를 사용하여 사용자 지정 애니메이션 적용
 

📌 화면 이동 애니메이션 적용 예제

void _navigateWithAnimation(BuildContext context) {
  Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => const SecondScreen(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    ),
  );
}

🔔 코드 설명
🔸 FadeTransition → 화면이 부드럽게 페이드 인/아웃됨
🔸 PageRouteBuilder → 화면 전환 애니메이션을 직접 설정 가능
 
 
 
 
 

---

📌 요약

✅ Navigator.push()
→ 새로운 화면을 여는 기본 방법
✅ Navigator.pop()
→ 현재 화면을 닫고 이전 화면으로 이동
✅ Named Routes
→ 경로를 미리 설정해 깔끔한 코드 유지
✅ PageRouteBuilder
→ 애니메이션을 적용하여 부드러운 화면 전환 가능