[Flutter] PageView 사용해보기!

📌 Mac M2 pro 사용

오늘은 회사도 스터디 용으로 만들고 있는 fitness App을 구현하면서 학습한 PagView에 대해 정리를 해볼 것이다. 기존 Android를 개발할때 사용한 ViewPager와 유사하였지만 사용하기는 Flutter의 PageView가 더 편하였다.

구성

PageView는 아래처럼 여러가지의 화면을 한 화면에서 보여주게 만들어주는 기능이다.

먼저 나는 아래의 이미지처럼 4가지의 화면을 PageView에서 보이게 만들 것이다.
아래의 화면을 구성 후 PageView를 작성해 보겠다.

PageView.Builder 생성자

페이지에 들어갈 화면 구성을 완료하였다면 이제 구현한 페이지를 PageView안에 넣어야한다. 나는 onBoardingList에 있는 값들에 따라 동적으로 화면구성을 하기 위해 PageView.Builder를 사용하였다. OnBoardingWidget의 경우는 내가 위에서 따로 만든 화면이다.
위 코드에서 controller는 나중에 버튼을 통해서 페이지 이동이 가능하도록 추가해주었고, itemCount는 보여질 화면구성이 onBoardingList에 들어있는 값들이기 때문에 리스트의 길이로 설정하였다. 이렇게하면 스크롤을 통한 페이지 이동이 가능하게 되었다. 다음은 버튼을 통한 페이지 이동에 대해 작성해 보겠다.

버튼을 통한 이동

이번에는 따로 버튼을 생성하여 해당 버튼 클릭 시 페이지 이동이 가능하도록 만들어 보자!
우선 버튼을 생성하기 전 위에서 추가해준 controller를 통해 선택한 page 번호를 아래 코드로 저장해준다.

selectPage에 값을 넣어 준 뒤 버튼위젯의 onPressed에 아래 코드를 넣어주면 된다. controller.jumpToPage으로 페이지 이동이 가능하고 화면 갱신을 위해 setState를 사용해 주었다. 코드 적용 시 정상적으로 버튼으로도 이동이 가능하게 될 것이다!

끝으로..

오늘은 PageView를 학습 후 포스팅 해보았다. 위 영상을 보면 프로그레스바도 버튼에 함께 있지만 해당 포스팅에서는 PageView에 대한 내용을 작성했기때문에 프로그레스바는 건너뛰었다. 언젠간 해당 내용도 다뤄서 포스팅하도록 하겠다.
끄읕..!