Flutter webview 양방향 통신 (javascript channel)

박준성·2021년 10월 1일

Flutter

목록 보기
1/8
post-thumbnail

참고자료

✍ 문제점
플러터 웹뷰에서 회원 가입 시 pass 휴대폰 인증 새창에서 완료된 결과 데이터을 회원정보입력 창에 데이터를 전송을 해야하는데 , 데이터만 저장되고 해당 데이터를 넘기지 못하는 이슈가 발생 했다
👉 의문
자바스크립트 결과 데이터를 플러터에서 받아서 다시 데이터를 보내주면 되지 않을까?

class WebViewFw extends StatefulWidget {
  
  _WebViewFwState createState() => _WebViewFwState();
}
class _WebViewFwState extends State<WebViewFw> {

  final Completer<WebViewController> _controller =
  Completer<WebViewController>();
  late WebViewController _myController;
  
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }
  
  Widget build(BuildContext context) {
    return  WebView(
                  initialUrl: 'url',
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (WebViewController webViewController) {
                    _myController = webViewController;
                    _controller.complete(webViewController);
                  },
                  onProgress: (int progress) {
                    print("WebView is loading (progress : $progress%)");
                  },
                  javascriptChannels: <JavascriptChannel>{
                    _baseJavascript(context),
                  },
                  onPageStarted: (String url) {
                    print('Page started loading: $url');
                  },
                  onPageFinished: (String url) {
                    print('Page finished loading: $url');
                  },
                  gestureNavigationEnabled: true,
                );
  } 
 
 JavascriptChannel _baseJavascript(BuildContext context) {
   return JavascriptChannel(
       name: 'baseApp',
       onMessageReceived: (JavascriptMessage message) {
         if (message.message == 'authok') {
           //showAlertDialog(message.message, context);
           print('javascript run');
           _myController.evaluateJavascript("submitApp();");
         }
       });
 }
}
👉 결과 JavascriptChannel 생성 후 Javascript내에 결과값 받아올 부분에 
window.[Channel name] 입력 후 웹뷰 내에서 자바스크립트 컨트롤 가능 
위 채널 실행시 pass새창 핸드폰 인증 후 받은 결과 값을 받으면 bassApp에 authok 값을 주게 된다. 
message.message 받은 메세지 값이  authok 이면 👉_myController.evaluateJavascript("submitApp();"); 
submit 실행하여 값을 넘겨줌 
👉 채널을 이용하여, 자바스크립트 값받아오기 , 전송하기로 양방향 통신이가능

0개의 댓글