[Flutter] 여러 페이지를 한 화면에서, PageView

여러 페이지를 한 화면에서, PageView

여러 페이지를 한 화면에서 처리할 수 있게 해주는 PageView 위젯을 알아보자

---

작업 환경

Flutter :  1.17.3

Dart : 2.8.4

---

PageView란?

PageView는 여러 페이지를 한 화면에서 구현할 수 있도록 해주는 위젯 클래스이다.

보통은 한 화면에 한 페이지를 구현하는데, PageView를 사용하면 한 화면에서 여러 페이지를 책처럼 넘겨볼 수 있도록 구현할 수 있다.

 

flutter 공식 채널의 PageView 소개 영상

 

PageView를 적용하여 책처럼 페이지를 넘기는 모습

페이지를 수직, 수평으로 넘기거나 페이지 전환 애니메이션 등을 적용할 수 있다.

PageController 클래스를 등록하여 페이지 전환을 트리거 할 수도 있다.

---

PageView 사용해보기

여러 페이지 추가하기

책을 만드려면 여러 페이지가 필요하다. PageView를 책이라고 생각하면 편하다.

 

PageView(
  // 페이지 목록
  children: [
    // 첫 번째 페이지
    SizedBox.expand(
      child: Container(
        color: Colors.red,
        child: Center(
          child: Text(
            'Page index : 0',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    ),
    // 두 번째 페이지
    SizedBox.expand(
      child: Container(
        color: Colors.yellow,
        child: Center(
          child: Text(
            'Page index : 1',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    ),
    // 세 번째 페이지
    SizedBox.expand(
      child: Container(
        color: Colors.green,
        child: Center(
          child: Text(
            'Page index : 2',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    ),
    // 네 번째 페이지
    SizedBox.expand(
      child: Container(
        color: Colors.blue,
        child: Center(
          child: Text(
            'Page index : 3',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    )
  ],
)

 

책을 구성할 여러 페이지를 PageView 인스턴스의 children에 넣는다. 위 소스코드에선 4개 페이지를 넣었다.

PageController 추가하기

PageController를 만들고 PageView에 연결하여야 한다. PageController는 PageView가 보여줄 첫 페이지를 설정하거나 페이지 넘김을 트리거 할 수 있다.

 

// index가 0인 페이지 먼저 보여줌
final PageController pageController = PageController(
  initialPage: 0,
);

// 아까 만든 PageView
PageView(
  controller: pageController, // PageController 연결
  children: ...
)

 

여기까지가 PageView를 사용하기 위한 필수 작업이다.

 

기본 PageView

---

PageView 커스터마이징

페이지 변경 시점에 애니메이션을 넣는다던가, 페이징 방향을 변경한다던가 그런 작업들을 할 수 있다.

페이징 방향 변경

PageView의 페이징 기본 방향은 수평인데 이를 수직으로 설정할 수 있다.

 

PageView(
  controller: pageController,
  scrollDirection: Axis.vertical, // 페이징 방향을 수직으로 설정
  children: ...
)

 

페이징 방향을 수직으로 적용한 모습

페이지 넘김 보정 끄기

PageView는 페이지를 넘길 때, 화면이 페이지에 딱 고정되도록 설정되있는데 이 기능을 끌 수 있다.

 

PageView(
  controller: pageController,
  pageSnapping: false, // false로 수정
  children: ...
)

 

페이지 넘김 보정을 끈 모습

---

관련 문서

PageView class - widgets library - Dart API

A Deep Dive Into PageView In Flutter (With Custom Transitions)