[Flutter] 플러터에서 swiftui의 fullscreen cover 구현 방법

 

ㅤ

아래와 같은 화면 전환 기능을 구현하고 싶었다. SwiftUI 에서는 아래 기능을 Fullscreen Cover 라고 부른다.

오른쪽 왼쪽으로 화면이 전환되는 Navigation과 달리 수직으로 올라오는 애니메이션이 특징이며, 모달과 달리 머리를 잡고 아래로 스크롤해도 전환이 취소가 되지 않는다. 주로 일시적인 데이터 입력이나 흐름을 벗어나서 유저가 확 집중을 해야하는 부분에서 이러한 방식을 사용한다.

ㅤ

ㅤ

뭔가 Navigator.push() 처럼 Navigator 하위에 함수가 있을 것이라고 생각했는데, 찾아보니 없었다. 그래서 아예 모달을 불러오는showBottomModalSheet() 함수처럼 아예 별개의 함수로 있을 거라고 생각해서 구글링을 해봤다. 그런데 띠용? Navigator.push 아래에 Route 에서 파라미터로 옵션이 있다고 한다. ㅎㅎ

ㅤ

여기 MaterialPageRoute의 설명을 보면 fullscreenDialog라고 되어있는 것을 볼 수 있다. 요 녀석을 true로 바꿔주면, navigation 대신 fullscreen cover 방식으로 화면을 전환해준다.

 

아래처럼 코드 써주면 된다.ㅤ

Navigator.push(
  context,
  MaterialPageRoute(
    fullscreenDialog: true,
    builder: (context) {
      return JoinGroupView();
    },
  ),
);

 

설명을 읽기 위해 내부 docs를 읽어보려고 들어왔는데, “iOS에서는 이를 통해 세로 화면 전환을 할 수 있습니다“ 라고 적혀있었다. 아니 안드로이드에는 fullscreen cover 방식의 화면 전환 방식이 없나?? 이건 진짜 의외였다.

ㅤ

무튼 Flutter에서 SwiftUI의 FullscreenCover를 사용하고 싶으면 MaterialPageRoute의 fullscreenDialog를 true로 변경해주면 된다! 생각보다 이걸 찾는 사람들이 별로 없는건지, 아니면 다들 아는건지 한국어로 된 글이 잘 없어서 찾지 못했었다.

ㅤ

누군가에게는 도움이 되겠지 ㅎㅎ