Channel을 이용한 변수 전달(Kotlin - flutter) - flutter_inappwebview 사용

자바스크립트로부터 코틀린 코드까지 채널을 생성하여 변수를 전달하고 결괏값을 리턴 받을 것이다.

 

일단 webview코드를 작성해야 한다.

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) async {
            print("결과 : ${args[0]}");
          });
        },
        onLoadStart: (controller, url) {},
        onLoadStop: (controller, url) {},
      ),
    );
  }
}

위 코드는 자바스크립트로부터 값을 Flutter까지 전달받을 수 있는 코드이다.

 

이제 채널링을 할 수 있도록 코드를 바꾸어 주면 아래와 같이 코드가 변경된다.

class _MyHomePageState extends State<MyHomePage> {
  static const platform = MethodChannel('com.sample.test');
  @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("결과 : ${args[0]}");
            return callMethodChannel(args[0]['data']);
          });
        },
        onLoadStart: (controller, url) {},
        onLoadStop: (controller, url) {},
      ),
    );
  }

  Future<String> callMethodChannel(String data) async {
 	var sendData = {
      "data" : data
    };
 
    try{
      return await platform.invokeMethod('sample', data);
    } on PlatformException catch(e) {
      log("method call error : $e");
      return "N";
    }
  }
}

처음 코드에서 변경된 부분은 MethodChannel을 선언하여준 부분과 methodChannel을 호출할 수 있는 부분이다.

 

화면 부분의 코드는

const sendData = () => {
  const data = {
    data : 'data'
  }
  window.flutter_inappwebview.callHandler('Sample', data).then((result : any) => {
    alert("호출 결과 값 : " + result)
  });
}

위 코드를 이용한다.

 

자바스크립트의 핸들러 Sample을 호출하면 Flutter에서 생성한 핸들러 Sample을 호출하게 되고 콜백 부분의 callMethodChannel을 호출하게 된다.

 

args는 배열로 넘어오기 때문에 배열에서 분리를 해주어 사용해야 한다.

platform.invokeMethod()에서 데이터를 넘길 때는 Map 또는 Json방식으로 넘겨주면 된다.

 

이제 코틀린 부분의 코드를 작성한다.

class MainActivity: FlutterActivity() {
    private val CHANNEL = "com.sample.test"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
            .setMethodCallHandler{
                    methodCall, result ->
                when(methodCall.method){
                    "sample" -> {
                        Log.d("코틀린 : ", methodCall.argument<String>("data").toString())
                        result.success("성공")
                    }

                    else -> result.notImplemented()
                }
            }
    }
}

 

코틀린에서 CHANNEL의 값은 Flutter에서 MethodChannel의 값과 같아야 한다.

 

methodCall에는 Flutter에서 전달했던 값 method와 sendData가 포함되어 있다.

 

이 중 method는 methodCall.method로 받을 수 있고 sendData는 methodCall.argument로 받을 수 있다.

 

성공 결과를 반환 하고 싶다면 result.success("원하는 값")을 이용하여 반환 가능하다.

 

만약 실패를 반환 하고 싶다면 result.error("원하는 값")을 사용할 수 있다.

 

해당 코드를 실행하게 된다면 아래와 같은 화면이 출력될 것이다.