<div id="readability-page-1" class="page"><article data-pagefind-body=""> <div id="contents_list" markdown="1">
<h2 id="목차">목차</h2>
<ul>
<li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li>
<li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li>
<li><a href="#pageview-%EC%9C%84%EC%A0%AF">PageView 위젯</a></li>
<li><a href="#pageview-%EC%9C%84%EC%A0%AF-%EC%82%AC%EC%9A%A9%EB%B2%95">PageView 위젯 사용법</a></li>
<li><a href="#pagecontroller">PageController</a></li>
<li><a href="#scrolldirection-%EC%98%B5%EC%85%98">scrollDirection 옵션</a></li>
<li><a href="#onpagechanged-%EC%86%8D%EC%84%B1">onPageChanged 속성</a></li>
<li><a href="#pageview-builder">PageView Builder</a></li>
<li><a href="#%EC%99%84%EB%A3%8C">완료</a></li>
</ul>
</div>
<h2 id="개요">개요</h2>
Flutter로 앱을 개발할 때, <code>TikTok</code>와 같이 화면 전체를 스크롤하는 기능을 구현하고 싶을 때가 있습니다. 이때 Flutter가 기본적으로 제공한느 <code>PageView</code> 위젯을 사용하면 간단하게 구현할 수 있습니다.
이번 블로그 포스트에서는 <code>PageView</code> 위젯을 사용하는 방법에 대해서 알아보겠습니다.
이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.
<ul>
<li>GitHub: <a href="https://github.com/dev-yakuza/study-flutter/tree/main/widget/page_view" rel="nofollow noreferrer" target="_blank">https://github.com/dev-yakuza/study-flutter/tree/main/widget/page_view</a></li>
</ul>
<h2 id="pageview-위젯">PageView 위젯</h2>
Flutter에서 제공하는 <code>PageView</code> 위젯은 스크롤을 통해 화면 전체를 이동시키는 위젯입니다. <code>PageView</code> 위젯은 <code>children</code> 속성을 통해 여러 개의 위젯을 전달하여 페이지를 구성할 수 있습니다.
<picture>
 <source srcset="/assets/images/category/flutter/2024/page_view/page_view_scroll_vertical.gif" type="image/avif">
 <source srcset="/assets/images/category/flutter/2024/page_view/page_view_scroll_vertical.gif" type="image/webp">
 <img src="https://deku.posstree.com/assets/images/category/flutter/2024/page_view/page_view_scroll_vertical.gif" alt="Flutter - PageView widget scroll vertical">
</picture>
공식 문서를 통해 <code>PageView</code> 위젯에 대한 자세한 정보를 확인할 수 있습니다.
<ul>
<li>공식 문서: <a href="https://api.flutter.dev/flutter/widgets/PageView-class.html" rel="nofollow noreferrer" target="_blank">PageView class</a></li>
</ul>
<h2 id="pageview-위젯-사용법">PageView 위젯 사용법</h2>
<code>PageView</code>는 Flutter가 기본적으로 제공하는 위젯이므로, 다음과 같이 <code>PageView</code> 위젯을 간단하게 사용할 수 있습니다.
<pre tabindex="0" data-language="dart"><code>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,
 ),
 ],
 ),
 );
 }
}</code></pre>
<code>PageView</code> 위젯의 <code>children</code>에 화면에 표시할 위젯을 함께 전달하면 다음과 같이 화면 전체를 스크롤하여 페이지를 이동할 수 있게 됩니다.
<picture>
 <source srcset="/assets/images/category/flutter/2024/page_view/page_view_scroll_horizontal.gif" type="image/avif">
 <source srcset="/assets/images/category/flutter/2024/page_view/page_view_scroll_horizontal.gif" type="image/webp">
 <img src="https://deku.posstree.com/assets/images/category/flutter/2024/page_view/page_view_scroll_horizontal.gif" alt="Flutter - PageView widget scroll horizontal">
