[Flutter] GetX를 사용해야할 이유1 - Route

 

Get - Route

route는 flutter 에서 화면의 이동을 위해 navigator 와 함께 사용된다.

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

기본적인 코드는 다음과 같은데, 간다하다고 볼 수도 있지만 화면 이동은 빈번하게 일어나는 만큼 코드를 자주 쓰는것에 비해 그리고 화면 전환에 여러가지 방식들이 있는걸 감안하면 가독성이 떨어지고 길다고 느껴질 수도 있다.

이 문제들은 Get의 route 기능을 통해 완벽하게 해결할 수 있다.

 

---

 

기본 화면 전환

// 기존 flutter route code
Navigator.of(context).push(MaterialPageRoute(builder: (_) => const FirstPage()));
// Get route code
Get.to(const FirstPage());

단순하게 FirstPage로 화면을 이동하고 스택이 쌓이게 된다.

---

기존 화면 쌓이지 않고 화면 전환

// 기존 flutter route code
Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const SecondPage()));
// Get route code
Get.off(const SecondPage());

기존의 FirstPage는 닫아지고 SecondPage만 남게된다. (SecondPage 에서 back() 시 Home화면으로 이동)

---

값 전달하며 화면 전환

Get.to(FirstPage(), arguments: 3);

Navigator 를 이용하면 argument를 전달할 수 없었지만(pushNamed로는 가능) GetX를 이용하면 가능하다.

Get.arguments

전달 받은 화면에서는 다음과 같이 argument를 전달받을 수 있다.

---

named를 이용한 화면 전환

route name 설정

GetMaterialApp(
  ...
  initialRoute: '/',
  // 기존 fluuter code
  routes: {
     '/': (context) => const Home(),
     '/first': (context) => const FirstPage(),
     '/second': (context) => const SecondPage(),
  },
  // GetX code
  getPages: [
    GetPage(
        name: '/',
        page: () => const Home(),
    GetPage(
        name: '/first',
        page: () => const FirstPage(),
    GetPage(
        name: '/second',
        page: () => const SecondPage()
  ],
);

GetMaterialApp의 getPages에 route name 정보를 입력해준다.

기존 code보다 지저분해 보이지만 더 다양한 기능을 사용할 수 있다.

 

해당 name의 page로 화면 전환

// 기존 flutter route code
Navigator.of(context).pushNamed("/first");
// Get route code
Get.toNamed('/first');

---

동적 Url을 사용하여 화면 이동

GetPage(
    name: '/dynamic/:uid',
    page: () => const DynamicLinkPage()

다음과 같이 route 설정을 해준다.

Get.toNamed('/dynamic/1234');

parameter를 전달하며 화면 이동

Get.parameters['uid']

동적 Url을 통해 전환된 화면에서 다음과 같이 Get 을 사용하여 값을 받을 수 있다.

---

이전 화면으로

// 기존 flutter route code
Navigator.of(context).pop();
// Get route code
Get.back();

스택에 쌓인 이전 화면으로 이동한다.

---

이전 화면 중 원하는 화면으로 바로

Get.offAll(const Home());
// ==
Get.offAllNamed('/');

Second Page에서 사용 시 FirstPage의 스택을 무시하고 HomePage로 이동할 수 있다.

 

*개발하는 남자 님의 영상을 참고로 제작함