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

WebApp을 만들기 위해서 아래 명령어를 터미널에 입력하여 준다.

flutter pub add flutter_inappwebview

 

flutter_inappwebview를 추가하였다면 WebApp을 사용할 수 있다.

 

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://m.naver.com/")),
      ),
    );
  }
}

 

위 코드를 작성한다면 네이버의 화면을 WebView로 나타나게 할 수 있다.

 

 

웹에서 앱으로 변수를 넘기고 싶다면 React 코드에 아래 내용을 추가해야 한다.

 

const sendData = () => {
    const data = {
      message : 'Sample',
      data : 'data'
    }
    window.flutter_inappwebview.callHandler('Sample', data).then((result : any) => {
      alert("호출완료!")
    });
  }

 

위 내용을 추가한 후 Flutter에 코드를 추가한다.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("http://10.0.2.2:3000/")),
        onWebViewCreated: (controller) {
          controller.addJavaScriptHandler(handlerName: 'Sample', callback: (args) {
            print("호출!");
            print("결과 : $args");
          });
        },
        onLoadStart: (controller, url) {},
        onLoadStop: (controller, url) {},
      ),
    );
  }
}

위 코드에서 onWebViewCreated부분이 웹과 앱이 데이터를 주고받는 부분이다.

 

만약 핸들러를 추가하고 싶다면 addJavaScriptHandler를 추가하면 된다.

 

추가한 후 호출하면 아래와 같은 화면이 나타난다.

 

결과 화면에서 alert가 나타나는 이유는 핸들러 호출이 끝난 후 alert를 호출하도록 하였기 때문이다.

const sendData = () => {
    const data = {
      message : 'Sample',
      data : 'data'
    }
    window.flutter_inappwebview.callHandler('Sample', data).then((result : any) => {
      alert("호출완료!")
    });
  }

만약 위 코드에서 then(() => { alert("호출 완료!") }) 부분의 alert("호출 완료!")를 원하는 코드로 변경한다면 핸들러가 실행된 후 변경된 코드가 실행된다.

 

핸들러가 실행된 후 특정 값을 반환해 주고 싶다면

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("http://10.0.2.2:3000/")),
        onWebViewCreated: (controller) {
          controller.addJavaScriptHandler(handlerName: 'Sample', callback: (args) {
            print("호출!");
            print("결과 : $args");
            return "Y";
          });
        },
        onLoadStart: (controller, url) {},
        onLoadStop: (controller, url) {},
      ),
    );
  }
}

위 코드처럼 return을 해주면 된다.