페이지뷰 (PageView)

한 화면에서 여러 페이지를 넘겨볼 수 있도록 구현되는 위젯 입니다. 페이지뷰를 사용하면 사용자는 여러 페이지를 스와이프(swipe) 동작으로 편리하게 이동할 수 있습니다.

기본 페이지뷰

가로 방향 전환

PageView(
        pageSnapping: true,
        scrollDirection: Axis.horizontal,
        controller: PageController(initialPage: 0),
        children: <Widget>[
          Container(
              color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
          Container(
              color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
          Container(
              color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
          Container(
              color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
          Container(
              color: Colors.cyan[400], child: Center(child: Text('Page 5')))
        ],
      );

pageSnapping: 페이지 뷰에서 스냅 스크롤링을 사용할지 여부를 나타내는 속성입니다. true로 설정하면 페이지뷰가 한 번에 한 페이지 씩 스크롤 됩니다.
scrollDirection: 페이지뷰의 스크롤 방향을 지정하는 속성입니다. Axis.horizontal로 설정하면 가로 방향으로 페이지를 넘길 수 있습니다.
controller: 페이지뷰를 제어하는 컨트롤러 입니다. 이 컨트롤러를 사용하여 특정 페이지로 이동할 수 있습니다.
children: 페이지 뷰에 표시할 페이지들을 나타내는 위젯 목록입니다.

위의 코드를 통해 생성된 페이지뷰는 사용자에게 여러 페이지를 제공하며, 사용자는 좌우로 스와이프 하여 페이지를 전환할 수 있습니다. 페이지뷰를 스와이프 하면 컨테이너 위젯 내용이 변경되어 해당 페이지의 내용이 화면에 나타납니다.

활용 예시

이미지 갤러리 앱에서 이미지 간 미리보기
화면 안내 및 튜토리얼 페이지
제품 또는 콘텐츠 목록에서 세부 정보 페이지

페이지뷰 위젯은 사용자 경험을 향상시키는 데 유용한 도구 중 하나 입니다. 여러 페이지를 가로 방향으로 넘겨가며 정보를 제공하거나 다양한 콘텐츠를 표시하는 데 활용할 수 있습니다.

세로 방향 전환

PageView(
        pageSnapping: true,
        scrollDirection: Axis.vertical,
        controller: PageController(initialPage: 0),
        children: <Widget>[
          Container(
              color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
          Container(
              color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
          Container(
              color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
          Container(
              color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
          Container(
              color: Colors.cyan[400], child: Center(child: Text('Page 5')))
        ],
      );

pageSnapping: 페이지뷰에서 스냅 스크롤링을 사용할지 여부를 나타내는 속성입니다. true로 설정하면 페이지뷰가 한 번에 한 페이지씩 스크롤됩니다.
scrollDirection: 페이지뷰의 스크롤 방향을 지정하는 속성입니다. Axis.vertical로 설정하면 세로 방향으로 페이지를 넘길 수 있습니다.
controller: 페이지뷰를 제어하는 컨트롤러입니다. 이 컨트롤러를 사용하여 특정 페이지로 이동할 수 있습니다.
children: 페이지뷰에 표시할 페이지들을 나타내는 위젯 목록입니다.

위의 코드를 통해 생성된 페이지뷰는 사용자에게 여러 페이지를 제공하며, 사용자는 위아래로 스와이프 하여 페이지를 전환할 수 있습니다. 페이지뷰를 스와이프 하면 컨테이너 위젯 내용이 변경되어 해당 페이지의 내용이 화면에 나타납니다.

활용 예시

전화번호부 앱에서 연락처 목록을 표시하고 세부 정보 페이지로 이동
홈 화면에서 여러 정보 블록을 스크롤하면서 콘텐츠를 표시
다양한 종류의 설문조사나 양식을 작성하는 어플리케이션

세로 방향으로 페이지를 넘길 수 있는 페이지뷰 위젯은 다양한 애플리케이션에서 사용자에게 편리하고 직관적인 경험을 제공하는 데 활용됩니다. 사용자는 위아래로 스와이프 하면서 여러 페이지를 탐색하고 정보를 확인할 수 있습니다.

indicator

IndicatorPageView(
        children: <Widget>[
          Container(
              color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
          Container(
              color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
          Container(
              color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
          Container(
              color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
          Container(
              color: Colors.cyan[400], child: Center(child: Text('Page 5')))
        ],
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.cyan[100],
        activeDotColor: Colors.cyan,
        type: WormType.thin,
        offset: 16.0,
        spacing: 10.0,
        radius: 20,
        strokeWidth: 1.0,
        paintStyle: PaintingStyle.fill,
        count: 5,
        scrollDirection: Axis.horizontal,
        height: MediaQuery.of(context).size.height * 0.8,
        padding: const EdgeInsets.only(top: 6),
      );

인디케이터로 제어할 수 있는 페이지뷰를 구현합니다.

애니메이션 페이지뷰

페이지 전환 시에 애니메이션 효과를 구현합니다.

가로 방향 전환

AnimationPageView(
        Rotate.x,  
        controller: PageController(),
        currentPageValue: 0.0,
        pages: [
          Container(
              color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
          Container(
              color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
          Container(
              color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
          Container(
              color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
          Container(
              color: Colors.cyan[400], child: Center(child: Text('Page 5')))
        ],
      );

페이지뷰 위젯의 화면을 가로 방향으로 전환합니다.

세로 방향 전환

AnimationPageView(
        Rotate.yz,
        controller: PageController(),
        currentPageValue: 0.0,
        pages: [
          Container(
              color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
          Container(
              color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
          Container(
              color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
          Container(
              color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
          Container(
              color: Colors.cyan[400], child: Center(child: Text('Page 5')))
        ],
      );

페이지뷰 위젯의 화면을 세로 방향으로 전환합니다.

3D 효과

EffectPageView(
        controller: PageController,
        currentPageValue: 0.0,
        pages: [
          Container(
              color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
          Container(
              color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
          Container(
              color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
          Container(
              color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
          Container(
              color: Colors.cyan[400], child: Center(child: Text('Page 5')))
        ],
      );

페이지 전환 시에 3D 애니메이션 효과를 구현합니다.

PreviousQR코드 Next공통모듈

Last updated 10 months ago