[Flutter] GetX Route with arguments & animation : GetX 페이지 이동

Motivation

페이지 이동시 특정 값을 넘겨주고 싶을때, 화면이 이동할때 시각적 효과를 주고 싶을때

//기본적인 방식. data라는 args를 전달하는 예시
Get.to(() => NextPage(), arguments: data);
// 전달한 데이터를 다음 페이지에서 받을때
var data = Get.arguments;


//페이지에 이름을 지정한 방식. 그리고 args는 Map형식으로 전달한 예시
Get.toNamed('/nextPage', arguments: {
                                      "data": data,
                                      "index": index
                                    });
//전달한 데이터를 받을때
dynamic data = Get.arguments["data"];
int currentIndex = Get.arguments["index"];

 

 

이동한 페이지에서 돌아올때 값을 넘겨주려면

// 페이지를 이동할때 변수에 할당해줌
var data =  await Get.to(NextPage());

//NextPage에서
Get.back(result: data);

 

애니메이션 효과를 주고싶다면, transition 값을 설정

GetMaterialApp(
        debugShowCheckedModeBanner: false,
        title: "title",
        theme: ThemeData(
          primaryColor: Colors.white,
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        initialBinding: InitBinding(),
        getPages: [
          GetPage(name: "/login", page: () => Login()),
          GetPage(name: "/app", page: () => const App()),
          GetPage(
              name: "/nextPage",
              page: () => NextPage(),
              transition: Transition.fade,
              transitionDuration: const Duration(milliseconds: 200)),
        ],
        home: const MyApp(),
      ),

 

 

Reference

https://velog.io/@chjo0330/Flutter-GetX%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-Navigation%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99

[Flutter] GetX를 이용한 Navigation(페이지 이동)

 

https://dev-yakuza.posstree.com/ko/flutter/getx/route/

[GetX] 라우트 관리

 

https://mugon-devlog.tistory.com/m/71

[Flutter] GetX Routing 사용법 및 기존 routing 비교