[Flutter] 웹뷰 뒤로가기 구현 (+ 앱 종료시 다이얼로그 띄우기) (webview_flutter 4.0.0 버전)

ios의 경우 제스쳐로 뒤로가기가 가능하지만 기본적인 시스템 뒤로가기가 없다.

 

하지만 안드로이드의 경우 기본적으로 시스템 네비게이션 바가 있기에 웹뷰로 작동하는 어플리케이션이 비정상적으로 종료되는 것처럼 보일 수 있다.

 

때문에 웹뷰 구현 시 따로 뒤로가기에 대한 구현을 해줘야한다.

 

필자는 가장 좋아요 수가 많은 flutter 공식 팀에서 만든 웹뷰 패키지인 webview_flutter 패키지를 사용하였다.

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

 

이번에 4.0.0 버전으로 업그레이드 되어서 기존에 3.0.0 버전을 쓰던 분들과는 코드가 다를 수 있다.

 

코드 가독성이 더 좋아진 것 같아 3.0.0 버전을 쓰고 있었다면 이 참에 마이그레이션하는 것도 괜찮을 것 같다.

 

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        var future = controller.canGoBack();
        future.then((canGoBack) => {
          if (canGoBack) {
            controller.goBack()
          } else {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('앱 종료'),
                content: Text('정말로 종료하시겠어요? 😥'),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('아니오'),
                  ),
                  TextButton(
                      onPressed: () {
                        SystemNavigator.pop();
                      },
                      child: Text('예'),
                  ),
                ],
              ),
            ),
          }
        });
        return Future.value(false);
      },
      child: SafeArea(
        child: Scaffold(
          body: WebViewWidget(controller: controller),
        ),
      ),
    );
  }

원래 3.0.0 버전에서는 WebView라는 위젯안에서 설정을 해줬는데 이제는 controller를 late 키워드로 선언한 후 initState 생명주기에서 controller에 웹뷰 설정을 하게 바뀌었다.

덕분에 코드가 더 깔끔해진 것 같다.

 

웹뷰의 뒤로가기 설정을 하기 위해서는 WillPopScope라는 위젯으로 wrap 해줘야한다.

showDialog 부분은 따로 함수로 빼서 가독성 좋게 관리해도 괜찮을 것 같다.

(참고로 actions 배열에 원래 FlatButton을 썼었는데 그게 deprecate 되었다고 한다. 대신 TextButton을 써줘야한다.)