플러터로 SNS어플 만들기 2. 메인페이지로 넘어가기

저번시간에 랜딩페이지까지 만들었습니다.

 

앱을 실행하면 여기서 끝나는거죠.

그러면 앱이라고 할수가 없을겁니다.

 

그래서 오늘은 랜딩페이지에서 메인페이지로 넘어가는것을 할거구요

 

다음 글에서는 bottomNavigation 을 활용한 메인페이지를 만들어볼겁니다.

 

 

오늘의 작업내용은

 

1. GetX 라이브러리 적용

 

2. 일단 메인페이지 다트파일 작성

 

3. Timer 함수로 메인화면으로 이동

 

 

1. GetX 라이브러리 적용

 

우선 flutter getX라고 구글에 검색하셔서 들어간다음 Pubspec.yaml 파일에 적용해줍니다.

4.1.4 버전이네요.

 

첫 라이브러리 적용이네요.

그림과 같이 적어주시고 pub get 눌러주세요. 이제 요런 라이브러리 적용하는건 너무 기초적이니까 생략하겠습니다.

 

GetX는 플러터 사용하는 사람이 정말 많이 사용하는 라이브러리 인데요

상태관리와 네비게이션등을 아주쉽게 할수 있도록 해두었습니다.

저는 상태관리는 Provider로 하고 네비게이션은 GetX를 사용합니다.

이유는 GetX를 사용하기전 Provider 상태관리에 익숙해졌는데 구지 바꿀필요가 없어서 그냥 쓰고있어요.

 

pubget 을 해주셨으면 main.dart 파일에 들어가서 

MaterialApp -> GetMaterialApp 으로 바꿔줍니다. 그냥 MaterialApp 앞에 Get만 쓰면되요.

그러면 빨간줄이 나올텐데 커서를 그쪽에 대고 알트 엔터쳐서 import해줍니다. 요것도 기본적이니 언급안하도록 하겠습니다.

그러면 Get을 이용할 준비가 되었습니다.

 

 

2. 일단 메인페이지 다트파일 작성

 

메인페이지를 작성할건데 꾸미기전 일단 페이지 이동하는걸 보기위해 아주 기초적으로 만들어줍니다.

저는 그냥 이렇게 만들어 줬어요.

 

3. Timer 함수로 메인화면으로 이동

 

landingpage.dart 로 와서 initState() 함수를 사용할겁니다.

이게 뭐냐면 클래스가 호출됬을때 제일 처음 상태를 결정해주는 함수로 1번만 실행되는 함수입니다.

 

지금 보이는 저기 저자리에 initState라고 치면 자동완성이 됩니다.

저기 박스 친부분에 함수 내용을 적으면 됩니다.

여기에 Timer 라는 것을 사용할겁니다. Timer(기간,콜백함수) 입니다.

기간에는 Duration 이라는 것을 이용해서 시간을 줄수 있습니다. 함수는 (){ 함수내용}  입니다.

그래서 다음과 같이 적히고.

함수내용에 Get.to(MainPage()) 을 적어두었습니다.

 

총체적 의미는 앱이 실행되고 LandingPage라는 클래스가 호출이 되면 제일처음으로 initState 라는 함수가 실행되는데

그내용은 3초를 센뒤에 3초가 지나면 Get.to(MainPage()) 라는것을 실행할것이다. 라는 의미입니다.

 

Get.to(MainPage()) 는 MainPage라는 클래스를 호출하는 겁니다. 즉 페이지 이동이되죠.

 

여기서 2가지만 좀 조율을 하겠습니다.

 

1. 랜딩페이지 ->메인페이지로 간뒤에 뒤로가기

2. 랜딩페이지일때 동글동글 거리는거 보여주기

 

1. 랜딩페이지에서 메인페이지로 갔는데 다시 랜딩페이지로 뒤돌아갈수있으면 좀 이상하잖아요?

그래서  

Get.to(MainPage()) 를 Get.offAll(MainPage())로 바꿔줍니다.

이 의미는 MainPage() 라는곳으로 가긴가는데 그전의 이동기록을 모두 지우고 가겠다는 뜻입니다.

 

2. 랜딩페이지에서 동글거리는게 있으면 이화면이 그냥 멈춰있는건지 로딩을하는건지 알수있고

사용자가 안정감을 느낄수 있을겁니다.

 

그래서 Stack 이라는 것을 이용해서 이렇게 바꿔줍니다.

Stack 이라는것은 Stack 이하에 children 으로 묶인녀석들을 모두 겹치게 보여주는겁니다.

children 아래에 적힐수록 맨위에 겹쳐지게 됩니다.

그러면 이렇게 동글동글 이가 나타나게 되죠.

이걸   loading spinner 라고 합니다.

제가 사용한거는 progressindicator 인데요, 진행표시하는놈 이죠

즉 이걸로 진행률을 나타낼수도 있습니다. 지금은 그런기능을 안쓸거구요.

 

어쨋든 제가 쓴거는 flutter 에서 기본적으로 사용할수 있는것이고

다른 예쁜모양들이 많으니 구글에 키워드를 잘 선택해서 검색 해보시면됩니다.

 

 

오늘 Timer 를 사용해서 3초뒤에 메인페이지로 넘어가게 만들었는데 사실 이거는 그냥 예제로 만든거고

실질적으로는 데이터베이스에서 내용을 받고 그걸 다받으면 메인페이지로 넘어가게 해야겠죠?

 

근데 저같은경우는 타이머3초를 사용하긴합니다.

클래스가 호출되면 데이터베이스에서 내용을 받고 메인페이지로 넘기긴 하는데

너무 오래 끌면안되니까 그냥 3초로 잘라버리는거죠.

근데 왠만하게 큰 내용의 데이터가 아니라면 3초안에 다 받아집니다.

 

다음 포스트는 메인페이지를 꾸며보도록 하겠습니다.

 

 

 

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

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

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

1. create project

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