[Flutter] WillPopScope Deprecated

Minji Jeong·2023년 12월 30일

flutter

Intro

Background

Predictive Back Gesture (ahead-of-time model)

WillPopScope Deprecated

PopScope Introduced

🔨 Migrating from WillPopScope to PopScope

References

Flutter/Dart

목록 보기

10/13

Intro

본 글은 Flutter에서 뒤로가기 동작을 커스터마이징하는데 사용되는 WillPopScope가 Deprecated된 배경에 대해 간단히 소개합니다.
위 배경인, 안드로이드 14부터 도입되는 Predictive Back Gesture에 대한 공식 유튜브 채널 영상을 보고싶다면 아래 링크를 클릭해주세요.
▶️ https://youtu.be/Elpqr5xpLxQ?si=YyALmbrkHhffwlIK
또한 Predictive Back Gesture에 대해 자세히 설명해놓은 블로그가 있어서 해당 링크를 첨부합니다. 도입 배경 뿐 아니라 Predictive Back Gesture로 마이그레이션하는 방법도 알고 싶다면 해당 블로그를 참고해주세요.
▶️ https://heechokim.tistory.com/25

Background

안드로이드 14(API Level 34)부터 Predictive Back Gesture가 도입될 예정이며, 그에 따라 호환되지 않는 기존의 플러터 내비게이션 API (WillPopScope, Navigator.willPop)는 Deprecated 되었습니다.

Predictive Back Gesture (ahead-of-time model)

Predictive Back Gesture란 위 이미지처럼 화면을 왼쪽으로 당기면 현재 화면이 조금 작아지는 애니메이션이 실행되며, 사용자들에게 뒤로가기 동작이 실행될 것임을 미리 알려주는 기능입니다. 한마디로 사용자에게 뒤로 이동할 건지, 아니면 이 동작을 취소할건지 결정하도록 기회를 주는거라고 생각하면 되는데, 이러한 기능이 도입되는 이유는 다음과 같습니다.

도입 배경
안드로이드 10부터 iOS처럼 뒤로가기 기능 중 화면 왼쪽/오른쪽 사이드를 당기면 화살표 아이콘이 나오면서 이전 화면으로 이동할 수 있는 기능을 제공하고 있습니다.

하지만 구글 측에서 사용자들에게 설문 조사를 한 결과, 이 기능은 간혹 원하지 않을 때도 뒤로 가는 문제점이 있었습니다. 목록에서 스와이프하여 아이템을 삭제하려고 한건데 갑자기 뒤로 가기 동작이 실행되어 홈으로 이탈되는 경우가 그 예 중 하나입니다.

사용자가 화면의 사이드를 당기면 화살표가 나온 후 바로 뒤로 이동하기 때문에 사용자들은 자신의 터치가 뒤로가기 동작으로 잘못 인식되었다는 사실을 미리 알 수가 없었고, 잘못된 터치를 고칠 기회도 없었습니다. 이러한 문제들을 해결하기 위해 ahead-of-time 모델(미리보기 모델)인 Predictive Back Gesture가 등장하게 되었습니다.

Predictive Back Gesture 테스트

Predictive Back Gesture를 안드로이드 에뮬레이터로 테스트해보기 위해서는 먼저 설정 메뉴에서 개발자 옵션을 활성화해야 합니다.

* 개발자 옵션 활성화 방법
Setting - About emulated device - Build number 메뉴 반복해서 클릭

개발자 옵션이 활성화 되었다면 검색창에서 Predictive Back Animations를 검색하고, 해당 메뉴를 활성화해주세요.

이후 안드로이드 manifest 파일에 다음 옵션을 넣어주세요. 해당 옵션을 넣어주지 않으면 기본값인 false로 설정되어 predictive back gesture가 활성화되지 않습니다.

<application
    ...
    android:enableOnBackInvokedCallback="true"
    ... >
</application>

WillPopScope Deprecated

먼저 WillPopScope는 기본 위젯에 뒤로가기 동작에 대한 커스터마이징을 제공하는 클래스입니다. onWillPop은 사용자가 백버튼을 눌렀을 때 실행되는 콜백 함수로, 백버튼을 눌렀을 때 실행되어야 하는 로직을 정의하는데 사용됩니다.

만약 onWillPop이 true를 리턴할 경우 현재 화면이 pop되며 이전 화면으로 이동하지만, false를 리턴할 경우 pop 동작이 수행되지 않습니다. 흔히 화면 하단의 백버튼을 눌러 뒤로가는 동작을 막고자 할 때 이러한 방식으로 구현하고 있습니다. 만약 백버튼 동작만 막는게 아니라 어떠한 액션도 같이 보여주고 싶다면 원하는 동작을 onWillPop에 정의해준 후 false를 리턴하면 됩니다.

하지만 WillPopScope의 경우 안드로이드 14부터 지원되는 Predictive Back Gesture와 호환되지 않기에, 플러터에선 그 대안책으로 PopScope를 내놓게 됩니다.

아래 영상처럼 실제로 Predictive Back Gesture를 활성화한 상태에서 WillPopScope를 사용한 앱의 경우 onWillPop이 false를 리턴해도 뒤로가기가 비활성화되지 않습니다.

PopScope Introduced

PopScope는 안드로이드 14부터 지원되는 Predictive Back Gesture를 지원하기 위해 새롭게 등장한 ahead-of-time API로, 기존에 back press action을 관리하기 위해 사용되던 WillPopScope와 Navigator.willPop을 대체합니다.

canPop

뒤로가기 동작을 제어하는 boolean 타입 파라미터입니다.
default value는 true이며, true일 경우 뒤로가기 동작이 평소처럼 실행된다는 것을 의미하며 false일 경우 뒤로가기 동작이 비활성화됩니다.

~~onPopInvoked~~

성공 여부에 관계 없이 뒤로가기 동작이 발생했을 때 호출되는 콜백 함수입니다.
canPop이 false여도 onPopInvoked는 여전히 호출되며, didPop은 false입니다(PopScope와 관련되지 않은 이유로 Pop에 실패했을 때도 false입니다). 반면 canPop이 true면 didPop도 true입니다.
해당 메서드는 플러터 3.22부터 deprecated 되었습니다. 대신해서 onPopInvokedWithResult 사용해주세요.