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

JO_CHOI·2021년 3월 8일
5

Flutter

목록 보기
1/5

1. 환경설정

pubspec.yaml파일에 해당 코드를 추가한다.
get: ^버전

dependencies:
  get: ^3.26.0

2. 설치

커맨드 창에서

$ flutter pub get

명령어를 입력한다.

3. 불러오기

getX를 사용하고 싶은 파일에 해당 명령어를 불러온다.

import 'package:get/get.dart';

4. 사용 셋팅

기존의 root위젯인 MaterialApp을 GetMaterialApp으로 바꾸어준다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    );
  }
}

-> 아래와 같이 변경

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
    );
  }
}

5. 사용하기

1) 기본 이동

가장 간단하게 페이지를 이동하려면

Get.to(() => NextPage());

위와 같이 사용하면 된다.
여기서 NextPage는 이동하고자 하는
StatelessWidget/StatefulWidget의 클래스 명으로 바꿔주면 된다.


2) argument와 함께 이동

만약 arguments 값과 함께 페이지를 이동하고 싶다면

Get.to(() => NextPage(), arguments: value);

처럼 사용하면 된다.

여기서 value는 자신이 원하는 값을 넣어주면 된다.

넘겨진 argument를 받고 싶으면

var value = Get.arguments;

처럼 사용하면 될 것이다.


반대로 이동한 페이지에서 값을 받아오고 싶다면

  • 원래 페이지에서
var value =  await Get.to(NextPage());
  • NextPage에서
Get.back(result: value);

다음과 같이 하면 된다.


3) 이전 페이지(1개만) 삭제 후 이동

만약 페이지를 이동한 후 이전 페이지로 다시 돌아가지 않아도 된다면

Get.off(() => NextPage());

이런 식으로 사용하면 된다.


4) 이전 페이지 모두 삭제 후 이동

만약 기존에 있는 페이지를 모두 삭제하고 페이지를 이동하고 싶다면

Get.offAll(() => NextPage());

위와 같이 사용한다.


5) Named(이름)으로 이동하기

이름(경로)로 페이지를 이동하고 싶다면

Get.toNamed('/a/b/c1');

과 같이 이름을 붙여서 사용할 수 있다.

페이지의 경로를 지정해주기 위해서
GetMaterialApp에 getPages속성을 추가해 준다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
    getPages: [
    	GetPage(
        	name: '/',
            page: () => FirstPage(),
        ),
        GetPage(
        	name: '/two',
            page: () => SecondPage(),
        ),
        GetPage(
        	name: '/three',
            page: () => ThirdPage(),
        ),
        GetPage(
        	name: '/a/b/c1',
            page: () => ABCOnePage(),
        ),
    	],
    );
  }
}

  • 만약 param과 함께 페이지를 이동하고 싶다면
        GetPage(
        	name: '/papa/:param',
            page: () => ParamPage(),
        ),

과 같이 사용이 가능하다.


  • 사용법
Get.toNamed('/papa/value');

value 값이 param 값으로 전달된다.

ex)

Get.toNamed('/papa/1234');

1234가 param 값으로 전달


  • param값을 받으려면
Get.parameters['param']

과 같이 사용할 수 있다.


마찬가지로 쿼리도 다음과 같은 방식으로 사용할 수 있다.

Get.toNamed('/papa/value?id=123&name=침착맨');

받는 방법은
Get.parameters['param'] => value 값
Get.parameters['id'] => id 값, 즉 123
Get.parameters['name'] => name 값, 즉 침착맨
이다.


6. 마침

위의 내용은 유튜브 채널: '코드팩토리'님의 영상을 참고하였습니다.
해당 링크: https://www.youtube.com/watch?v=wgJItCEL7hk&t=429s

더 자세한 내용은 getX GitHub (https://github.com/jonataslaw/getx/blob/master/README.ko-kr.md) 에서 확인하실 수 있습니다.

profile
꾸준함이 최선이다.

0개의 댓글