240709 TIL

① 배운 것

GoRouter의 parentNavigatorKey, 하단바는 어디로 갔을까? 🤔

Flutter 개발을 하다 보면 GoRouter를 이용해 화면 전환을 구현하는 경우가 많습니다. GoRouter는 강력하고 편리한 기능을 제공하지만, 때로는 예상치 못한 동작으로 당황스러울 때가 있습니다. 특히, 하단바가 있는 앱에서 parentNavigatorKey를 사용했을 때 하단바가 사라지는 현상은 흔한 혼란 중 하나입니다.

🕵️‍♀️ 문제 상황

하단바가 있는 앱에서 GoRouter를 사용하여 새로운 화면으로 이동할 때, parentNavigatorKey를 지정하면 하단바가 사라지고 전체 화면이 새로운 화면으로 덮어씌워집니다. 반대로 parentNavigatorKey를 지정하지 않으면 하단바가 유지된 채 새로운 화면이 표시됩니다. 왜 이런 현상이 발생하는 걸까요?

🧭 Navigator와 스택의 이해

Flutter에서 화면 전환은 Navigator 위젯을 통해 관리됩니다. Navigator는 화면들을 스택처럼 쌓아서 관리하며, 새로운 화면을 push하면 스택에 추가되고, pop하면 스택에서 제거됩니다. GoRouter는 이 Navigator를 이용하여 화면 전환을 구현합니다.

parentNavigatorKey는 GoRouter가 새로운 화면을 탐색할 때 어떤 Navigator를 사용할지 지정하는 역할을 합니다. parentNavigatorKey를 지정하면 GoRouter는 해당 Navigator 위에 새로운 화면을 스택처럼 쌓습니다. 즉, 하단바가 있는 화면 위에 새로운 화면이 덮어씌워지는 것이죠. 반대로 parentNavigatorKey를 지정하지 않으면 GoRouter는 현재 context에서 가장 가까운 Navigator를 찾아 사용합니다. 이 경우, 하단바를 포함하는 Navigator 위에 새로운 화면이 추가되지 않고, 같은 레벨에 배치되어 하단바가 보이게 됩니다.

💡 해결 방법

parentNavigatorKey를 사용할지 여부는 화면 전환 시 하단바를 유지할지 숨길지에 따라 결정됩니다.

• 하단바를 숨기고 싶을 때: parentNavigatorKey를 사용하여 GoRouter가 하단바를 포함하는 Navigator 위에 새로운 화면을 쌓도록 합니다. 전체 화면을 사용하는 로그인 화면이나, 특정 기능에 집중해야 하는 화면에 적합합니다.
• 하단바를 유지하고 싶을 때: parentNavigatorKey를 사용하지 않고, GoRouter가 현재 context에서 가장 가까운 Navigator를 사용하도록 합니다. 하단 탭을 통해 여러 화면을 전환하는 일반적인 앱 구조에 적합합니다.

📝 예시 코드

// 하단바를 숨기는 경우
GoRoute(
  parentNavigatorKey: _rootNavigatorKey, // _rootNavigatorKey는 최상위 GoRouter의 navigatorKey
  path: '/login',
  builder: (context, state) => LoginScreen(),
),

// 하단바를 유지하는 경우
GoRoute(
  path: '/settings',
  builder: (context, state) => SettingsScreen(),
),

🧐 결론

GoRouter의 parentNavigatorKey는 강력한 기능이지만, 잘못 사용하면 예상치 못한 결과를 초래할 수 있습니다. Navigator와 스택의 개념을 이해하고, parentNavigatorKey를 적절하게 활용하여 원하는 화면 전환 동작을 구현하세요! 😉

다이어로그 하단바 가리고 보이게 하는법

useRootNavigator: true, 속성넣기

NotificationListener 위젯

- Flutter의 NotificationListener 위젯을 사용하면 위젯이 보내는 알림을 청취할 수 있습니다.
- ListView와 같은 위젯은 ScrollNotifications라는 알림을 보낼 수 있습니다.
- Flutter에서 알림은 위젯 트리를 통과하여 각 상위 위젯을 방문하며, 중간에 처리되지 않는 한 계속 상위로 전파됩니다.
- NotificationListener 위젯은 알림을 청취하고 처리하기 위해 사용됩니다.
- NotificationListener는 알림을 보내는 위젯을 감싸고, 처리하고자 하는 알림의 유형을 지정할 수 있습니다.
- onNotification 콜백을 추가하여 알림을 처리하며, 이 콜백이 true를 반환하면 알림은 위젯 트리에서 전파되지 않습니다.

NotificationListener(
        onNotification: (ScrollNotification scrollNotification) {
          if (scrollNotification.metrics.extentAfter <= 100) {
            /// 페이지네이션 정보 불러오기
          }
          return true;
        },
        child: ListView()...
//isLoading flag를 이용해 디벨롭 할 수 있음.

이런 다양한 Notification 들이 있다.

② 회고 (restropective)

③ 개선을 위한 방법