[Flutter] GetX - 라우트 관리

 개요

GetX에서 내비게이션 관리 기능을 지원해주는데 엄청 간편해서 GetX에서 좋아하는 기능 중 하나이다. GetX Dependency와 Global 설정에 관련하여 정리한 글이 있으니 참고하자.

Flutter 라우트 관리 방식

flutter navigation

Flutter에서 내비게이션 방식에 대해서 간단하게 살펴보면 Stack 방식으로 관리를 하는데

Page1 화면이 호출하면 Stack에 Page1이 쌓이고 그다음 Page2 화면을 호출하면 Stack에 Page2... 이런 방식으로 하나씩 쌓아서 관리를 하게 된다.

 

 본문

먼저 Flutter에서 일반적으로 사용했던 내비게이션 코드와 GetX 내비게이션 코드를 비교해보자

기존 내비게이션 코드

Navigator.of(context).push(
                      MaterialPageRoute(builder: (_) => Page1()));

GetX 내비게이션 코드

Get.to(Page1());

기존 라우팅 코드는 Navigator 객체에 context로 인스턴스 생성을 하고 push 메서드에 Route 클래스를 전달해줘야 했다. 페이지 이동을 하기 위해 많은 코드를 사용했다 여기서 데이터를 이동할 페이지에 전달하려면 코드가 더 커질 것이다.

GetX 라우팅 코드는 똑같은 동작의 코드를 Get.to({이동할클래스});하면 바로 이동된다. 코드 많이 간결해졌고 명확해졌다.

---

Get.to

코드

Get.to(Page2());

Navigation Stack

GetX to

Page1애서 Page2로 이동을 하면 Page2가 추가로 쌓이게 된다.

---

Get.back

코드

Get.back();

Navigation Stack

Get.back

Page2에서 Get.back을 호출하게 되면 Page2가 삭제가 되며 Page1으로 돌아오게 된다.

---

Get.off

코드

Get.off(Page2());

Navigation Stack

Get.off

Page1에서 Page2를 off로 이동하게 되면 Page1은 삭제가 되면서 Page2가 쌓이게 된다.

---

Get.offAll

코드

Get.offAll(Page3());

Navigation Stack

Get.offAll

Page1 -> Page2 to로 이동한 화면에서 Page3를 offAll로 이동하게 되면 Stack에 있던 모든 화면들을 삭제하고 호출된 Page3만 Stack에 쌓이게 된다.

 

이 외에 Named로 호출하는 방식이 있는데 동작은 위의 메서드들과 동일하며 호출 방식을 클래스가 아닌 "/Page1"와 같이 Path를 사용하게 된다. https://pub.dev/packages/get#route-management GetX의 Route-management를 참고하자.

---

화면 전환 애니메이션

GetX에서는 내비게이션 메서드에 Transition을 정의하면 페이지 전화 효과가 적용된다.

Get.to(Page2(), transition: Transition.rightToLeft);

다음과 같은 애니메이션을 정의할 수 있다.

• Transition.fade,
• Transition.fadeIn,
• Transition.rightToLeft,
• Transition.leftToRight,
• Transition.upToDown,
• Transition.downToUp,
• Transition.rightToLeftWithFade,
• Transition.leftToRightWithFade,
• Transition.zoom,
• Transition.topLevel,
• Transition.noTransition,
• Transition.cupertino,
• Transition.cupertinoDialog,
• Transition.size,
• Transition.native

---

Data(Arguments) 전달

Data 전달

Get.to(Page2(), arguments: 'test');
Get.to(Page2(), arguments: {'name' : 'tester','number' : '10'});

• 단일 문자만 전달할 때 : argumanets: '문자'
• 여러 값을 전달할 때 : arguments: {'key1' : 'value1', 'key2' : 'value2' . . . . } Map을 Json 형태로 전달해준다.

Data 수신

Text('${Get.arguments}') // test
Text('${Get.arguments['name']}') // tester
Text('${Get.arguments['number']}') // 10

• 단일 문자만 받을 때 : ${Get.arguments}
• 여러 값을 받을 때 : ${Get.arguments['key1']}, ${Get.arguments['key2']} .... arguments에 키로 조회하면 된다.

Get.back Data 전달

Get.back(result: '결과값');

back으로 이전 화면으로 돌아오면서 값을 전달하고자 할 때 back 메서드 안에 result 파라미터를 전달하면 된다.

Get.back Data 수신

() async {
	final response = await Get.to(Page2());
}

await 키워드로 이동하면 이동된 페이지에서 back 메서드로 result값이 전달 시 이전 페이지가 값을 받을 수 있다.

await 사용하기 위해서는 메서드가 async가 선언이 되어야 한다.

 

 마무리

GetX에서 제공하는 라우트 기능은 Flutter에서 제공하는 라우트 기능에 비해 context에 종속적이지 않아서 개발에 자유로움이 있고 코드의 단순화로 가독성도 높여준다. GetX에서 많은 기능을 제공하지만 라우트 기능은 추천한다.