[ Flutter ] PageView 자동 스크롤 기능 넣기!

 대부분 스타트업에서 만든 플랫폼 서비스 앱의 첫 메인페이지를 들어가게 되면 보통 우리는 위 사진처럼 상단에 프로모션 광고가 보이는 대형 PageView를 보게됩니다.

 그리고 일정 시간마다 이들은 돌아가면서 다른 광고들을 순차적으로 보여줍니다. 이번 포스팅에서는 Flutter에서 PageView에서 일정 시간마다 자동으로 스크롤되는 기능을 구현해보겠습니다!

반응형

---

PageView 준비하기

 당연하겠지만 우선 PageView가 있어야겠죠? 여기에 대한 코드를 준비해줍니다.

PageView.builder(
                        pageSnapping: true,
                        controller: _PageController,
                        itemCount: itemList.length,
                        onPageChanged: (value) {
                         
                        },
                        itemBuilder: (context, index) {
                          return Container(
                            child: Image.asset(
                                bannerPNG[index],
                                width: screenWidth,
                                height: screenWidth * (140/360),
                                fit: BoxFit.cover),
                          );
                        },
                      ),

 위 PageView.builder에서 우리가 주목해야할 부분은 두 가지 입니다.

• controller
• onPageChanged

---

 자동 스크롤 기능 넣기

 이제 initState() 메서드 내에 자동 스크롤 기능을 넣겠습니다.

int currentPage = 0;
PageController _PageController = PageController(
    initialPage: 0,
  );
  
@override
  void initState() {
    super.initState();

    Timer.periodic(Duration(seconds: 5), (Timer timer) {
      if (currentPage < 2) {
        currentPage++;
      } else {
        currentPage = 0;
      }

      _PageController.animateToPage(
        currentPage,
        duration: Duration(milliseconds: 350),
        curve: Curves.easeIn,
      );
    });
  }

 필요한 변수는 다음과 같습니다.

• currentPage
• _PageController

 저와 변수명이 같다는 가정하에 initState내에 저 코드만 그대로 넣어주시면 자동 스크롤 기능 구현 끝입니다! 만약 넘겨지는 시간을 조정하고 싶다면 Timer.periodic 내 Duration 값을 수정해주시면 됩니다.

 실행시키면 다음과 같은 결과가 나옵니다