① 배운 것
오늘부터 새로운 기능 추가에 들어갔다.
한 3일이면 다 할줄알았는데 생각보다 할일이 많아서 회사에서 진짜 폰도 한번 못보고 계속 일만했다.
- 고라우터에서 ParentNavigatorKey의 역할
토글 스위치에서 페이지 이동이 되지 않는 문제와 해결 방법
//문제 상황
플러터 앱에서 토글 스위치를 켰을 때 특정 페이지로 이동하려 했지만, 예상대로 페이지가 전환되지 않는 문제가 발생했습니다. 이 문제는 특히 모달 창, 다이얼로그, 또는 다른 중첩된 네비게이터(Navigator) 안에서 발생할 수 있습니다.
//원인
플러터 앱에서는 여러 네비게이터를 사용할 수 있습니다. 네비게이터는 기본적으로 가장 가까운 네비게이터를 사용합니다. 이로 인해 다음과 같은 문제가 발생할 수 있습니다:
모달 창이나 다이얼로그 안에서 페이지 전환을 시도할 때, 해당 컨텍스트의 네비게이터가 사용됩니다.
이 경우, 최상위 네비게이터가 아닌, 모달 창이나 다이얼로그의 네비게이터가 사용되기 때문에, 원하는 페이지로 이동하지 못할 수 있습니다.
해결 방법
이 문제를 해결하기 위해서는 최상위 네비게이터를 명시적으로 지정해줘야 합니다. 이를 위해 parentNavigatorKey를 사용하여 최상위 네비게이터를 설정할 수 있습니다.
//비유
큰 건물에 엘리베이터가 여러 대 있다고 생각해 보세요. 기본적으로는 가장 가까운 엘리베이터를 타게 됩니다. 하지만 특정 층으로 가려면 특정 엘리베이터(최상위 엘리베이터)를 타야 합니다. parentNavigatorKey를 사용하면 이 특정 엘리베이터를 타도록 지정하는 것과 같습니다.
//요약
문제: 기본 네비게이터는 가장 가까운 네비게이터를 사용하여 잘못된 네비게이터를 사용할 수 있습니다.
해결책: parentNavigatorKey를 사용하여 최상위 네비게이터를 명확하게 지정하면, 항상 올바른 네비게이터를 사용하여 페이지 전환이 제대로 이루어집니다.
이렇게 설정하면, 토글 스위치가 켜질 때 항상 최상위 네비게이터를 사용하여 페이지 이동이 올바르게 이루어집니다.
//언제 parentNavigatorKey가 필요한가?
중첩된 네비게이터 환경에서의 화면 전환
1. 중첩된 네비게이터 환경에서는 기본적으로 가장 가까운 네비게이터가 사용됩니다. 하지만, 특정 상황에서는 최상위 네비게이터를 사용하여 화면 전환을 해야 할 때가 있습니다. 이럴 때 parentNavigatorKey를 사용합니다.
2. 모달 창이나 다이얼로그에서의 화면 전환
모달 창이나 다이얼로그 안에서 페이지 전환을 시도할 때, 기본적으로 모달이나 다이얼로그의 네비게이터가 사용됩니다. 하지만, 전체 앱의 흐름에 맞게 최상위 네비게이터를 사용해야 할 때 parentNavigatorKey를 지정해야 합니다.
//언제 parentNavigatorKey가 필요하지 않은가?
1. 단순한 네비게이션
앱이 단일 네비게이터로 구성된 경우, parentNavigatorKey를 지정할 필요가 없습니다. 기본 네비게이터만으로 충분히 화면 전환이 가능합니다.
2. 중첩되지 않은 네비게이션
모달 창이나 다이얼로그 등의 중첩된 네비게이터를 사용하지 않는 경우, 기본 네비게이터만 사용해도 문제가 없습니다. 이 경우, parentNavigatorKey를 설정할 필요가 없습니다.
//중첩된 네비게이터 환경이란?
중첩된 네비게이터 환경은 하나의 앱 내에 여러 개의 네비게이터가 존재하는 구조를 말합니다. 이러한 구조는 보통 다음과 같은 상황에서 발생합니다:
- 모달 창 (Modal): 현재 화면을 덮는 팝업 창으로, 자체 네비게이터를 가질 수 있습니다.
- 다이얼로그 (Dialog): 현재 화면 위에 나타나는 작은 팝업 창으로, 자체 네비게이터를 가질 수 있습니다.
- BottomSheet: 화면 하단에서 슬라이드 업 되는 시트로, 자체 네비게이터를 가질 수 있습니다.
- Nested Navigation: 특정 위젯 내부에서 별도의 네비게이터를 사용하여 화면을 전환하는 경우입니다. 예를 들어, 탭 내에서 개별 네비게이터를 사용할 때 발생할 수 있습니다.
final GlobalKey<NavigatorState> _rootNavigatorKey = GlobalKey<NavigatorState>();
final GoRouter _router = GoRouter(
navigatorKey: _rootNavigatorKey, // 최상위 네비게이터 키 설정
routes: [
GoRoute(
path: '/',
builder: (context, state) => HomeScreen(),
),
GoRoute(
path: '/password',
parentNavigatorKey: _rootNavigatorKey, // 최상위 네비게이터 지정
builder: (context, state) => MainSCreen(password: state.extra as String),
),
],
);- goRouter에서 파라미터있는 클래스 사용법
//path파라미터나 query파라미터로 넘기고 싶은게 아니라
//클래스의 파라미터를 넣어서 클래스를 생성하고 싶은거라면
//extra로 처리
GoRoute(
name: RouteName.EditCustomerPageRoute,
path: '/EditCustomerPageRoute',
builder: (context, state) {
final data = state.extra! as Map<String,dynamic>;
return EditCustomerPage(updateTab: data["updateTab"],edit: data["edit"]);
}
),
context.push(RouteName.EditCustomerPageRoute,extra: {"updateTab":updateTabValue,"edit":editValue);
② 회고 (restropective)
③ 개선을 위한 방법
되고싶다