[Flutter] Pop Gesture(Swipe Back Gesture)에 의한 뒤로 가기 막기

Problem (문제 상황)

 

서비스 출시를 앞둔 링링 서비스를 팀원들과 함께 테스트하던 도중, 미처 발견하지 못한 문제를 팀원 한 명이 말해주었다.

 

문제는 아이폰 사용자들에게는 익숙할 수 있는 Swipe Back Gesture를 통한 뒤로 가기 기능에서 발생하였다.

평소, 안드로이드를 사용하는 나에게는 에뮬레이터를 통한 테스트에서도 너무 당연하게 Swipe Back 제스쳐를 테스트 해보지 않았고 관련된 기능을 추가한 적이 없어서 코드 상에서 별도로 처리해두지 않았다.

 

그렇지만 Flutter 자체의 위젯이나 기능들이 높은 사용자 경험을 제공하는데, 이 Swipe Back Gesture 역시 기본적으로 내장되어 있었다.

 

Swipe Back으로 로그인 화면으로 돌아오는 모습

 

위는 문제 상황에 대한 스크린샷으로 Swipe Back을 통하여 로그인 화면으로 돌아가는 모습이다.

물론, 뒤로 가기가 허용되어도 문제가 발생하지 않는 상황이라면 괜찮지만 우리의 프로젝트는 아래 상황 때문에 Swipe Back 제스쳐를 막아야 했다.

 

1. 로그인 정보를 FlutterSecureStorage에 저장해두는데 서비스에서 제공하는 로그아웃 절차를 밟지 않으면 해당 로그인 정보가 정상적으로 삭제 되지 않음.

2. 서비스에서 관리하는 Stack Navigator의 동작이 꼬여서 정상적으로 작동하지 않는 경우가 종종 발생하였음.

 

 

위와 같은 이유로 Swipe back이나 안드로이드의 경우 기본 Bottom App Bar에 있는 뒤로가기 버튼의 동작을 막도록 하기로 하였다.

(오직 서비스에서 제공하는 뒤로 가기 버튼만 이용 가능하도록!)

 

---

 

Solution (해결 방법)

 

뒤로가기 기능을 막는 것은 아주 간단하게 진행할 수 있다.

WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: Scaffold(
		...
      )
)

 

Scaffold를 WillPopScope 위젯으로 wrapping 한 뒤, onWillPop 속성의 값을 false로 변경해주면 된다.

 

추가적으로 기본 AppBar를 사용한 경우, AppBar의 back button의 동작도 막아지는 경우가 있다고 하는데 직접 leading 속성을 건드려서 뒤로가기 버튼을 구현하고 Navigator.pop(context) 등의 코드를 이용한 명시적 뒤로 가기를 진행해주면 해당 문제도 간단하게 해결할 수 있다.