WebView_flutter 플러그인

pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

플러터에서 WebView 플러그인을 사용하면, 만들어 놓은 웹페이지를 플러터에서 사용할 수 있다. 

많이 사용하고 있는, 카카오 우편번호 검색 기능을 웹페이지에 만들어 놓고. 플러터에서 WebView 를 이용해 우편번호 검색 기능을 사용할 수 있다. 

postcode.map.daum.net/guide

Daum 우편번호 서비스

1. 먼저 카카오톡 가이드를 이용해서 우편번호 검색할 수 있는 웹페이지를 만든다. 

https://michellehwang001.github.io/study_html_css/javascript/

 

2. Flutter 에서 웹페이지를 호출한다.

WebView(
          initialUrl: 'https://michellehwang001.github.io/study_html_css/javascript/',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _webViewController = webViewController;
          },
          javascriptChannels: <JavascriptChannel>{
            _toasterJavascriptChannel(context),
          },
        ),

 

3. 웹페이지에 postMessage를 이용하여 Json데이터를 messageHandler로 보낸다. 

messageHandler.postMessage(JSON.stringify(data));

 

4. Flutter에 messageHandler를 작성한다.  name 속성값 이름과 html 이름이 동일해야 한다. 

  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'messageHandler',
        onMessageReceived: (JavascriptMessage message) {
          Navigator.pop(context, message.message);
        });
  }

5. push한 메인 페이지에서 결과값을 받아야 하기에 비동기함수 처리 해 준다.

  _navigatePost(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => Post()),
    );

    //print('result--> $result');

    // json 결과값 받기.
    Map<String, dynamic> zipcode = jsonDecode(result);

    postController.text = zipcode['roadAddress'];
    codeController.text = zipcode['zonecode'];
  }

 

6. 전달받은 json 값을 원하는 위치에 보여준다. 

 

참고.

flutter.dev/docs/cookbook/navigation/returning-data

Return data from a screen