Flutter PageView로 부드러운 페이지 전환 구현하기

728x90

들어가기 전에

Flutter의 PageView 위젯은 여러 페이지를 부드럽게 전환하는 기능을 제공합니다. 슬라이드형 페이지 전환이 필요한 앱, 예를 들어 튜토리얼 화면, 이미지 갤러리, 또는 뉴스 앱의 콘텐츠 화면에서 많이 사용됩니다. 이번 글에서는 PageView 위젯의 기본 사용법부터 커스텀 옵션까지, 구체적인 사용 방법을 살펴보겠습니다.

1. PageView란 무엇인가?

PageView는 수평 또는 수직 방향으로 여러 페이지를 스크롤하여 전환할 수 있는 Flutter 위젯입니다. ListView와 비슷하게 여러 위젯을 나열할 수 있지만, 주로 하나의 페이지에 하나의 컨텐츠를 보여주고 슬라이드 형태로 전환합니다. 사용자는 PageView를 통해 터치 제스처로 페이지를 전환할 수 있으며, 개발자는 페이지 인덱스를 직접 제어할 수도 있습니다.

2. PageView의 기본 사용법

PageView의 기본적인 사용법은 매우 간단합니다. 여러 페이지를 정의한 뒤, 이를 슬라이드 형태로 전환할 수 있습니다. 아래는 가장 기본적인 PageView 코드 예시입니다.

PageView(
  children: <Widget>[
    Container(color: Colors.red, child: Center(child: Text('Page 1'))),
    Container(color: Colors.green, child: Center(child: Text('Page 2'))),
    Container(color: Colors.blue, child: Center(child: Text('Page 3'))),
  ],
)

위 코드에서는 PageView가 3개의 페이지를 갖고 있으며, 각 페이지는 다른 색상과 텍스트를 포함하고 있습니다. 사용자는 손가락으로 스와이프하여 페이지를 전환할 수 있습니다.

3. PageView 커스텀 옵션

PageView는 다양한 커스텀 옵션을 제공합니다. 다음은 자주 사용되는 주요 옵션들입니다.

scrollDirection: 페이지를 수평 또는 수직으로 스크롤할지 여부를 설정합니다. 기본값은 Axis.horizontal로, 수평 방향으로 페이지를 전환합니다.

PageView(
  scrollDirection: Axis.vertical, // 수직 방향으로 전환
  children: <Widget>[
    // 페이지 리스트
  ],
)

pageSnapping: 페이지가 정확히 한 페이지씩 스냅되도록 설정하는 옵션입니다. 기본값은 true로, 스와이프할 때 중간에 멈추지 않고 한 페이지가 끝날 때까지 스크롤됩니다.

PageView(
  pageSnapping: false, // 페이지 스냅 비활성화
  children: <Widget>[
    // 페이지 리스트
  ],
)

onPageChanged: 페이지 전환 시 호출되는 콜백 함수로, 현재 페이지의 인덱스를 얻을 수 있습니다. 이 기능은 특정 페이지에 도달했을 때 동작을 트리거하거나, 페이지에 따라 UI를 변경하고자 할 때 유용합니다.

PageView(
  onPageChanged: (int index) {
    print('현재 페이지: $index');
  },
  children: <Widget>[
    // 페이지 리스트
  ],
)

4. PageController로 페이지 제어하기

기본적인 PageView는 사용자가 스와이프하여 페이지를 전환하지만, 개발자가 직접 페이지를 제어하고 싶을 때도 있습니다. 이를 위해 PageController를 사용할 수 있습니다. PageController는 페이지의 인덱스를 지정해 특정 페이지로 이동시키거나 페이지 스크롤 위치를 제어할 수 있는 도구입니다.

PageController _controller = PageController();

PageView(
  controller: _controller,
  children: <Widget>[
    // 페이지 리스트
  ],
);

// 특정 페이지로 이동
_controller.jumpToPage(2);

jumpToPage: 애니메이션 없이 특정 페이지로 바로 이동합니다.
animateToPage: 애니메이션을 통해 특정 페이지로 이동합니다. 이때 애니메이션의 속도나 스타일을 설정할 수 있습니다.

_controller.animateToPage(2,
  duration: Duration(milliseconds: 500), 
  curve: Curves.easeInOut);

5. PageView와 Indicator

PageView에서 자주 사용되는 패턴 중 하나는 페이지 인디케이터입니다. 화면 하단에 작은 점을 표시하여 사용자가 현재 몇 번째 페이지에 있는지 시각적으로 알 수 있게 합니다. 이 경우, onPageChanged 콜백을 사용해 페이지 인덱스를 추적하고, 이를 인디케이터에 반영할 수 있습니다.

int _currentPage = 0;

PageView(
  onPageChanged: (int index) {
    setState(() {
      _currentPage = index;
    });
  },
  children: <Widget>[
    // 페이지 리스트
  ],
);

// 인디케이터 표시
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: List.generate(3, (index) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 4),
      width: 8,
      height: 8,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: _currentPage == index ? Colors.blue : Colors.grey,
      ),
    );
  }),
)

결론

Flutter의 PageView 위젯은 부드럽고 직관적인 페이지 전환을 제공하는 강력한 도구입니다. 슬라이드 형태의 인터페이스가 필요한 앱에서 간편하게 사용할 수 있으며, PageController와 같은 도구를 사용하면 더욱 정교한 페이지 제어가 가능합니다. 또한, 페이지 전환에 따른 시각적 인디케이터를 통해 사용성도 높일 수 있습니다. PageView를 효과적으로 활용하여 다양한 앱에 페이지 전환 기능을 구현해보세요!