플러터] 네비게이션과 라우팅 - 개요

Flutter는 화면 간 이동과 딥 링크 처리를 위한 완벽한 시스템을 제공합니다. 복잡한 딥 링크가 없는 작은 애플리케이션은 Navigator를 사용할 수 있으며, 특정 딥 링크 및 네비게이션 요구 사항이 있는 애플리케이션은 Router도 함께 사용하여 Android와 iOS에서 딥 링크를 올바르게 처리하고 웹에서 앱이 실행 중일 때 주소 표시줄과 동기화되도록 해야 합니다.

Android 또는 iOS 애플리케이션을 딥 링크를 처리하도록 구성하려면 딥 링크 설정 문서를 참조하세요.

Navigator 사용하기

Navigator 위젯은 화면을 스택 형태로 표시하며, 타겟 플랫폼에 맞는 전환 애니메이션을 사용합니다. 새로운 화면으로 이동하려면 BuildContext를 통해 Navigator에 접근하여 push() 또는 pop()과 같은 명령어 메서드를 호출하면 됩니다:

onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),

Navigator는 Route 객체의 스택을 유지하기 때문에 push() 메서드는 Route 객체도 필요로 합니다. MaterialPageRoute 객체는 Route의 서브클래스로서 Material Design 전환 애니메이션을 지정합니다. Navigator를 사용하는 더 많은 예제는 Flutter Cookbook의 네비게이션 레시피나 Navigator API 문서를 참조하세요.

네임드 라우트(Named Router) 사용하기

주의: 대부분의 애플리케이션에서는 네임드 라우트 사용을 권장하지 않습니다. 자세한 내용은 아래의 제한 사항 섹션을 참조하세요.

단순한 네비게이션 및 딥 링크 요구 사항이 있는 애플리케이션은 Navigator를 사용하고 MaterialApp.routes 매개변수를 통해 딥 링크를 설정할 수 있습니다:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

여기에서 지정된 라우트('/'와 '/details')를 네임드 라우트라고 합니다. 전체 예제는 Flutter Cookbook의 네임드 라우트 사용 레시피를 참조하세요.

제한 사항

네임드 라우트는 딥 링크를 처리할 수 있지만, 동작이 항상 동일하며 사용자 지정할 수 없습니다. 플랫폼에서 새로운 딥 링크를 수신하면 Flutter는 사용자가 현재 어디에 있든 상관없이 새로운 Route를 Navigator에 푸시합니다.

또한, Flutter는 네임드 라우트를 사용하는 애플리케이션에서 브라우저의 '앞으로 가기 버튼'을 지원하지 않습니다. 이러한 이유로, 대부분의 애플리케이션에서는 네임드 라우트를 사용하는 것을 권장하지 않습니다.

Router 사용하기

고급 네비게이션 및 라우팅 요구 사항이 있는 Flutter 애플리케이션(예: 각 화면으로 직접 링크를 사용하는 웹 앱 또는 여러 Navigator 위젯을 사용하는 앱)은 라우트 경로를 구문 분석하고 앱이 새로운 딥 링크를 수신할 때 Navigator를 구성할 수 있는 go_router와 같은 라우팅 패키지를 사용해야 합니다.

Router를 사용하려면 MaterialApp 또는 CupertinoApp의 router 생성자로 전환하고 Router 구성을 제공합니다. go_router와 같은 라우팅 패키지는 일반적으로 구성을 제공합니다. 예를 들어:

MaterialApp.router(
  routerConfig: GoRouter(
    // …
  )
);

go_router와 같은 패키지는 선언적이므로 딥 링크를 수신할 때 항상 동일한 화면이 표시됩니다.

고급 개발자를 위한 참고 사항

라우팅 패키지를 사용하지 않고 앱의 네비게이션 및 라우팅을 완전히 제어하고 싶다면 RouteInformationParser와 RouterDelegate를 재정의하세요. 앱의 상태가 변경되면 Navigator.pages 매개변수를 사용하여 Page 객체 목록을 제공함으로써 화면 스택을 정확히 제어할 수 있습니다. 자세한 내용은 Router API 문서를 참조하세요.

Router와 Navigator 함께 사용하기

Router와 Navigator는 함께 사용하도록 설계되었습니다. Router API를 통해 선언적 라우팅 패키지를 사용하거나 Navigator에서 push() 및 pop()과 같은 명령어 메서드를 호출하여 네비게이션할 수 있습니다.

Router 또는 선언적 라우팅 패키지를 사용하여 네비게이션할 때, Navigator의 각 라우트는 Page에서 생성된 페이지 기반입니다. 반대로 Navigator.push 또는 showDialog를 호출하여 생성된 라우트는 페이지 없는 라우트를 Navigator에 추가합니다. 라우팅 패키지를 사용하는 경우, 페이지 기반 라우트는 항상 딥 링크가 가능하지만 페이지 없는 라우트는 그렇지 않습니다.

페이지 기반 라우트가 Navigator에서 제거되면 그 이후의 모든 페이지 없는 라우트도 제거됩니다. 예를 들어, 딥 링크가 Navigator에서 페이지 기반 라우트를 제거하여 네비게이션할 경우, 그 이후의 모든 페이지 없는 라우트는 다음 페이지 기반 라우트까지 제거됩니다.

주의: WillPopScope를 사용하여 페이지 기반 화면에서 네비게이션을 방지할 수 없습니다. 대신 라우팅 패키지의 API 문서를 참조하세요.

웹 지원

Router 클래스를 사용하는 애플리케이션은 브라우저 히스토리 API와 통합되어 브라우저의 뒤로 및 앞으로 가기 버튼을 사용할 때 일관된 경험을 제공합니다. Router를 사용하여 네비게이션할 때마다 브라우저 히스토리 스택에 히스토리 API 항목이 추가됩니다. 뒤로 버튼을 누르면 역순으로 네비게이션이 이루어지므로 사용자는 Router를 사용하여 표시된 이전 위치로 이동하게 됩니다. 즉, 사용자가 Navigator에서 페이지를 팝하고 브라우저 뒤로 버튼을 누르면 이전 페이지가 스택에 다시 푸시됩니다.

추가 정보

네비게이션 및 라우팅에 대한 자세한 내용은 다음 리소스를 확인하세요:

• Flutter Cookbook의 여러 네비게이션 레시피에서는 Navigator 사용 방법을 보여줍니다.
• Navigator 및 Router API 문서에는 라우팅 패키지 없이 선언적 네비게이션을 설정하는 방법에 대한 세부 정보가 포함되어 있습니다.
• Material Design 문서의 네비게이션 이해 페이지는 앱의 네비게이션 설계를 위한 개념을 설명하며, 앞으로, 위로, 역순 네비게이션에 대한 설명을 포함합니다.
• Flutter의 새로운 네비게이션 및 라우팅 시스템 배우기라는 Medium 기사에서는 라우팅 패키지 없이 Router 위젯을 직접 사용하는 방법을 설명합니다.
• Router 설계 문서에는 Router API의 동기 및 설계가 포함되어 있습니다.