#1 GetX - 라우트 관리

 

GetX를 보았을 때 가장 편하다고 느낀 부분이 라우드 관리이다.

 

기존에 페이지 이동을 위해서는 navigator, MaterialPageRoute, context 등 써야 할 부분이 많았다

context의 쓰임이 나에겐 이해하기 너무 힘들었었다😥

하지만 GetX를 사용하면 context없이 라우트 관리가 가능하다! 

 

라우트 관리를 위해 먼저 MaterialApp을 GetMaterialApp으로 변경한다

GetMaterialApp( // 이전: MaterialApp(
  home: MyHome(),
)

📢Navigation

1. 이름없는 라우트 탐색

 

1.1 Get.to()

ElevatedButton(
    child: Text("다음페이지로 이동"),
    onPressed: () {
        Get.to(() => NextPage());
    },
)

Get.to를 통해 새로운 페이지로 이동할 수 있다. 위 코드에서는 NextPage로 이동한다.

 

1.2 Get.back()

Get.back();

이전 화면으로 돌아간다.

 

1.3 Get.off()

Get.off(NextPage());

다음 화면으로 이동하면서 이전 화면을 아예 없애버린다. 이전 화면으로 돌아갈 필요가 없을 때 사용한다.

스플래시나 로그인 화면 등을 사용할 때 쓴다.

 

1.4 Get.offAll()

Get.offAll(NextPage());

Get.off()가 이전 화면 하나를 없앴다면 Get.offAll()은 다음 화면으로 이동하면서 이전의 모든 화면을 없앤다.

장바구니, 투표, 테스트 등에 유용하다.

 

2. 이름있는 라우트 탐색

 

2.1 Get.toNamed()

ElevatedButton(
     child: Text("이름을 통해 이동"),
     onPressed: () {
          Get.toNamed("/next");
     },
)

return GetMaterialApp(
  home: Home(),
  initialRoute: "/",
  getPages: [
    GetPage(name: "/", page: () => Home()),
    GetPage(name: "/next", page: () => NextPage()),
]

main.dart에서 아래 코드와 같이 이름과 페이지를 지정해준다.

그러면 Get.toNamed에서 이름을 통해 새 화면으로 이동할 수 있다.

 

2.2 Get.offNamed()

Get.offNamed("/next");

페이지 이동 후 이전 화면은 지운다.

 

2.3 Get.offAllNamed()

Get.offAllNamed("/next");

페이지 이동 후 이전 화면 전체를 지운다.

 

2.4 namedRoutes에서 argument 전달

// 1. String 전달
Get.toNamed("/next", arguments: "전달해줘");

// 2. Map 전달
Get.toNamed("/next2", arguments: {"name":"김땡땡", "age": 20});

String, Map, List, 클래스 인스턴스 등 모든 것을 전달할 수 있다.

// next.dart
Text("${Get.arguments}"),

// next2.dart
Text("${Get.arguments["name"]}은 ${Get.arguments["age"]}살"),

넘겨준 데이터는 위와 같이 사용할 수 있다.

 

2.5 동적 url 링크

// main.dart
GetPage(name: "/next/:uid", page: () => NextPage()),

GetX는 웹과 같이 향상된 동적 url을 제공한다. main에서 uid를 받을 수 있도록 해준다.

Get.toNamed("/next/1?name=김땡땡&age=20");

url data를 넣어준다. uid와 이름, 나이를 넘겨주도록 해보자.

// next.dart
children: [
    Text("${Get.parameters['uid']}"),
    Text("${Get.parameters['name']}님은"),
    Text("${Get.parameters['age']}살입니다"),
]

넘겨준 값은 위와 같이 사용할 수 있다.

 

📢SnackBars

context 때문에 복잡했던 snackbar도 get을 통해 간단하게 사용할 수 있다.

Get.snackbar(
  "제목",
  "내용",
  snackPosition: SnackPosition.TOP,
  duration: Duration(seconds: 3),
);

속성은 많으니 필요한 속성은 찾아서 사용하자

 

📢Dialogs

1. default dialog

Get.defaultDialog(
  title: "Dialog",
  middleText: "Dialog"
  onConfirm: () => print("Ok"),
);

기본적인 디자인 및 설정이 된 dialog이다. 얘 또한 속성이 많으니 찾아쓰자

 

2. dialog

Get.dialog(
  //YourDialogWidget
  Dialog(
    child: Container(
      height: 2000,
      child: Center(
        child: Text('Dialog'),
      ),
    ),
  ),
);

원래 사용하던 dialog위젯을 가져와 사용할 수 있다.

 

📢BottomSheets

Get.bottomSheet(
  Container(
    height: 150,
    child: Center(
      child: Text('BottomSheet'),
    ),
  ),
)

showModalBottomSheet와 같지만 context가 필요 없다. 위젯을 넣어주면 해당 위젯을 포함하는 BottomSheet를 보여준다.

 

 

 

 

확실히 get을 사용하면 코드가 훨씬 깔끔하고 간단해지는 게 보인다😶