Flutter 화면 전환과 데이터 전달 완벽 가이드: Navigator 활용법부터 고급 라우팅까지

플러터 앱 개발에서 화면 전환(라우팅)과 데이터 전달은 필수적인 기능입니다.
아래에서 Navigator의 기본 원리, 다양한 화면 이동 방법, 그리고 데이터 전달의 실전 패턴까지 한 번에 정리합니다.

---

플러터 네비게이션의 기본 구조

핵심 개념

• Navigator 위젯이 화면(=Route)의 스택을 관리
• 새 화면으로 이동하면 push, 뒤로 가기는 pop
• 화면 전환은 MaterialPageRoute, Named Route, go_router 등 다양한 방식 지원
• 모든 MaterialApp, CupertinoApp에는 Navigator가 내장됨

---

화면 전환(라우팅) 방법

Navigator 기본 사용법

// 새 화면으로 이동
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// 현재 화면 닫고 이전 화면으로 돌아가기
Navigator.pop(context);

• push: 새 Route(화면)를 스택에 추가
• pop: 현재 Route를 스택에서 제거(이전 화면으로 복귀)

Named Route 사용

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/detail': (context) => DetailScreen(),
  },
);

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

• routes 맵에 각 화면을 등록해 코드의 일관성 유지
• arguments로 데이터 전달 가능

go_router, GetX 등 패키지 활용

• 복잡한 딥링크, 네스티드 네비게이션, 웹 지원 등 고급 기능 필요 시 사용
• GoRouter(routes: [GoRoute(path: '/home', builder: ...)])

---

화면 간 데이터 전달 방법

생성자를 통한 데이터 전달 (가장 직관적)

// 데이터 받는 화면
class DetailScreen extends StatelessWidget {
  final String title;
  DetailScreen({required this.title});
  ...
}

// 데이터 전달
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailScreen(title: 'Hello')),
);

• 위젯 생성자에 매개변수로 데이터 전달
• 타입 안전, 코드 가독성 우수

Named Route + arguments

// 이동 시 arguments 전달
Navigator.pushNamed(
  context,
  '/detail',
  arguments: '전달할 데이터',
);

// 받는 쪽
final args = ModalRoute.of(context)!.settings.arguments as String;

• 여러 타입의 데이터 전달 가능
• arguments로 객체, 맵 등 복합 데이터 전달 가능

Navigator.pop()으로 결과 반환

// 두 번째 화면에서 결과 반환
Navigator.pop(context, '결과 데이터');

// 첫 번째 화면에서 결과 받기
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);
// result 변수에 반환값 저장

• 화면을 닫으면서 이전 화면에 데이터(예: 선택 결과, 입력 값 등) 전달

---

실전 예시: 게시글 상세 페이지 이동

// 게시글 목록에서 상세 페이지로 id 전달
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => PostDetailScreen(postId: post.id)),
);

// 상세 페이지에서 postId로 데이터 조회
class PostDetailScreen extends StatelessWidget {
  final int postId;
  PostDetailScreen({required this.postId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('게시글 상세')),
      body: FutureBuilder(
        future: fetchPost(postId),
        builder: (context, snapshot) {
          // 데이터 로딩 및 표시 로직
        },
      ),
    );
  }
}

---

팁 및 참고 사항

개발 베스트 프랙티스

• 데이터 전달은 생성자 방식이 가장 명확 (타입 안정, IDE 자동완성)
• 복잡한 데이터/다중 화면 이동: arguments, 상태관리(Provider, Bloc) 등 활용
• 결과 반환: Navigator.pop(context, data) 패턴 적극 활용
• 딥링크, 웹 지원: go_router 등 라우팅 패키지 추천

고급 네비게이션 패턴

// 화면 교체 (현재 화면을 새 화면으로 교체)
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

// 모든 화면을 제거하고 새 화면으로 이동
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomeScreen()),
  (route) => false,
);

// 조건부 화면 제거
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
  ModalRoute.withName('/home'),
);

---

마무리

플러터의 라우팅과 네비게이션은 간단한 화면 전환부터, 데이터 전달, 결과 반환, 복잡한 네비게이션 구조까지 모두 유연하게 지원합니다.
앱의 구조와 데이터 흐름에 맞는 방식을 선택해서 사용하면 됩니다. 기본적인 Navigator 사용법부터 시작하여 프로젝트가 복잡해지면 go_router 같은 고급 라우팅 솔루션을 도입하는 것이 좋은 전략입니다.
사용자 경험을 고려한 자연스러운 화면 전환과 효율적인 데이터 전달을 통해 완성도 높은 앱을 만들어보세요.