[Flutter] PageView 위젯 사용법

개요

Flutter로 앱을 개발할 때, TikTok와 같이 화면 전체를 스크롤하는 기능을 구현하고 싶을 때가 있습니다. 이때 Flutter가 기본적으로 제공한느 PageView 위젯을 사용하면 간단하게 구현할 수 있습니다.

이번 블로그 포스트에서는 PageView 위젯을 사용하는 방법에 대해서 알아보겠습니다.

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/widget/page_view

PageView 위젯

Flutter에서 제공하는 PageView 위젯은 스크롤을 통해 화면 전체를 이동시키는 위젯입니다. PageView 위젯은 children 속성을 통해 여러 개의 위젯을 전달하여 페이지를 구성할 수 있습니다.

Flutter - PageView widget scroll vertical

공식 문서를 통해 PageView 위젯에 대한 자세한 정보를 확인할 수 있습니다.

공식 문서: PageView class

PageView 위젯 사용법

PageView는 Flutter가 기본적으로 제공하는 위젯이므로, 다음과 같이 PageView 위젯을 간단하게 사용할 수 있습니다.

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.red,
          ),
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blue,
          ),
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.green,
          ),
        ],
      ),
    );
  }
}

PageView 위젯의 children에 화면에 표시할 위젯을 함께 전달하면 다음과 같이 화면 전체를 스크롤하여 페이지를 이동할 수 있게 됩니다.

Flutter - PageView widget scroll horizontal

여기서는 쉽게 확인하기 위해 Container 위젯을 사용하였습니다.

PageContorller

PageContorller를 사용하면 초기에 표시할 페이지를 결정할 수 있습니다.

class MyHomePage extends StatelessWidget {
  final pageController = PageController(
    initialPage: 1,
  );

  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: pageController,
        children: [
          ...
        ],
      ),
    );
  }
}

PageController의 initialPage 속성에 처음 표시될 페이지의 인덱스를 설정할 수 있습니다. 이렇게 수정하고 앱을 다시 실행해보면, 초기에 표시되는 페이지가 변경된 것을 확인할 수 있습니다.

scrollDirection 옵션

PageView 위젯은 scrollDirection 속성을 통해 스크롤 방향을 설정할 수 있습니다. 기본적으로 scrollDirection 속성은 Axis.horizontal로 설정되어 있습니다만, 이를 Axis.vertical로 설정하여 수직 방향으로 스크롤할 수 있습니다.

PageView(
  controller: pageController,
  scrollDirection: Axis.vertical,
  children: [
    ...
  ],
)

이렇게 수정하고 실행하면, 다음과 같이 수직 방향으로 스크롤할 수 있는 페이지를 확인할 수 있습니다.

onPageChanged 속성

PageView 위젯은 onPageChanged 속성을 통해 페이지가 변경될 때 호출되는 콜백 함수를 설정할 수 있습니다. 이를 통해 페이지가 변경될 때 추가적인 작업을 수행할 수 있습니다.

PageView(
  controller: pageController,
  onPageChanged: (index) {
    print('Page changed to $index');
  },
  children: [
    ...
  ],
)

PageView Builder

PageView 위젯은 PageView.builder 생성자를 통해 동적으로 페이지를 생성할 수 있습니다. PageView.builder 생성자는 itemBuilder 속성을 통해 페이지를 생성하는 함수를 전달할 수 있습니다.

PageView.builder(
  controller: pageController,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: index % 2 == 0 ? Colors.red : Colors.blue,
    );
  },
)

완료

이번 블로그 포스트에서는 Flutter에서 기본적으로 제공하는 PageView 위젯을 사용하여 페이지 전체를 스크롤하는 방법에 대해서 알아보았습니다. PageView 위젯을 사용하면 간단하게 페이지 전체를 스크롤할 수 있으며, scrollDirection 속성을 통해 스크롤 방향을 설정할 수 있습니다.

PageView를 사용하면 TikTok와 같이 화면 전체를 스크롤하는 기능을 구현할 때 유용하게 사용할 수 있습니다. 만약, 구현중인 앱이 화면 전체를 스크롤하는 기능이 필요하다면, PageView 위젯을 사용하여 구현해보세요.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!