# go_router

sol_jenni7

go_router 패키지에서의 go와 push는 각각 새로운 경로로 이동하면서 현재 경로를 대체하거나 이전 경로를 유지한 채로 스택에 쌓는 동작을 나타낸다. go는 새로운 경로로 이동하면서 현재 경로를 대체. 이전 화면을 스택에서 제거하고 새로운 경로로 이동. ex) 로그인 이후에 로그인 화면을 스택에서 제거하고 대시보드 화면으로 이동할 때 push는 새로운 경로로 이동하면서 이전 경로를 유지한 채로 스택에 쌓음. 이전 화면과 새로운 화면을 스택에 함께 보관하며, 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아갈 수 있음. ex) 상품 목록에서 상품 상세 정보 화면으로 이동할 때 push 메서드를 사용할 수 있음. 출처) code with andrea

seulinger

Flutter를 사용하여 수우주를 제작하고 있다. 수우주에서 만들어진 자신의 계산기를 다른 사람과 공유하기 기능을 추가하려고 일단 지금의 수우주는 안드로이드만 개발하고 있으니, 안드로이드의 앱링크 기능을 활용하면 될 것 같았다. 어찌저찌 따라해서 앱링크를 누르면 수우주앱에서 계산기 관련 정보를 넘겨 받아서 계산기가 추가될 수 있게끔 구현은 했다. 그런데! 만들어진 계산기를 공유하려면 아마 카톡으로 보내기도 하겠지? 하고 공유해 봤더니,

whdrjsco

해당 글은 BottomNavigationBar 와 go_router 를 사용하는것을 기준으로 한다. > #### go_router 왜 사용하는가? Flutter 에서 직접 관리하는 package 이다. (Flutter 업데이트로 인한 지원이나 호환성 걱정이 없다) 앱 구조를 설계하다보면 Navigation 의 복잡함과 기본 Navigator 기능 부족으로 인한 한계성. 코드가 복잡해진다.. 여러 상황의 router 관리 어떻게 하죠? ...등등 > #### BottomNavigationBar 의 문제점 탭 끼리의 페이지 전환이 페이지 전환이 아니다.. (BottomNavigationBar 가 같이 넘어가요!!) 각 탭의 라우팅 관리는 어떻게 하죠? (각 탭의 route 독립적으로 살아있나요?) 위의 문제로 직접 custom 하게 되는데.. (최적화 늪으로 빠진겁니다) ..등등 아무튼 여러 사유들이 있겠지만 위와 같이 문제점들이 상당히 많

shinhyinho0000

이번 글에서는 GoRoute 패키지로 네비게이션 기능 구현할 때 꼭 활용해야 하는 아키텍처 패턴을 살펴보도록 하겠습니다. 아키텍처 패턴: 파일 시스템 구조는 다음과 같이 구성해 줍니다. lib → common → navigation → router.dart / routes.dart routes에는 우리가 만들 route 명을 enum으로 정의해준다. Router에는 실제 route를 구현하는 GoRouter를 정리한다. routes.dart 우리가 작성할 route의 목록을 enum 값으로 만들어 줍니다. 해당 Enum값은 후술할 router.da

leemch37

Navigator 2.0? 어느 날엔가 flutter 에 불쑥 나타난 Navigator 2.0. 이름도 생소하여 찾아보면, 더 생소한 선언형(declarative) API (Routing 방식)이라고 소개하고 있다. 기존 Flutter 개발자라면, A화면 위에는 B화면, B화면을 닫으면 A화면이 나와야 한다는 등의 화면 프로세스가 머리에 그려질 것이다. 이걸 push, pop API를 통해 쉽게 구현할 수 있는데, 이를 명령형(imperative) API(Routing 방식) 이라고 한다. 반면, 선언형으로 라우팅을 구성할 때는, 각 화면마다 path 를 지정하고 go_router library 를 사용해 go/push API 로 화면을 이동할 수 있다. 이렇게만 들으면, 기존과 크게 달라진것 같지도

knh4300

Overview > flutter 개발진이 홍보하는 goRouter goRouter는 url path 방식으로 라우팅을 지원하는 패키지이다. 무려 공식 패키지이니, 마음놓고 사용할 수 있겠다. install > 이 곳에서 install을 진행한다. Usage app_router 정의 다음은 GoRouter 를 정의한 AppRouter 클래스이다. 여기서 route들의 관계와 error시 이동할 Page정의, redirect 등을 정의한다. redirect rediect를 담당할 AppService()를 정의해 보자. MaterialApp.router go router를 사용하기 위해 MaterialApp을 MaterialApp.router로 바꾸어 정의한다. Navigation

tygerhwang

