기본 페이지뷰
가로 방향 전환
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 애니메이션 효과를 구현합니다.