[Flutter] go_router 내에서 분기별 처리와 모달위젯 띄우는 방법

외부 딥링크를 통해 스크린 요청이 오게 되는 경우, go_route로 수신하게 되는 데, 

이때 인앱 브라우저를 풀화면으로 띄우거나 또는 모달에 띄워야하는 요구사항이 발생하여 여러방법을 테스트해보고 얻은 결론입니다.

 

우선 GoRoute의 특정 패스로 들어오는 경우, 아래와 같이 처리해 줍니다.

GoRoute(
        path: RoutePath.inAppBrowser,
        name: 'inAppBrowser',
        builder: (context, state) {
          final uri = state.uri.queryParameters['url'] ?? '';
          final title = state.uri.queryParameters['title'];
          final type = state.uri.queryParameters['type'];

          final inAppBrowser = InAppBrowser(
            uri: uri,
            title: title,
            type: type,
          );

          if (type == 'popup') {
            return presentModal(context, inAppBrowser);
          } else {
            return inAppBrowser;
          }
        },
      ),

 

 

type == 'popup' 케이스 일 경우 presentModal 멤버함수를 호출합니다. 이 때 컨텍스트를 같이 주입해줍니다.

  static Widget presentModal(BuildContext context, Widget widget) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Navigator.of(context).pop();
        Nav.pushFromBottom(widget);
    });
    return Container();
  }

 

위젯트리 빌드 이후에 Navigator.of(context).pop() 함수를 먼저 호출해 줍니다.

 

이렇게 하는 이유는 상단 GoRoute는 go_route 위젯의 routes 속성에 대한 배열 요소이기 때문에, 위젯을 반환해야 합니다.

자식 위젯이 없는 빈 Container() 를 함수에서 먼저 리턴해주게 됩니다.

 

이후  페이지가 전환되면서 블랭크 화면이 뜨게 되는데 이를 먼저 닫아준 후에 푸시를 하기 위함입니다.

이후 iOS 모달뷰처럼 보이기 위해 pushFromBottom을 사용했습니다.

 

Nav.pushFromBottom의 경우, 제가 듣던 강사분의 외부 플러그인입니다. 

링크 : https://pub.dev/packages/nav