PageView

하요·2024년 6월 6일

Flutter Widget of the Week

목록 보기

10/18

Flutter에서 페이지 간 전환하기: PageView

PageView 위젯은 사용자가 수평 또는 수직으로 페이지를 넘기는 인터페이스를 제공합니다. 이 위젯을 사용하면 스와이프 제스처로 페이지를 전환할 수 있으며, 일반적으로 이미지 슬라이더, 튜토리얼 화면, 페이지 기반 네비게이션 등에 사용됩니다.

주요 속성

controller: 페이지의 현재 위치를 제어하는 데 사용되는 PageController입니다. 초기 페이지 설정, 페이지 간 전환 애니메이션 등을 관리할 수 있습니다.
scrollDirection: 페이지가 스크롤되는 방향을 지정합니다. Axis.horizontal(기본값) 또는 Axis.vertical을 설정할 수 있습니다.
reverse: 스크롤 방향을 반대로 설정합니다. 기본값은 false입니다.
onPageChanged: 페이지가 변경될 때 호출되는 콜백 함수입니다. 현재 페이지 인덱스를 매개변수로 전달합니다.
physics: 스크롤 동작을 정의하는 ScrollPhysics를 지정합니다. 예를 들어, BouncingScrollPhysics나 ClampingScrollPhysics를 설정할 수 있습니다.

주요 활용도

이미지 슬라이더: 여러 이미지나 콘텐츠를 슬라이더 형식으로 표시할 수 있습니다.
튜토리얼 화면: 앱의 초기 튜토리얼이나 온보딩 화면을 페이지 형식으로 구현할 수 있습니다.
탭 기반 네비게이션: 각 탭에 해당하는 콘텐츠를 페이지로 관리할 수 있습니다.

코드 예제

아래 예제는 PageView를 사용하여 수평으로 전환되는 세 개의 페이지를 구현하는 방법을 보여줍니다.

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: PageView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              color: Colors.red,
              child: Center(
                child: Text('Page 1', style: TextStyle(fontSize: 24, color: Colors.white)),
              ),
            ),
            Container(
              color: Colors.green,
              child: Center(
                child: Text('Page 2', style: TextStyle(fontSize: 24, color: Colors.white)),
              ),
            ),
            Container(
              color: Colors.blue,
              child: Center(
                child: Text('Page 3', style: TextStyle(fontSize: 24, color: Colors.white)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

추가 팁

PageController 사용: PageController를 사용하여 특정 페이지로 이동하거나, 현재 페이지 인덱스를 확인할 수 있습니다.
자동 슬라이더: Timer를 활용하여 일정 시간마다 페이지를 자동으로 전환하는 슬라이더를 구현할 수 있습니다.
반응형 디자인: 다양한 화면 크기와 비율에 대응할 수 있도록 반응형 디자인을 고려하는 것이 중요합니다.

스크롤 위치 유지하기

PageView는 PageStorage를 사용하여 스크롤 위치를 세션 동안 유지하려고 시도합니다. 이를 비활성화하려면 PageController의 keepPage를 false로 설정할 수 있습니다. 활성화된 경우, 이 위젯의 키로 PageStorageKey를 사용하는 것이 권장됩니다.