[플러터] List View 애니메이션

Navigation bar에서 다른 페이지로 이동시에 화면이 부드럽게 전환되는 애니메이션을 본 적이 있을 것이다.

다른 위젯에서도 이를 적용해보자.

Lingory에 적용된 PageView

 

 

PageView

//컨트롤러 정의
PageController _pageController = new PageController(initialPage: 0);

PageView(
physics: NeverScrollableScrollPhysics(), //수동으로 이동이 불가능하도록 함
scrollDirection: Axis.horizontal, //가로로 이동
controller: _pageController, //컨트롤러
children: pages), //List<Widget>

이래도 되나 싶을 정도로 간단하다.

index 변수가 필요 없고 Controller에 의해서 제어된다.

physics에 다른 속성을 부여하면 사용자가 페이지를 넘길 수도 있다.

Controller는 아래의 함수들로 제어할 수 있다.

 

//애니메이션 없이 이동
pageController.jumpTo(currentPageIndex.toDouble());

//애니메이션 적용
pageController
.animateToPage(currentPageIndex,
duration: Duration(milliseconds: 500), curve: Curves.ease)

 

주의점

애니메이션을 위해 화면이 전환될 때 현재의 페이지와 그 다음 페이지가 함께 렌더링된다.

즉, 다음 페이지의 initState뿐만 아니라 현재 페이지의 initState가 한번 더 실행된다는 것이고, 현재 페이지에 setState가 실행된다는 것이다. 따라서 의도치않은 동작이 발생할 수 있다.

이를 해결하기 위해서는 initState에 Future.delayed를 삽입해 Animation의 Duration 만큼을 부여해주면 된다.

 

@override
void initState() {
    Future.delayed(Duration(microseconds: 500), () {
		... //실행할 함수
    });
    super.initState();
  }