<Flutter> routes & Navigation

routes

• push navigator
  이전 화면의 맨 위에 새 화면을 올려놓는 방식으로 작동
  < 아이콘이 생기면서 이전 페이지로 돌아갈 수 있다

 Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => const InterestsScreen(),
          ),
        );

로그인 후에 홈화면으로 navigation 했을때, 이전 버튼이 생기면 다시 로그인폼으로 돌아갈 수 있기 때문에 push navigator가 적절하지 않다

• pushAndRemoveUntil
  pushNaigator처럼 stack의 맨 위에 새 화면을 push 한 다음 뒤에 있는 screen 중 지우고 싶은 화면의 수를 선택할 수 있다

 Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(
            builder: (context) => const InterestsScreen(),
          ),
          (Route){
            //이전 route를 유지할지 안 할지 결정하는 function 
            print(Route); //모든 이전 경로를 확인할 수 있다 
            return false;
          },
        );

stateful navigation

화면에 state가 필요없는 경우(탭을 누를 때마다 페이지가 새로만들어지는 상태)
한번에 하나의 화면만 렌더링

final screens = [
    StfScreen(
      key: GlobalKey(),
    ),
    StfScreen(
      key: GlobalKey(),
    )
  ];

body: screens.elementAt(_selectedIndex),

하지만 경우에 따라 모든 화면을 그리긴 하지만 보이지는 앖게, 즉 사용자에게 시각적으로 보이지 않게 하는 방법이 피요하다
예를들어 유튜브나 인스타 피드를 스크롤 내려서 보다가 다른 탭을 눌렸다가 다시 피드로 돌아간다고 해서 스크롤을 맨 위에서부터 시작하도록 변경되는 것이 아닌 아까 스크롤하던 그 상태에서 다시 동작한다
이런 기능을 가능하게 해주는 widget이 Offstage

 body: Stack(
        children: [
          Offstage(
            offstage: _selectedIndex != 0, //화면을 보여줄지말지 결정
            child: const StfScreen(),
          ),
          Offstage(
            offstage: _selectedIndex != 1, //화면을 보여줄지말지 결정
            child: const StfScreen(),
          ),
          Offstage(
            offstage: _selectedIndex != 3, //화면을 보여줄지말지 결정
            child: const StfScreen(),
          ),
          Offstage(
            offstage: _selectedIndex != 4, //화면을 보여줄지말지 결정
            child: const StfScreen(),
          ),
        ],
      ),