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

(두둥!)  🥁🥁🥁

 

 

 

Flutter의 존재를 알고 계신다면

누구든 한 번쯤 들어봤을

 

GetX!!!!   🔥🔥🔥

 

 

get | Flutter Package

 

GetX의 Readme를 확인해 보시면

'The Three pillars'라고 말하는

GetX의 핵심 기능 3가지를 🤟

소개하고 있습니다.

 

• State management
• Route management
• Dependency managet

 

이 세 가지 핵심 기능 중

가장 만만한 Route management (라우트 관리 / 페이지 관리)를 소개해드리려고 하는데요

 

 

아래의 게시물 먼저 확인하시는 걸 추천드립니다!!  💁‍♂️💁‍♂️💁‍♂️

 

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

 

---

Route Management 심화 편!! 

 

Get.to(페이지 이름)을 이용하여 

Flutter Navigator 보다 쉽고 빠르게 페이지를 호출했습니다.

 

개발자들은 작명 센스가 중요합니다!    🧑‍💻🧑‍💻       

어떤 함수 또는 클래스가 무슨 일을 하는지 정확하고 알맞은 이름을 작명해주어야 하거든요

( 저는 항상 작명하는게 가장 힘듭니다..  또 코딩 중에 자동완성 때문에 비슷한 이름의 다른 클래스를 호출하기도 합니다... )

 

 

 

🎉 갑자기 작명에 대한 TMI 였습니다!

이름에 대한 이야기를 한 이유는 바로!

GetX에서는 특정 이름을 정하여 페이지를 호출 할 수 있기 때문이죠!

 

만약 페이지에 대한 dart 파일을 생성을 했다고 가정을 해봅시다.

user_kakao_login_page.dart

해당 dart 페이지 안의 클래스 이름은 

UserKakaoLoginPage 라고 작명했다고 했을 때 페이지 호출 시 

 

Get.to(UserKakaoLoginPage());

위와 같이 페이지 이름이 점점 길어질수록 

페이지 호출 시 길게길게 이름을 넣어줘야 합니다.

또는 UserKakaoLoginPage / UserNaverLoginPage 등

비슷한 이름의 페이지라면 호출 시 잘못 작성할 수 있죠!

 

그렇다면 페이지 이름을 단축해서 호출할 수 없을까요?

 

---

 

Name Route

 

자 일단 소스를 먼저 확인해 보시죠!

 

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/first', page: () => FirstPage()),
        GetPage(name: '/second', page: () => SecondPage()),
      ],
    );
  }
  
  ...
  
  Get.toNamed('/first');
  Get.toNamed('/second');
  Get.offAllNamed('/');

 

getPagets 속성을 이용하여 해당 페이지들에 대신 호출할 이름을 선언해 줍니다.

그 후 Get.toNamed()를 이용하여 페이지의 풀네임 대신 선언해준 이름으로 페이지를 호출합니다.

 

여기서 기존 GetMaterialApp에서

home: MyHomePage()

home 속성을 이용하여 처음으로 보일 페이지를 정의해줬습니다.

하지만 initialRoute 속성으로 해당 이름값으로 대신 호출했습니다.

 

 

Get.to(MyHomePage())  ->  Get.toNamed('/')

 

위와 같이 기존에 페이지 이름으로 호출하던 부분을 특정 이름을 정하여 호출이 가능합니다.

 

 

 

---

 

Transition

 

그리고 중요한 부분!!

바로 페이지가 전환될 때 너무 딱딱하게 보이지 않나요??

 

참을 수 없죠!   🔥🔥🔥

 

바로 페이지 전환 애니메이션입니다.

GetX에서는 페이지 전환뿐 아니라 전환할 때의 애니메이션 기능도 제공하고 있습니다.

 

      getPages: [
      ...
        GetPage(
          name: '/first',
          page: () => FirstPage(),
          transition: Transition.zoom,
        ),
      ...
      ],

 

위와 같이 transition 속성을 사용하면 다양한 전환 애니메이션을 사용할 수 있습니다.

 

 

간단합니다!

해당 Transition 값을 적용만 하고

해당 페이지를 호출하면 끝!입니다.

 

 

 

그 페이지의 진입 시 또는 페이지 종료 시 모두 같은 애니메이션으로 적용됩니다!

 

 

---

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

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