Flutter - pageView, onPageChanged

pageView 는 말그대로 여러개의 뷰가 페이지를 이뤄 슬라이드로 넘기는 식으로 구성되어 있다. 

 

 

https://api.flutter.dev/flutter/widgets/PageView-class.html

PageView class - widgets library - Dart API

 

나는 이 페이지뷰를 이용해서 화면이 바뀔때(유저가 슬라이드를 해서 다음 화면으로 넘어갈때)를 감지하여 고정된 갯수의 view가 아닌 

슬라이드 한 만큼 동적으로 view생성을 구현하고 싶었다. 

 

일단 그 동작으로 감지하려면 onPageChanged 라는 프로퍼티를 쓰면 된다. 

처음 공식문서의 예제는 stateless로 되어 있으므로 stateful로 바꿔준다음 

 

onPageChanged 에 들어갈 함수를 정의하고 넣어주면 된다. 

 

 

class PageViewWidget extends StatefulWidget {
  const PageViewWidget({Key? key}) : super(key: key);

  @override
  State<PageViewWidget> createState() => _PageViewWidgetState();
}

class _PageViewWidgetState extends State<PageViewWidget> {
  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();
    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      onPageChanged: onchahged,
      children: const <Widget>[
        Center(
          child: Text('First Page'),
        ),
        Center(
          child: Text('Second Page'),
        ),
        Center(
          child: Text('Third Page'),
        ),
      ],
    );
  }
  onchahged(int index) {
    setState(() {
        print('페이지 변경');
    });
  }

}

 

그럼 화면 전환을 감지했으니 

새로운 view 만들 코드를 onchanged 에 넣으면 된다라고 하려했는데 

 

PageVeiw.builder를 사용하여 itemBuilder를 통해 view를 만들어준다. 

return PageView.builder(
      controller: controller,
      itemBuilder: (context, index) {
        return Container(
          child: Center(
            child: Text(index.toString()),
          ),
        );
      },

 

 

itembuilder의 인자중 하나인 index를 text로 나타낸것이다. 

슬라이드 한 만큼 view가 만들어진다.