Flutter 애플리케이션과 웹 콘텐츠 간의 통신을 구현하기 위해 webview_flutter 패키지를 사용하여 WebView와 브릿지 설정 방법을 설명합니다.

이 가이드는 WebView에서 JavaScript와 Flutter 간 메시지를 주고받는 기본적인 방법을 제공합니다.

패키지 추가

프로젝트의 pubspec.yaml 파일에 webview_flutter 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.0

명령어를 실행하여 패키지를 설치합니다:

flutter pub get

WebView 위젯 설정

Flutter에서 WebView를 구현하여 웹 페이지를 로드하고 JavaScript와 통신을 설정합니다.

샘플 코드

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://yourwebsite.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        javascriptChannels: <JavascriptChannel>{
          _createJavascriptChannel(),
        },
      ),
    );
  }

  JavascriptChannel _createJavascriptChannel() {
    return JavascriptChannel(
      name: 'FlutterBridge',
      onMessageReceived: (JavascriptMessage message) {
        print('Message received from web: ${message.message}');
      },
    );
  }
}

웹 페이지에서 Flutter로 메시지 보내기

웹 페이지에서 Flutter로 메시지를 보내는 방법을 설명합니다. window.FlutterBridge.postMessage를 사용하여 WebView와 연결된 브릿지로 데이터를 보냅니다.

샘플 코드

웹 페이지 JavaScript입니다.

function sendMessageToFlutter(message) {
  if (window.FlutterBridge) {
    window.FlutterBridge.postMessage(message);
  }
}

예제 동작

위 JavaScript 함수는 웹 페이지에 포함됩니다.
sendMessageToFlutter('Hello from Web!')를 호출하면 Flutter로 메시지가 전달됩니다.
Flutter에서 메시지를 수신하고 로그로 출력합니다.

Flutter에서 웹 페이지로 메시지 보내기

Flutter에서 WebView 내 JavaScript로 메시지를 보냅니다. evaluateJavascript 메서드를 사용하여 JavaScript 코드를 실행할 수 있습니다.

샘플 코드

void sendMessageToWeb(WebViewController controller) async {
  final url = await controller.currentUrl();
  print('Current URL: $url');
  controller.evaluateJavascript("alert('This is a message from Flutter!')");
}

예제 동작

sendMessageToWeb 함수가 호출되면, WebView에서 JavaScript로 alert 메시지가 실행됩니다.
웹 페이지에서 JavaScript를 통해 메시지를 받을 수 있습니다.

요약

webview_flutter 패키지를 사용하여 Flutter와 WebView 간 통신을 설정합니다.
JavaScript와 Flutter 간의 양방향 메시지 전송을 구현할 수 있습니다.
웹 페이지에서 Flutter로 메시지를 보낼 때 JavascriptChannel을 활용합니다.
Flutter에서 웹 페이지로 메시지를 보낼 때 evaluateJavascript 메서드를 사용합니다.

추가 참고 자료

webview_flutter (pub.dev)