Flutter 화면 이동 라이브러리

Flutter 애플리케이션에서 화면 이동은 앱의 사용자 경험을 결정짓는 중요한 요소 중 하나입니다. 이 문서에서는 Navigator, Get, GoRouter와 같은 주요 화면 이동 라이브러리에 대해 설명드리겠습니다.

---

Navigator

Navigator는 Flutter에 기본적으로 내장된 화면 이동 도구입니다. 다양한 메서드를 제공하여 화면 이동 및 관리가 가능합니다.

주요 메서드와 설명

push

• 새로운 화면으로 이동합니다.

Navigator.of(context).push(MaterialPageRoute(builder: (context) => const FirstPage()));

• 데이터를 전달하려면 다음과 같이 작성합니다:

Navigator.of(context).push(MaterialPageRoute(builder: (context) => FirstPage(title: "Test")));

pushNamed

• 라우터 이름으로 화면을 이동합니다.

Navigator.of(context).pushNamed("/first");

pushAndRemoveUntil

• 모든 페이지를 제거하고 새로운 화면으로 이동합니다.

Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (context) => const HomePage()), 
    (route) => false);

pushReplacement

• 현재 페이지를 제거하지 않고 교체하며 이동합니다.

Navigator.of(context).pushReplacement(
    MaterialPageRoute(builder: (context) => const ThirdPage()));

pop

• 현재 페이지를 닫고 이전 페이지로 돌아갑니다.

Navigator.of(context).pop();

canPop

• 현재 페이지를 닫을 수 있는지 확인합니다.

Navigator.of(context).canPop();

---

Get (GetX 라이브러리)

Get은 상태 관리, 화면 이동, 의존성 관리를 하나의 패키지에서 해결할 수 있는 강력한 Flutter 라이브러리입니다.

설치 방법

1. pubspec.yaml 파일에 추가:

dependencies:
  get: ^4.6.6

2. 터미널에서 설치:

flutter pub add get

주요 기능과 예제

to

• 새로운 화면으로 이동합니다.

Get.to(() => const FirstPage());

toNamed

• 라우터 이름으로 화면 이동:

Get.toNamed("/first");

off

• 현재 페이지를 제거하고 새로운 화면으로 이동:

Get.off(() => const FirstPage());

offAll

• 모든 페이지를 제거하고 새로운 화면으로 이동:

Get.offAll(() => const FirstPage());

back

• 현재 페이지를 닫고 이전 화면으로 돌아갑니다.

Get.back();

---

GoRouter

GoRouter는 Flutter에서 라우팅을 간단히 관리할 수 있는 라이브러리입니다.

설치 방법

1. pubspec.yaml 파일에 추가:

dependencies:
  go_router: ^14.2.7

2. 터미널에서 설치:

flutter pub add go_router

주요 사용법

기본 설정

final router = GoRouter(
  initialLocation: "/main",
  routes: [
    GoRoute(
      path: "/main",
      builder: (context, state) => const MainPage(),
    ),
    GoRoute(
      path: "/first",
      builder: (context, state) => const FirstPage(),
    ),
  ],
);

데이터 전달

GoRoute(
  path: "/first/:id",
  builder: (context, state) {
    return FirstPage(id: state.params["id"]!);
  },
);

---

비교: Navigator, Get, GoRouter

특징	Navigator	Get	GoRouter
내장 여부	기본 제공	외부 패키지	외부 패키지
라우팅 방식	코드 기반 라우팅	간단한 API 제공	선언적 라우팅 지원
데이터 전달	직접 전달	간단한 데이터 전달 가능	URL 파라미터를 통해 전달
추천 사용 사례	간단한 앱	상태 관리와 라우팅 통합 앱	URL 기반 네비게이션 앱

---

• Navigator는 기본적으로 제공되며, Flutter 초보자에게 적합합니다.
• Get은 간단하고 빠른 화면 이동 및 상태 관리가 필요한 앱에 적합합니다.
• GoRouter는 URL 기반 네비게이션이 중요한 애플리케이션에 적합합니다.