Flutter 플러터 - willPopScope 대신 popScope 적용해보기

현재 진행중인 프로젝트에서 inAppWebview를 willPopScope 으로 감싸 사용중 이었는데

그새 willPopScope 이 deprecated 되어 popScope 을 적용해 보았습니다.

 

기존의 willPopUp 작동 방식

이전의 willPopScope 을 먼저 보면 이런 형식입니다.

onWilPop이 안드로이드의 back 버튼에 발생해

true 면 pop, false 면 화면을 그대로 유지했습니다.

return WillPopScope(
  onWillPop: () => _goBack(context),
child: InAppWebView(
…

 

현재 프로젝트는 백버튼으로 제일 첫 화면으로 돌아간 뒤

한번 더 누르면 종료된다는 문구를 보여줍니다.

문구는 2초 뒤에 사라지며,

문구가 남아있을때 백버튼을 다시 눌러야지만 화면이 종료되게 구현했습니다.

Future<bool> _goBack(BuildContext context) async{
  DateTime currentTime = DateTime.now();
  if(await webViewController.canGoBack()){
    webViewController.goBack();
    return Future.value(false);
  }else{
    if(backButtonPressedTime == null ||
        currentTime.difference(backButtonPressedTime!) > const Duration(seconds: 2)) {
      backButtonPressedTime = currentTime;
      Fluttertoast.showToast(
        msg: "뒤로가기 버튼을 한번 더 누르면 종료됩니다.",
        gravity: ToastGravity.BOTTOM,
      );
      return Future.value(false);
    } else {
      return Future.value(true);
    }
  }
}

 

기존의 willPopScope 과 같이 사용했던

위의 내용을 구현한 _goBack 함수 입니다.

 

PopScope 적용

 

공식문서를 참고해 바꿔봅니다.

https://api.flutter.dev/flutter/widgets/PopScope-class.html

return PopScope(
      canPop: false,
      onPopInvoked: (bool didPop){
        _goBack(context);
      },
      child: Stack(children: [
						...

 

 

willPopScope 을 PopScope 으로 바꿔줍니다.

willPop도 없어지고 canPop과 onPopInvoked 라는 속성이 생겼습니다.

 

공식문서를 참고해 간단히 설명하면 이렇습니다.

canPop

• bool 나갈수 있게 할건지 아닌지 설정.
• default → true

저의 경우 false 로 설정해서 뒤로가기를 통해 나가지 못하게 막아두었습니다.

 

onPopInvoked → Called after a route pop was handled.

• back 버튼 눌릴때 발생됌
• canPop이 false이면 didPop은 false, canPop이 true 면 didPop도 true

공식문서를 보면 onPopInvoked 의 콜백함수의 인풋인 bool didPop을 이렇게 활용했습니다.

PopScope(
              canPop: false,
              onPopInvoked: (bool didPop) {
                if (didPop) {
                  return;
                }
                _showBackDialog();
              },

 

제 코드에 적용해본 결과 if (didPop) 부분이 크게 무슨 역할을 하는지

의미가 없는것같아 didPop은 활용하지 않고

기존의 _goBack 함수를 활용했습니다.

 

void _goBack(BuildContext context) async {
    DateTime currentTime = DateTime.now();
    if (await webViewController.canGoBack()) {
      webViewController.goBack();
    } else {
      if (backButtonPressedTime == null ||
          currentTime.difference(backButtonPressedTime!) >
              const Duration(seconds: 2)) {
        backButtonPressedTime = currentTime;
        Fluttertoast.showToast(
          msg: "뒤로가기 버튼을 한번 더 누르면 종료됩니다.",
          gravity: ToastGravity.BOTTOM,
        );
      } else {
        SystemNavigator.pop();
      }
    }
  }

 

popInvoked 콜백 함수의 경우 void 펑션을 허용하기 때문에

기존의 Future<bool> 리턴 부분을 다 삭제했습니다.

제 경우 webViewController.canGoback() 이 없고

2초 안에 다시 한번 백버튼을 누른경우

어플을 종료하면 되는 상황이기때문에

SystemNavigator.pop() 을 이용해 종료했습니다.

 

 

이렇게 간단히 willPopScope 에서 PopScope 으로 적용을 해보았습니다.

잘못된 설명이 있다면 댓글 부탁드립니다.