[소셜차트] 앱 제작기 #10. Tap to scroll top

bottom tab navigator에서 tab을 누르면 스크롤이 처음으로 올라가고, 또 tab을 누르면 뒤로가기. IOS에서 흔한 동작이야.. 그런데 ㅋㅋㅋㅋ 결론부터 이야기 하자면 못했어..... ㅅㅂ...

React Native에서는 react navigation으로 여차저차 구현했는데;;; Flutter에서는 좌절이네;;; ㅋㅋㅋㅋ 다 내 머리가 나쁜 탓이지! ㅠㅠㅠㅠㅠㅠㅠㅠ

사실 flutter에서 scroll on top 기능은 간단해.👇 

controller.scrollController.animateTo(
    0.0,
    duration: const Duration(milliseconds: 300),
    curve: Curves.linear,
  );
  
//or
  
controller.scrollController.jumpTo(0);

그냥 스크롤 속성을 가진 위젯에 controller를 물려주고 animateTo로 부드럽게 움직이거나 jumpTo로 애니메이션 없이 이동하거나 하면 끝이야. 그런데 문제는 저 컨트롤러를 tab navigator 위젯까지 끌어와야 한다는 거지. 그런데 나같은 경우 거의 대부분이 스크롤이고 -_-;; 엄청 많아... 그래서 일일이 저 컨트롤러들을 가져오는건 불합리한 방식이지... 그래서 여러가지 방법을 시도해봤는데 ㅎㅎㅎ 다 실패. indexedStack으로 되어 있는 nested navigator에서는 방법이 없는 거 같아. ㅠㅠ

 

nested navigator에서는 현재 route 조차 가져올 수 없었어.

ModalRoute.of(context).settings.name

이런식으로 읽어올 수 있다고 구글링 해보면 많이 나오는데;; nested navigator에서는 전부 "/" ㅋㅋ

아예 다른 컨텍스트를 사용하나보지? 하고 Get.nestedKey를 이용해서 해당 route의 context로 접근해도 실패!👇

ModalRoute.of(Get.nestedKey(index)!.currentContext!).settings.name

그래 현재 route는 그렇다치고;; scroll to top만 하면 되니까! 그걸 위해 태어난게 => PrimaryScrollController라고 해. 스크롤을 사용하고 있는 위젯 밖에서 ScrollController를 읽어올 수 있다고 하더라고 ㅎ 그래서 시도해봤지!

PrimaryScrollController.of(context)

no client! ㅋ 그래서 다시 nestedkey를 넣어서!

PrimaryScrollController.of(Get.nestedKey(index)!.currentContext!)

no client!! 크하하하하핳.ㅎ...하... ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 

Primary는 no clients, ModalRoute는 "/" ㅠㅠ

그렇다고 진짜 tab navigator에서 모든 페이지의 컨트롤러를 다 가져올 수는 없잖아.. ㅠㅠ 총 탭이 4개이고 home tab만 4개 page가 있고 전부 scrollview인데 ㅠㅠ 그럼...이런 짓을 해야 한단 말야??????👇👇

onTap:(index){
  if(controller.currentIndex.index == index){
    switch(index){
    case: 0://home tab
      switch(HomeTabController.to.index){
        case 0://home screen
          if(HomeScreenController.to.scrollControll.offset > 0){
            HomeScreenController.to.scrollControll.jumpTo(0);
          } else {
            Get.back(id: hometabId);
          }
          break;
        case 1://insightcard screen
        ...
      }
      break;
    case: 1://explore tab
    case: 2://notice tab
    case: 3://profile tab
    default:
      break;
    }
  }
}

 

많이 고민했는데 도저히 이 짓거리는 못하겠더라고... 꾸역꾸역 동작은 하겠지만 나중에 문제 생길게 불 보듯 뻔해.. 수정도 힘들거고. 그래서 과감하게 포기했어. 그리고 그냥 스크린별로 scroll to top 역할을 하는 floating button 넣는 것으로 결정했어. 나중에 해결책을 찾으면 수정해야지.

무지와 무능의 결과물! ㅠㅠ

누가 방법 좀 알면 알려줘! 제발!

.. .아 오늘은 낙오해서 일찍 집에 가야 되겠다... ㅠㅠ 힘들다.. ㅠㅠ