Flutter webview 플러터에서 웹뷰 사용하기 (webview_flutter)

flutter 에서 사용되는 webview 패키지는 유명한게 두가지가 있다

webview_flutter 와 flutter_inappwebview 가 있는데,

flutter_inappwebview 가 유용한 기능들을 제공하고 있다고 들었는데

현재 기준으로 최근 업데이트가 무려 8개월 전이고(Null safety는 지원한다.)

webview_flutter 가 flutter.dev 에서 제공하기도 하고 flutter_inappwebview 보다 많이 사용되기도 하고 자주 최신화가 되어서

webview_flutter 를 사용하기로 했다. (그리고 예제를 많이 찾을 수 있음)

 

 

이제 사용법을 알아보자

pub.dev 에서 webview_flutter 패키지를 설치한다

flutter pub add webview_flutter

 

이러면 설치가 완료되었고 사용하기만 하면 된다.

 

import 'package:webview_flutter/webview_flutter.dart';

class MainPage extends GetView<HomeController> {
  final Completer<WebViewController> webController =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    // if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://www.naver.com',
            onWebViewCreated: (WebViewController _controller) async {
              webController.isCompleted
                  ? ''
                  : webController.complete(_controller);
            },
            javascriptMode: JavascriptMode.unrestricted,
          ))
         )
  }

 

이렇게 하면 기본적인 webview 를 사용할 수 있게 된다.

여기서 주목해야할 점들이 있는데, 

 

먼저 webview controller 를 Completer 로 complete 해주었다.

Completer는 callback 을 Future 로 변환해주는 클래스다. 

설명하자면 Future object를 process 할 수 있도록 해주는 클래스인데,

complete 할 객체가 유효한지 확인할 수 있도록 해주는 기능을 한다.

그래서 일반적으로

webController.complete(_controller);

라는 코드 한 줄만 적어서 사용하기도 하는데,

isCompleted 됐는지 확인해서 complete 시켜주었다!

 

late WebController webcontroller;

webcontroller = _controller;

이런식으로 컨트롤러를 따로 담아줘도 실행은 되었지만

일반적으로 complete를 사용하는 것으로 보아 이 컨트롤러가 유효한지 확인하는 것이 중요한 것으로 보인다!\

 

complete 된 controller 를 사용하려면

webController.future.then((value) {
  // 실행할 코드
});

 이렇게 사용해주면 된다.

이 컨트롤러를 이용해서 웹뷰를 컨트롤 할 수 있다!

간단하게 뒤로가기를 하려면

webController.future.then((value) async {
  var canBack = await value.canGoBack();
  canBack? value.goBack() : '' ;
});

뒤로 갈 수 있는지 value.canGoBack() 값을 확인해준 뒤 

값이 true 라면 goBack() 메서드를 실행해준다.

(근데 항상 true인것 처럼 나와서 그냥 goBack을 해줘도 된다.)

 

그리고 확인할 점은

javascriptMode : javascriptMode.unrestricted 를 설정해주었는데,

기본 설정은 javascriptMode.disabled 이다.

javascipt 를 실행하게 할 지 말 지 설정해주는 건데,

실행하도록 하려면 unrestricted를 설정해주면 된다.

 

가장 기본적인 설정은 이렇게 해서 사용하면 된다!