[GETX] GetX - 라우팅 관리

GetX의 주요 기능 중  하나인 Navigation ( Route 관리 ) 에 대해서 알아보자.

 

우선 GetX를 적용하기 위해서 GetMaterialApp 으로 Widget을 감싸줘야 한다.

 

@override Widget build(BuildContext context) { 
  return GetMaterialApp( 
    title: 'Flutter GetX', 
    home: HomePage() 
  ); 
}

 

#1. 기본 Navigation

 

기존의 Navigator에 비하면 굉장히 직관적이고 싶게 바꼈다.

Context도 필요없다 개꿀.

Get.to(FirstPage()); // 넘어가기 
Get.back(); // 뒤로 가기 
Get.off();  // 이동하면서 바로 전 페이지 Stack에서 삭제
Get.offAll(HomePage()); // 홈으로 이동하고 Stack에 쌓인 페이지들 전부 삭제

 

#2. Named Navigation

 

아래와 같이 Route 설정을 해주면 된다.

Named Navigation을 사용하여 Page를 이동 할 때에는 Get.toNamed 를 사용하면 된다!

transition 속성을 이용하면 화면 전환 애니메이션도 적용할 수 있다.

initialRoute: "/", 

getPages: [ 
  
  GetPage(
    name: "/", 
    page: () => HomePage(), 
    transition: Transition.zoom), 

  GetPage( 
    name: "/first", 
    page: () => FirstNamedPage(), 
    transition: Transition.zoom), 
  
  GetPage( 
    name: "/second", 
    page: () => SecondNamedPage(), 
    transition: Transition.zoom), 
  
  GetPage(
    name: "/user/:data", 
    page: () => UserPage()
  ) 
  
],

 

 

#3. Parameter 같이 넘기기

class GETX { 
  String greeting; 
  int num; 
  
  GETX({this.greeting, this.num}); 
} 

Get.to(FirstPage(), arguments: "Hello"); 
Get.toNamed("/first", arguments: {greeting: "Hello" , num: 7}); 
Get.toNamed("/first", arguments: GETX(greeting: "Hello" , num: 7));
Get.toNamed('/page-four/${Random().nextInt(10000)}',),

 

받는 쪽에서는 아래와 같이 사용하면 된다.

 

Text('$Get.arguments')
Text('${Get.arguments['name']}  ${Get.arguments['age']}'),
Text("${(Get.arguments as GETX).greeting} ${(Get.arguments as GETX).num.toString()}"),
Text(Get.parameters['data']),

 

Json 형식으로 argument를 받을 때는 위의 형식대로 받으면 되고,

객체로 받을 때는 아래와 같이 argument를 객체로 타입 캐스팅해서 멤버 변수에 접근할 수 있다.

 

[참고링크]

🔗 https://www.kindacode.com/article/using-getx-get-for-navigation-and-routing-in-flutter/

Using GetX (Get) for Navigation and Routing in Flutter - Kindacode