</picture>
여기서는 쉽게 확인하기 위해 <code>Container</code> 위젯을 사용하였습니다.
<h2 id="pagecontroller">PageController</h2>
<code>PageController</code>를 사용하면 초기에 표시할 페이지를 결정할 수 있습니다.
<pre tabindex="0" data-language="dart"><code>class MyHomePage extends StatelessWidget {
 final pageController = PageController(
 initialPage: 1,
 );

 MyHomePage({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: PageView(
 controller: pageController,
 children: [
 ...
 ],
 ),
 );
 }
}</code></pre>
<code>PageController</code>의 <code>initialPage</code> 속성에 처음 표시될 페이지의 인덱스를 설정할 수 있습니다. 이렇게 수정하고 앱을 다시 실행해보면, 초기에 표시되는 페이지가 변경된 것을 확인할 수 있습니다.


<code>PageView</code> 위젯은 <code>scrollDirection</code> 속성을 통해 스크롤 방향을 설정할 수 있습니다. 기본적으로 <code>scrollDirection</code> 속성은 <code>Axis.horizontal</code>로 설정되어 있습니다만, 이를 <code>Axis.vertical</code>로 설정하여 수직 방향으로 스크롤할 수 있습니다.
<pre tabindex="0" data-language="dart"><code>PageView(
 controller: pageController,
 scrollDirection: Axis.vertical,
 children: [
 ...
 ],
)</code></pre>
이렇게 수정하고 실행하면, 다음과 같이 수직 방향으로 스크롤할 수 있는 페이지를 확인할 수 있습니다.
<picture>
 <source srcset="/assets/images/category/flutter/2024/page_view/page_view_scroll_vertical.gif" type="image/avif">
 <source srcset="/assets/images/category/flutter/2024/page_view/page_view_scroll_vertical.gif" type="image/webp">
 <img src="https://deku.posstree.com/assets/images/category/flutter/2024/page_view/page_view_scroll_vertical.gif" alt="Flutter - PageView widget scroll vertical">
</picture>
<h2 id="onpagechanged-속성">onPageChanged 속성</h2>
<code>PageView</code> 위젯은 <code>onPageChanged</code> 속성을 통해 페이지가 변경될 때 호출되는 콜백 함수를 설정할 수 있습니다. 이를 통해 페이지가 변경될 때 추가적인 작업을 수행할 수 있습니다.
<pre tabindex="0" data-language="dart"><code>PageView(
 controller: pageController,
 onPageChanged: (index) {
 print('Page changed to $index');
 },
 children: [
 ...
 ],
)</code></pre>
<h2 id="pageview-builder">PageView Builder</h2>
<code>PageView</code> 위젯은 <code>PageView.builder</code> 생성자를 통해 동적으로 페이지를 생성할 수 있습니다. <code>PageView.builder</code> 생성자는 <code>itemBuilder</code> 속성을 통해 페이지를 생성하는 함수를 전달할 수 있습니다.
<pre tabindex="0" data-language="dart"><code>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,
 );
 },
)</code></pre>
<h2 id="완료">완료</h2>
이번 블로그 포스트에서는 Flutter에서 기본적으로 제공하는 <code>PageView</code> 위젯을 사용하여 페이지 전체를 스크롤하는 방법에 대해서 알아보았습니다. <code>PageView</code> 위젯을 사용하면 간단하게 페이지 전체를 스크롤할 수 있으며, <code>scrollDirection</code> 속성을 통해 스크롤 방향을 설정할 수 있습니다.
<code>PageView</code>를 사용하면 <code>TikTok</code>와 같이 화면 전체를 스크롤하는 기능을 구현할 때 유용하게 사용할 수 있습니다. 만약, 구현중인 앱이 화면 전체를 스크롤하는 기능이 필요하다면, <code>PageView</code> 위젯을 사용하여 구현해보세요. <code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code> <h2>앱 홍보</h2> <div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다. </div> <h2>책 홍보</h2> </article></div>

dev-yakuza

Flutter에서 기본적으로 제공하는 PageView 위젯을 사용하여 페이지 전체를 스크롤하는 방법에 대해서 설명합니다.

[Flutter] PageView 위젯 사용법

댓글