[Flutter] swipe page to show next week data; 주간 달력 ; 옆으로 밀어서 다음주 데이터 보여주기

motivation

주간 달력을 보여주기 위해 화면을 옆으로 밀면 페이지가 넘어가면서 새로운 데이터를 요청함

 

필요한 기능

페이지를 넘겨주기(무한 페이지)

넘겼을때 어느 방향으로 이동했는지 체크

 

1. 옆으로 밀어서 페이지 넘기기 : PageView

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

PageView class - widgets library - Dart API

 

PageView.builder를 사용하되 itemCount 없이 PageController에 inittialPage를 999와 같이 큰 수로 설정해두면 -999 ~ infinite 로 페이지를 이동할 수 있다.

final controller = new PageController(initialPage: 999);
 ...

new PageView.builder(
      controller: controller,
      itemBuilder: (context, index) {
        return new Center(
          child: new Text('${index % 5}'),
        );
      },
)

 

https://stackoverflow.com/questions/49161719/is-there-a-way-to-have-an-infinite-loop-using-pageview-in-flutter

Is there a way to have an infinite loop using PageView in Flutter?

 

2. 넘겼을때 어느 방향으로 이동했는지 체크

왼쪽으로 이동하면 이전 주의 데이터를 요청해야할 것이고 오른쪽으로 이동하면 다음주 데이터를 요청할 것인데 이것은 어떻게 알 수 있을까?

 

onPageChanged 는 페이지가 이동했을때 하고 싶은 동작을 구현할 수 있고 initialPage로 설정된 값으로부터 이동한 만큼 +-1 값을 뱉어준다. 어느 방향으로 이동했는지 모니터링하기 위해서 currentWeekPage를 선언해주었다.

  PageController? pageViewController;
  int? currentWeekPage;

  @override
  void initState() {
    pageViewController = PageController(initialPage: 999);
    currentWeekPage = 999;
    super.initState();
  }

 

페이지가 이동함에 따라 원하는 동작을 수행하고 현재의 페이지 값을 변경해주었다.

PageView.builder(
                onPageChanged: (index) {
                  // print('index before change page: $index');
                  // print('currentWeekPage before change page: $currentWeekPage');
                  if (index < currentWeekPage!) {
                    // print('지난주를 요청');
                    setState(() {
                      initDate = initDate.subtract(Duration(days: 7));
                      deliveryWeekEvent(initDate);
                      _weekOfMonth = weekCalendarHelper.weekOfMonthForSimple(initDate);
                      currentWeekPage = index;
                    });
                    // print(initDate);
                    // print("after currentWeekPage : $currentWeekPage");
                  } else if (index > currentWeekPage!) {
                    // print('다음주를 요청');
                    setState(() {
                      initDate = initDate.add(Duration(days: 7));
                      deliveryWeekEvent(initDate);
                      _weekOfMonth = weekCalendarHelper.weekOfMonthForSimple(initDate);
                      currentWeekPage = index;
                    });
                    // print(initDate);
                    // print("after currentWeekPage : $currentWeekPage");
                  }
                },
                controller: pageViewController,
                itemBuilder: (context, index) {
                  return _buildWeekCalendar();
                })

 

주차 구하는 방법은 cyb9701님 블로그 참조

https://velog.io/@cyb9701/Util-N%EC%9B%94-N%EC%A3%BC%EC%B0%A8%EB%AA%87%EC%A3%BC%EC%B0%A8-%EA%B5%AC%ED%95%98%EA%B8%B0

Flutter | N월 N주차(몇주차) 구하기