화면 이동을 위한 방법 정리 (Router) Flutter Naviation go_router | Flutter Package get | Flutter Package 이번 글에서는 Flutter에서 화면간 이동에 대한 방법을 알아보려고 한다. 아마도 개발의 가장 중요하면서도 기본이 되는 기능이기 때문에 초보자들도 이미 사용하고 있었던 기능일 것이다. 간단하게 알아보고자 한다. Flutter Flutter에서 페이지 간 이동을 하는 방법은 기본적으로 Flutter에 내장되어 있는 Navigator를 이용하는 방법과 라이브러리를 사용하는 방법이다. 저는 개인적으로 Navigator 방식을 사용하지는 않는다.

sunwonsw95

go_router를 사용하면서 오늘 해결한 문제점에 대해 정리 및 공유할 겸 글을 써본다. 오늘 업무 중 리스트의 CRUD를 구현하는 업무가 있어 작업을 하던 중, Delete 기능을 만드는 과정에서 문제가 발생했다. 문제가 발생한 상황은 아래와 같았다. > 1. A페이지의 목록에 로딩된 아이템 중 하나 클릭해 B페이지로 이동한다. > 2. B페이지에서 아이템 삭제 버튼을 클릭한다. > 3. 데이터가 삭제된 후 A페이지로 돌아간다. > 4. (문제 발생 지점) 삭제된 아이템이 목록에 그래도 남아있다? 분명 서버에 삭제 요청을 했고 async, await을 통해 삭제가 된 것을 확인 한 뒤 A페이지로 돌아왔지만 화면에는 삭제한 아이템이 그래도 남아있었다. 원인 원인은 B페이지로 이동한 뒤에도 A페이지는 자신의 상태를 기억하고 있었다는 점이었다. 아마 go_router를 사용하면서 context.go() 함수를 사용했는데, 이 행위가 A페이지의 상태를 히스토리에 저장해준 것

sunwonsw95

GoRouter에는 ShellRoute라는 클래스가 있는데 이걸 이용해서 모바일, 웹에서 NestedRoute를 구현할 수 있다. 개인적으로 모바일 환경에서 구현된 NestedRoute의 예제는 구글링을 통해 쉽게 찾을 수 있는 듯 해서 Web환경에서의 NestedRoute를 예제로 가져와봤다. > 참조! > 예제 코드 실행 시 빌드 플랫폼을 웹으로 지정해서 빌드해야 함. 예제코드 우선 라우터 세팅을 다음과 같이 작성한다. 여기서 알아둬야할 것은 총 두 가지다. rootNavKey와 shellNavKey를 이용해 NavigatorState를 둘로 나눠 각각 최상위의 GoRouter와 ShellRoute에 하나씩 key로 지정한다. ShellRoute의 builder프로퍼티가 가진 child 매개변수는 ShellRoute의 route프로퍼티의 라우트를 통해 렌더되는 위젯이다. 이제 ShellRoute에서 라우팅 되는 위젯을 감싸는 위

sunwonsw95

GoRouter와 GetX를 사용할 때 GetPage를 사용하지 못하다보니 원래 사용해오던 Getx의 바인딩을 사용하지 못하는 문제가 발생했다. 해결방법 : GetBuilder를 통해 바인딩을 직접 지정해줘야한다. 이런 방식으로 호출하면 된다. builder가 두 번 사용되는 형태가 바람직해 보이지는 않지만 Getx에서 제공되는 라우팅을 사용하지 않고 GoRouter와 섞어 사용하기 위해선 어쩔 수 없어 보인다. dispose에 Get.delete를 선언하면 페이지에서 빠져 나올 때 컨트롤러를 메모리에서 제거한다.

teddyjune

1. 언제 Go Router 를 쓰나? 각 화면에 직접 주소를 써서 링크를 걸거나, 여러 개의 Navigator widget이 있을 경우 더 나은 기능을 위해 Flutter에선 Go Router 사용을 권장한다. Go Router 사용을 위해선 우선 go_router 라이브러리를 깔아야 하고, main.dart화면에 아래와 같이 세팅해줘야 한다. 2. routes 파일을 만들어서 path를 설정한다. 3. Provider를 적용할 때 각각의 GoRoute안에 세팅한다.

kyj5394

목적 플러터 웹 namedrouting 시에 404에러가 발생하는 에러 해결 방법 문서화 내용 에러 내용 www.homepage.com 으로 접속 시에는 접속이 가능하지만 www.homepage.com/home 으로 접속 시에 404 에러가 발생하였음 새로고침을 방지할 위젯을 stf 위젯으로 변경하고 위와 같은 코드를 작성하여서 해결하였음. 결과 굿