[Flutter] GetX를 이용한 라우트 관리

https://pub.dev/packages/get

get | Flutter Package

GetX는 크게 나누어 라우트 관리, 상태 관리 기능을 제공한다. 이번 포스팅에서는 라우트 관리를 정리해 보려고 한다.

 

원래 다른 페이지로 이동하거나 다이얼로그를 띄울 때 같이 라우트 간 이동에서 context를 필요로 한다. 그런데 GetX를 사용하면 context 없이 라우트를 관리할 수 있다. 따라서 코드가 더 간결해지고 쉬워진다.

 

라우트 관리를 위해서 우선 MaterialApp을 GetMaterialApp으로 변경해야 한다.

// 변경 전
MaterialApp(
    title: 'GetX example',
    home: HomePage(),
);

// 변경 후
GetMaterialApp(
    title: 'GetX example',
    home: HomePage(),
);

 

1. Navigation

 

1) Get.to()

새로운 화면으로 이동한다. 아래 코드에서는 NextPage()로 이동한다.

Get.to(NextPage());

 

2) Get.toNamed()

미리 설정해둔 이름을 통해 새로운 화면으로 이동한다.

GetMaterialApp의 getPages에 미리 이름을 설정한다. 다음은 /next와 NextPage()를 연결한 것이다.

GetMaterialApp(
      title: 'GetX example',
      home: HomePage(),
      getPages: [
        GetPage(name: '/next', page: () => NextPage()),
      ],
);

아래의 코드에서는 /next라는 이름을 통해서 NextPage()로 이동한다.

Get.toNamed('/next');

 

3) Get.back()

이전 화면으로 돌아간다.

Get.back();

 

4) Get.off()

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

Get.off(NextPage());

 

5) Get.offAll()

Get.off()가 이전 화면 하나만 없앴다면 Get.offAll()는 이전의 모든 화면을 없애고 다음 화면으로 이동한다.

Get.offAll(NextPage());

 

 

2. Snackbar

기본적으로 Snackbar는 하단에서만 나온다. 그런데 GetX를 사용하면 Snackbar를 상단에 보이게 할 수도 있다.

 

1) Get.snackbar()

다음 코드에서는 제목과 메세지를 'Snackbar'로 설정했다. 지속시간(duration), 방향(snackPosition), 배경색(backgroundColor) 등 여러 설정들을 추가할 수 있다.

Get.snackbar('Snackbar', 'Snackbar', snackPosition: SnackPosition.TOP);

snackPosition을 TOP으로 설정했기 때문에 위에서 나오는 것을 볼 수 있다.

 

2) Get.showSnackbar()

Get.snackbar()와 거의 동일하지만 디자인만 다르다.

 Get.showSnackbar(
 	GetBar(
                title: 'Snackbar',
                message: 'Snackbar',
                duration: Duration(seconds: 2),
                snackPosition: SnackPosition.BOTTOM,
));

snackPosition을 BOTTOM으로 설정했기 때문에 아래에서 나오는 것을 볼 수 있다.

 

 

3. Dialog

 

1) Get.defaultDialog()

Dialog를 화면에 띄워준다. 확인/취소 시에 실행할 함수(onConfirm. onCancel), 확인/취소 텍스트(textConfirm, textCancel), 배경색(backgroundColor) 등 여러 설정들을 추가할 수 있다.

Get.defaultDialog(title: 'Dialog', middleText: 'Dialog');

 

2) Get.dialog()

Get.defaultDialog()와 달리 원래 사용하던 Dialog 위젯을 가져와서 사용할 수 있다. 따라서 새로 시작하는 프로젝트에서 GetX를 적용할 때는 Get.defaultDialog()를 사용하는 것이 좋지만, 원래 존재하는 프로젝트에 GetX를 적용할 때는 Get.dialog()를 통해 기존 Dialog 위젯을 복사하여 빠르게 작업하는 편이 좋을 것이다.

Get.dialog(Dialog(
	child: Container(
		height: 100,
		child: Center(child: Text('Dialog')),
	),
));

 

 

4. BottomSheet

 

1) Get.bottomSheet()

내부에 들어갈 위젯을 넣어주면 해당 위젯을 포함하는 BottomSheet를 보여준다.

Get.bottomSheet(Container(
    height: 100,
    color: Colors.white,
    child: Center(child: Text('BottomSheet')),
));