Flutter View 위젯 - PageView

Flutter는 화면에 보여지는 모든 요소가 위젯으로 구성되어 있습니다.

화면에 출력되는 시각적 구성 요소를 다루는 위젯을 View 위젯이라고 합니다. 

 

View위젯 중에서도 슬라이드형 화면 전환을 위한 PageView 위젯에 대해 알아보겠습니다.

 

📄 PageView - 페이지 단위로 넘기는 UI

- PageView 위젯은 스와이프 제스처로 스크롤하거나 페이징 할 수 있는 위젯입니다.

- 사용 예시: 온보딩 화면, 이미지 슬라이더, 뉴스 뷰어 등

📌 자주 사용하는 PageView 위젯의 옵션

1. children
- 슬라이드를 사용할 자식 위젯을 만들어 줄 수 있습니다.
  위젯 타입 리스트라서 간단한 이미지부터 복잡한 레이아웃 위젯 UI도 넣을 수 있습니다.

//이 코드는 빨강 > 초록 > 파랑 하면을 스와이프하며 넘길 수 있습니다.

PageView(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ],
)​

2. scrollDirection
- 슬라이드 방향을 결정할 수 있습니다.
  기본값은 horizontal(가로) 방향이고(Axis.horizontal),
  옵션을 설정하여 세로 방향(Axis.vertical)으로 슬라이드 페이지를 전환시킬 수 있습니다.

//PageView 세로 스크롤 옵션

scrollDirection: Axis.vertical,​

3. controller
- controller 옵션에 등록할 PageController 클래스를 통해서
  원하는 스크롤 위치나 페이지로 이동하게 하거나
  현재 스크롤링되고 있는 위치를 실시간으로 전달받는 등의 이벤트 처리를 할 수 있습니다.

4. pageSnapping
- PageView 페이지 전환 시 자동으로 페이지 전체를 볼 수 있도록 자석 효과가 있는데
  이 옵션을 false를 주게 되면 사용자가 움직이는 만큼 이동하고 고정되게 처리할 수 있습니다. 

//PageView pageSnapping 옵션

 pageSnapping: false,

5. onPageChanged
- 페이지가 변경될 때 실행되는 콜백 함수를 등록할 수 있는 옵션입니다.
- 사용자가 스와이프하거나 버튼으로 페이지를 이동할 때,
   콜백 함수가 호출되며 현재 보고 있는 페이지의 번호(Index)를 반환해 줍니다.
- 이를 활용하면 페이지별 이벤트 처리나 페이지 인디케이터 제어 등에 사용할 수 있습니다.

onPageChanged: (int index) {
  showDialog(
    context: context,
    builder: (context) => CupertinoAlertDialog(
      content: Text('$index 페이지 활성화'),
    ),
  );
},​

 

PageView는 단순한 이미지 슬라이더부터 복잡한 온보딩 시스템까지 구현 가능한 위젯입니다.