Flutter에서 PageView를 사용하는 방법은 무엇인가요?

Flutter에서 `PageView`는 여러 페이지를 수평 또는 수직으로 스와이프하여 탐색할 수 있는 위젯입니다. `PageView`는 주로 여러 화면을 슬라이드 방식으로 전환할 때 사용되며, 사용자가 페이지를 쉽게 탐색할 수 있도록 도와줍니다. 이 위젯은 다양한 속성과 메서드를 제공하여 사용자 경험을 개선할 수 있습니다. 기본 사용법 `PageView`를 사용하기 위해서는 Flutter의 기본 위젯을 사용하여 구현할 수 있습니다. 아래는 `PageView`의 기본적인 사용 예제입니다. ```dart import 'package:flutter/material.

dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('PageView Example')), body: MyPageView(), ), ); } } class MyPageView extends StatelessWidget { @override Widget build(BuildContext context) { return PageView( children: [ Container( color: Colors.red, child: Center(child: Text('Page 1', style: TextStyle(fontSize: 30, color: Colors.white))), ), Container( color: Colors.green, child: Center(child: Text('Page 2', style: TextStyle(fontSize: 30, color: Colors.white))), ), Container( color: Colors.blue, child: Center(child: Text('Page 3', style: TextStyle(fontSize: 30, color: Colors.white))), ), ], ); } } ``` 주요 속성 1. children : `PageView`에 표시할 위젯 목록입니다. 각 위젯은 페이지로 표시됩니다. 2. controller : `PageController`를 사용하여 페이지 전환을 제어할 수 있습니다. 이를 통해 특정 페이지로 이동하거나 페이지 전환 애니메이션을 조정할 수 있습니다. 3. onPageChanged : 페이지가 변경될 때 호출되는 콜백 함수입니다. 페이지 인덱스를 인자로 받아서 페이지 변경에 따른 동작을 정의할 수 있습니다. 4.

physics : 페이지 스크롤의 물리적 특성을 정의합니다. 예를 들어, `NeverScrollableScrollPhysics`를 사용하면 사용자가 페이지를 스와이프할 수 없게 만들 수 있습니다. PageController 사용하기 `PageController`를 사용하면 페이지를 프로그래밍적으로 제어할 수 있습니다. 아래는 `PageController`를 사용하는 예제입니다. ```dart class MyPageView extends StatefulWidget { @override _MyPageViewState createState() => _MyPageViewState(); } class _MyPageViewState extends State { PageController _pageController; int _currentPage = 0; @override void initState() { super.initState(); _pageController = PageController(); } @override void dispose() { _pageController.dispose(); super.

dispose(); } void _onPageChanged(int index) { setState(() { _currentPage = index; }); } @override Widget build(BuildContext context) { return Column( children: [ Expanded( child: PageView( controller: _pageController, onPageChanged: _onPageChanged, children: [ 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'))), ], ), ), Text('Current Page: $_currentPage'), ElevatedButton( onPressed: () { _pageController.

jumpToPage(1); // 2번째 페이지로 이동 }, child: Text('Go to Page 2'), ), ], ); } } ``` 페이지 전환 애니메이션 `PageView`는 기본적으로 페이지 전환 애니메이션을 제공합니다. 그러나 `PageController`를 사용하여 페이지를 전환할 때 애니메이션을 조정할 수 있습니다. 예를 들어, `animateToPage` 메서드를 사용하여 부드럽게 페이지를 전환할 수 있습니다. ```dart _pageController.animateToPage( 1, duration: Duration(milliseconds: 300), curve: Curves.easeInOut, ); ``` 결론 Flutter의 `PageView`는 여러 페이지를 쉽게 탐색할 수 있는 강력한 도구입니다. 다양한 속성과 메서드를 활용하여 사용자 경험을 개선할 수 있으며, `PageController`를 통해 페이지 전환을 세밀하게 제어할 수 있습니다. 이를 통해 앱의 UI를 더욱 매력적으로 만들 수 있습니다.

작성자: 김재영 [비회원] | 작성일자: 2개월 전
조회수: 32 | 댓글: 0 | 좋아요: 0 | 싫어요: 0

내용이 부정확하다면 싫어요를 클릭해주세요.

글쓰기

수정