플러터(Flutter) 입문 6. 라이브러리 사용하기

 

저번시간에 이렇게

 onTap:(){

함수

}

 

이렇게 하면 탭하면 함수가 발동한다고 했었어요.

그리고 페이지 이동하기 위해서 Navigator.push 라는걸 이용해 엄청나게 길게 적었죠.

 

근데 앱개발하면서 페이지 이동함수를 사용할일이 굉장히 많이 있어요.

근데 저걸 일일이 기억하기도 힘들잖아요.

저도 맨날 까먹어서 검색해서 복붙했거든요.

 

그래서 좀더 쉽게하는방법이 나왔어요.

라이브러리를 사용하는것이죠

그 라이브러리 이름이 GetX에요.

 

GetX뿐만아니라, 귀찮고 힘든걸 이미 코딩화시켜놓고 그걸그냥 땡겨쓰면 되는형식으로 다른 개발자들이 많이 개발해뒀어요.

그걸 라이브러리라고 하고, 우리는 그냥 그걸 가져다 쓰면되죠.

 

나중에 실력되면 본인이 직접 만들어서 라이브러리를 공개하세요.

그게 바로 오픈소스 기여 라고 합니다.

 

어쨋든 많고많은 라이브러리 중에

오늘은 페이지이동을 쉽게하기위해 GetX라는 라이브러리를 쓸거에요.

GetX라는 라이브러리로 할수있는게 많지만, 대표적인게 페이지이동. 즉 네비게이터로서의 역할이죠.

 

 

1. 라이브러리 검색

구글에다가

 

flutter getx 라고 치셔서 대충 이거같다 싶은 사이트를 들어가주세요.

 

 

이런사이트가 나오면 정상이에요.

 

pub.dev 라고 왼쪽 상단에 적혀있죠.

여기서 라이브러리 정보를 받을수있어요.

 

 

Readme 를 잘 읽어보세요.

설치방법이라던지 사용방법이라던지가 나와있습니다.

 

영어로 되어있어서 힘드시죠? 저도 읽기 귀찬기도 하고 그래요.

 

그러면 그냥 다른사람이 어떻게 사용하는지

블로그를 보거나 유튜브에 쳐서 따라해보시면 됩니다. 

 

일단 제가 네비게이터 사용법은 알려드릴테니 그대로 따라해주세요.

 

 

먼저 Readme ,Changelog 등등 탭이 있는데 installing 으로 들어가주세요.

 

 

그러면 영어를 쭉보다보면

 

pubspec.yaml 파일에 가서 

 

dependencies:

  get: ^4.1.4 이런식으로 적으라고 하네요.

 

get: ^4.1.4

 

이거를 복사해주세요.

 

2. 라이브러리 설치

그리고 pubspec.yaml 파일로 들어와주세요.

 

여기는 앞으로 우리가 자주 들어오게될 파일입니다.

 

 

 

저기 보면 dependencies :  이렇게해서 밑에 flutter 뭐 이런식으로 적혀있을거에요.

 

그러면 cupertino_icons: ^1.0.2 라고 적힌곳 아래에다가 아까 복사한 get:^4.1.4 이거를 적어주세요.

띄어쓰기를 유의해서 잘넣어주세요.

 

 

그리고 오른쪽 상단에 Pub get 을 눌러주세요. 그러면 라이브러리설치가 됩니다.

 

 

그리고 아무 다트파일이나 눌러서 들어오게되면

상단에 노란색 라인이 보이죠.

 

저기 Get dependencies 를 눌러주세요.

 

 

여기까지가 라이브러리 사용의 공통부분입니다.

 

그다음 각라이브러리의 특성에 맞는 설정들을 해줘야합니다.

 

GetX같은경우 네비게이션 기능을 사용하기위해서는 다음과 같은 간단한 작업을 해줘야합니다.

 

 

앱을 제일 상단에서 감싸고 있는 MaterialApp 을 GetMaterialApp으로 바꿔주세요.

그냥 앞에 Get만적으면되죠.

 

그러면 빨갛게 오류가 나는데, import 를 안해줬기 때문입니다.

 

 

 

오류난부분에 클릭한번 해주고, Alt+enter 쳐서 import 해주세요.

 

그러면 여기까지 세팅이 끝입니다.

이제 사용만하면됩니다.

 

3. GetX Navigator 기능사용

 

Get.to() 이렇게 적은다음 () 괄호안에 자기가 이동하고싶은 페이지의 클래스명을 적으면됩니다. 아규먼트가 있으면 함께넣어주세요.

 

기존에 이렇게 적었던것이 

 

Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondMan(isKorean: false, age: 20, gender: "여자",)
),
);

 

이렇게 바꼈습니다.

 

Get.to(SecondMan(isKorean: false, age: 20, gender: "여자",));

 

 

굉장히 간편해졌죠.

그럼 기존에 적었던 코드는 삭제해주세요.

 

이렇게 이번 포스팅에서는 라이브러리를 사용하는 방법을 알아보았습니다. 그중에서 GetX 라는 라이브러리의 네비게이션을요.

그럼 다음포스팅에서 봐요.

 

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com