PageView와 Timer

 

코드 설명 

 

 1) Timer 

 - 특정 시간 지난 후 일회성 혹은 지속적으로 함수를 실행 

 - periodic() : 주기적으로 콜백 함수를 실행한다. 

 - 보통 initState()에 두어서 초기화를 두고 실행시킨 다음 dispose()에 타이머를 종료하여 누수를 막는다. 

 

 //앱이 최초 랜더링 될 때 단 한 번만 실행
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // 상태바 색상 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    //타이머를 세팅해서 주기적으로 실행되도록 설정
    //build에 넣어두면 새로 만들 때마다 새롭게 빌드되어버려서 initState에 정의
    Timer.periodic(const Duration(seconds: 3), (timer) {
      // 다음 페이지가 무엇인지 컨트롤러에서 페이지를 찾는다
      int? nextPage = pageController.page?.toInt();

      if (nextPage == null) {
        return;
      }

      if (nextPage == 4) {
        nextPage = 0;
      } else {
        nextPage++;
      }

      pageController.animateToPage(
        nextPage,
        duration: const Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    });
  }

 

 2) PageView 

 - material 패키지에서 기본으로 제공 

 - 하위 위젯들을 드래그 하면 하나하나씩 보여준다. 

 - 컨트롤러를 통해서 PageView위젯을 제어할 수 있다. 이 또한 하나의 상태인듯 

 - build쪽이 아니라 State쪽에다가 선언해줌 

class _HomeScreenState extends State<HomeScreen> {
  //PageView를 제어할 컨트롤러 생성
  final PageController pageController = PageController();

 

 PageView(
          controller: pageController,
          children: [1, 2, 3, 4, 5]
              .map(
                (num) => Image.asset(
                  'asset/img/$num.png',
                  //fit: BoxFit.cover,
                  fit: BoxFit.fitWidth
                ),
              )
          // children은 위젯 리스트로 전해줘야한다.
              .toList(),
        ),

 

결과물

 

 

 

 

참고

《Must Have 코드팩토리의 플러터 프로그래밍 2판》의 스터디 내용 입니다.