[Flutter] Webview웹뷰 띄우기

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

 

Home 위젯 State에 다음과 같이 WebViewController를 만든다.

class _HomeWidgetState extends State<HomeWidget> {
  var webviewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) => print('onPageStated.. url:$url'),
        onPageFinished: (url) => print('onPageFinished.. url:$url'),
        onProgress: (progress) => print('onProgress.. progress:$progress'),
      )
    )
    ..loadRequest(Uri.parse("https://m.naver.com"));

 

 

내부에 onNavigationRequest가 있는데

: NavigationDecision.prevent - 해당 URL로 이동할 수 없게 막는 것이고,

: NavigationDecision.navigate - 해당 URL로 이동할 수 있도록 하는 것이다.

onNavigationRequest: (request) {
  print('onNavigationRequest.. $request');

  // 다른 페이지로 이동하지 않게 막음
  return NavigationDecision.navigate;
},

 

UI부문에 WebViewWidget에 webviewController인스턴스를 대입한다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PopScope(

        child: WebViewWidget(
          controller: webviewController,
        ),
      ),
    );
  }

 

 

 

웹에서 뒤로가기시 이전 화면을 보여주기

: 우선, WillPopScope로 보여준다

: return false는 뒤로가지 못하게 막는 것

: return true는 뒤로가도록 허용하는 것

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      if (await webviewController.canGoBack()) {
        webviewController.goBack();
        return false;
      } else {
        return true;
      }
    },
    child: Scaffold(
      body: WebViewWidget(
          controller: webviewController,
        ),
    ),
  );
}

 

 

android에서 backpressDispatcher를 만져줘야 하나 했지만, dart엔진 위에 그려지는 것이기 때문에

걱정할 필요가 없는 듯하다.

 

WillPopScope는 Deprecated된 위젯이기 때문에 PopScope로 변환해보자,

@override
Widget build(BuildContext context) {
  return PopScope(
    canPop: false,
    onPopInvoked: (bool didPop) async {
      if (await webviewController.canGoBack()) {
        webviewController.goBack();
      } else {
        SystemNavigator.pop(animated: true);
      }
    },
    child: Scaffold(
      body: WebViewWidget(
          controller: webviewController,
        ),
    ),
  );
}