[Flutter] Flutter에서 NavigationBarPage 새로고침을 관리하는 방법

Flutter 앱을 개발하면서 네비게이션 페이지를 새로 고치는 것은 종종 필요한 작업입니다. 특히 상위 위젯에서 하위 위젯의 화면을 다시 재 생성하는 것이 쉽지 않은데요. 이번 글에서는 Flutter 앱에서 페이지를 새로 고치는 방법을 살펴보겠습니다.

저 같은 경우에는 여러 방법을 적용해보다가 상위 위젯에서 하위 위젯을 조건부로 표시하여 페이지를 새로 고치는 방법을 선택했습니다. 예를 들어, 선택된 탭의 인덱스와 특정 상태를 기준으로 하위 위젯을 표시해서, SizedBox로 표시했다가 원래 페이지를 표시해주면, 기존 페이지가 dispose됐다가 다시 initialized되면서 새로고침 되는것을 확인할수 있다.

Widget _navigationBody(MainTabbarViewModel value) {
  return PageView(
    controller: pageController,
    onPageChanged: onPageChanged,
    children: [
      Page0(),
        (selectedIndex==1&&isRefresh)?const SizedBox(): Page1(),
       (selectedIndex==2&&isRefresh)?const SizedBox(): Page2(),
       (selectedIndex==3&&isRefresh)?const SizedBox(): Page3(),
    ],
    physics: NeverScrollableScrollPhysics(), //
  );
}

  Widget _bottomNavigationBarWidget(MainTabbarViewModel value) {
    return BottomNavigationBar(
      showSelectedLabels: true,
      showUnselectedLabels: true,
      key: value.key,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
           icon: Text("page0"),
          label: 'page0',
        ),
        BottomNavigationBarItem(
          icon: Text("page1"),
          label: 'page1',
        ),
        BottomNavigationBarItem(
          icon: Text("page2"),
          label: 'page2',
        ),
        BottomNavigationBarItem(
          icon: Text("page3"),
          label: 'page3',
        ),
      ],
      currentIndex: selectedIndex,
      onTap: (index) async {
            if(selectedIndex==index){
              setState(() {
              isRefresh = true;
		      });
   
   			Future.delayed(Duration(milliseconds: 40)).whenComplete((){
            setState(() {
             isRefresh = false;
		    });
	      });
    }else{

      pageController.jumpToPage(index);
      setState(() {
	      selectedIndex = index;
	  });
    }
      },
    );
  }