[Flutter] GetX 페이지 이동 Route management (1)

🎉(두둥!)

 

 

 

Flutter의 존재를 알고 계신다면

누구든 한 번쯤 들어봤을

 

GetX!!!!   🔥🔥🔥

 

 

get | Flutter Package

 

GetX의 Readme를 확인해 보시면

'The Three pillars'라고 말하는

GetX의 핵심 기능 3가지를 🤟

소개하고 있습니다.

 

• State management
• Route management
• Dependency managet

 

이 세 가지 핵심 기능 중

가장 만만한 Route management (라우트 관리 / 페이지 관리)를 먼저

소개해드리려고 합니다.

(처음이니 쉬운 것부터...ㅎㅎ)

💁‍♂️💁‍♂️💁‍♂️

---

Route management

 

자 GetX를 이용하여 페이지를 이동시키기 전

GetX가 얼마나 편하고 강력한지 우리가 알기 위해서는

기존에 어떤 방식으로 페이지를 이동시켰는지 알아야 합니다.

 

children: [
   ElevatedButton(
       onPressed: () {
         Navigator.of(context).push(
             MaterialPageRoute(builder: (_) => const FirstPage()));
       },
       child: const Text('Move FirstPage')),
   ElevatedButton(
       onPressed: () {
         Navigator.of(context).push(
             MaterialPageRoute(builder: (_) => const SecondPage()));
       },
       child: const Text('Move SecondPage')),
],

 

Navigator을 이용하여 Context 값을 넘겨주고,

MaterialPageRoute의 builder을 이용하여...

 

처음 Flutter를 접하신다면 생각보다 Navigator을 이용하여

페이지를 이동시킬 때 뇌 정지가 가끔 옵니다.

(혹시.. 저만 그런가요??)   🤦‍♂️🤦‍♂️

 

 

 

---

일반적인 페이지 이동

 

자 이제 GetX를 이용해볼까요??

 

Get.to(FirstPage());
Get.to(SecondPage());

 

WOW!!   🔥

 

 

 

너무 간단하죠?

 

페이지 닫기도 간단합니다.

Get.back();

 

이번에는 자주 사용되는 첫 페이지로 이동할 때 사용하는

Get.ofAll을 소개하겠습니다.

 

 

만약 여러 페이지를 호출했다고 가정해보겠습니다.

페이지의 종류는 총 4가지  🤟👍

 

• MyHomePage()
• FirstPage()
• SecondPage()
• ThirdPage()

 

자 앱이 시작되면 

MyHomePage가 호출됩니다.

그 후 FirstPage, SecondPage, ThirdPage 페이지 호출

현재 상황 : MyHomePage -> FirstPage() -> SecondPage() -> ThirdPage() 

 

이제 ThirdPage에서 처음 MyHomePage로 돌아가려고 합니다.

 

Get.to(MyHomePage())를 호출하게 되면

 

Get.to(MyHomePage())를 호출 : MyHomePage -> FirstPage() -> SecondPage() -> ThirdPage() -> MyHomePage()

이렇게 중첩되어 뒤로 가기를 하면 뒤에 열려있는 Third, Second, First 페이지가 보이겠죠?

 

그렇다고 ThirdPage에서 Get.back()을 호출하면 뒤에 열려있는 SecondPage가 보이게 됩니다.

 

이럴 때 바로 Get.offAll을 사용하면 됩니다.

 

MyHomePage -> FirstPage() -> SecondPage() -> ThirdPage()

ThridPage에서 Get.offAll(MyHomePage())를 호출하면,

 

Get.offAll(MyHomePage());

 

MyHomePage -> FirstPage() -> SecondPage() -> ThirdPage()

모든 페이지가 날아가고 MyHomePage만 남게 됩니다!

 

---

 

추가적으로 더 많은 GetX 페이지 전환에 대해서 알고싶으시다면

아래 게시물을 확인해주세요!!  💁‍♂️💁‍♂️💁‍♂️

 

[Flutter] GetX 페이지 전환 애니메이션 Route management (2)

 

---

여기까지 저의 긴 글을 읽어주셔서 감사합니다.

제가 습관적으로 코딩을 하는 그날까지 습관적으로 코딩을 하기 위해 글 작성을 꾸준하게 해보겠습니다.