WebApp 만들기(ReactJS - Flutter) - webview_flutter 사용

Flutter를 이용한 WebApp을 만드는 방법을 작성한다.

 

웹앱을 만들기 위해서는 webview_flutter 패키지가 필요하다.

 

flutter pub add webview_flutter

 

위 명령어를 터미널에 입력해 준다.

 

이제 코드를 작성하면 된다.

 

예시로는 네이버를 이용하였다.

 

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: WebView(
        initialUrl: "https://m.naver.com/",
      ),
    );
  }
}

 

위처럼 만든다면 아래 이미지처럼 앱에 웹 화면은 나타나게 할 수 있다.

 

 

웹에서 특정한 변수를 앱으로 넘기기 위해서는 javaScriptChannel을 생성해야 한다.

 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: "https://m.naver.com/",
        javascriptChannels: <JavascriptChannel>{
          JavascriptChannel(
              name: "Sample",
              onMessageReceived: (JavascriptMessage message) {
                //필요한 처리 내용 작성
              }
          )
        },
      ),
    );
  }
}

하지만 위처럼 만 작성한다면 자바스크립트 코드를 허용하지 않았기 때문에 화면이 정상적으로 출력되지 않을 수 있다.

 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: "접속할 URL",
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: <JavascriptChannel>{
          JavascriptChannel(
              name: "Sample",
              onMessageReceived: (JavascriptMessage message) {
                //필요한 처리 내용 작성
              }
          )
        },
      ),
    );
  }
}

 

위처럼 JavascriptMode를 추가하여 제한을 해제해 준다.

 

 

Flutter에는 위처럼 작성 후 웹에 코드를 작성해야 한다.

 

if(window.Sample && window.Sample.postMessage){
      let data = `{"message" : "호출"}`
      window.Sample.postMessage(data);
}

위 방식으로 호출을 하게 되면 Flutter로 데이터를 전달할 수 있다.

 

window.Sample에서 Sample은 JavascriptChannel의 name 부분을 원하는 이름으로 변경하면 된다.

 

이제 앱에서 웹으로 자바스크립트를 작동시켜보자

 

class _MyHomePageState extends State<MyHomePage> {
  late WebViewController _webViewController;
  final Completer<WebViewController> _controller = Completer<WebViewController>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: "http://10.0.2.2:3000/",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
          _webViewController = webViewController;
        },
        javascriptChannels: <JavascriptChannel>{
          JavascriptChannel(
              name: "Sample",
              onMessageReceived: (JavascriptMessage message) {
                log(message.message);
                _webViewController.runJavascriptReturningResult("alert('반환')");
                //필요한 처리 내용 작성
              }
          )
        },
    ),
    );
  }
}

 

위 처럼 코드를 onWebViewCreated로 webViewController를 변수에 저장한 후 webViewController의 runJavascriptReturnResult를 이용하여 웹에서 String으로 작성된 코드를 실행시킬 수 있다.

 

Completer는 webViewController의 처리를 비동기로 변경하여 처리할 수 있도록 한다.

 

아래는 해당 방식으로 호출 시 나타나는 화면이다.

 

 

하지만 앱에서 웹에 있는 특정 함수를 실행해야 한다면 위의 webview_flutter는 사용하기 어렵다.

 

만약 웹의 특정 함수를 사용해야 한다면 flutter_inappwebview를 사용해야 한다.