스마트시대

NAVIGATOR 2 18 NAVIGATOR 2 18.1 GoRouter 18.2 Parameters 18.3 queryParams 18.4 CustomTransitionPage 본문

Programing/Flutter

NAVIGATOR 2 18 NAVIGATOR 2 18.1 GoRouter 18.2 Parameters 18.3 queryParams 18.4 CustomTransitionPage

스마트시대 2023. 5. 24. 22:11
728x90

앱이 커지거나 라우팅이 복잡해지면 navigator version2를 쓰는게 추천된다.

특히 웹에서 사용할 경우는navigator version1는 추천되지 않는다.

 

18.1 GoRouter

 

이렇게 새로 만들면 웹상에서도 이렇게 표시됨

 

path 이런식으로도 변경 가능(이게 최신 navigator 사용 방법)

경로로 쓰던 routeName이든 둘다 가능

 

GoRouter의 Go method에 대해서

pop, push와 다르게 카드 같은 stack구조(이전 화면 위에 다른 화면 올림)를 무시한다. route stack에 관계없이 별도의 위치로 이동시킴

 

위 스샷과 다르게 백버튼이 없다. 기존 stack과의 관계를 끊고 새로운 stack에서 시작되길 원할 때 유용하다.

 

18.2 Parameters

 

퀴리파라메터??????

변수를 가지고 있는 URL을 어떻게 다루는가?

/user/joon

/user/yourname 등

웹 설정에 많이 포커스한 설정 (18.1의 응용편)

URL의 파라메터를 가저와서 위젯에 이용하는 방식

 

 

18.3 queryParams

 

URL parameter

route에 다른 종류의 정보를 전달하는 법

프로파일 스크린 랜더링할 때 post 탭이 아닌 likes탭이 보이게 하는 설정

 

extra파라메터

//username 입력하고 emailscreen으로 넘어갈 때 URL에 넘겨준 데이터 남기지 않기

 

/email 뒤에 아무 정보도 남지 않았다.

 

18.4 CustomTransitionPage

한 화면에서 다음 화면으로의 애니매이션을 gouRouter의 builder를 다르게 선언하는 방법

 

이 애니는 웹에서도 앱에서도 통함

 

name으로 하는 방법

URL로 하는 방법

 

이런 식으로 nested하는 방법:  nested router: 예제

 

Singup이 '/' 이기 때문에 username, email의 URL에는 /를 붙일 필요가 없다.

 

728x90
반응형
Comments