flutter javascript interop

bootpay에서 flutter에 지원하는 플랫폼은 android와 IOS이다. 웹으로도 돌아가게 해야하는 일이 있어서 조사를 해보니 interop로 javascript에 dart 함수를 등록하고 호출할 수 있었다.

프로젝트 루트의 web 폴더 아래에 index.html에 부트패이 sdk를 cdn을 통해서 추가한다. 그후 flutter에서 javascript 측 함수를 호출할 수 있도록 함수를 선언한다.

<script src="https://cdn.bootpay.co.kr/js/bootpay-3.3.3.min.js" type="application/javascript"></script>
<script>
  function jsBootpay(payload) {
    payload = JSON.parse(payload);
    BootPay.request(payload).done((data)=>{
    	const json = JSON.stringify(data);
    	onBootpayDone(json);
    }).error((data)=>{
    	const json = JSON.stringify(data);
    	onBootpayError(json);
    });
  }
</script>

js 패키지는 웹에서만 인식하므로 플랫폼에 따라 조건부로 import 해야한다. 아래의 두개의 파일을 생성하고 만들어준 js.dart 파일을 import한다.

//js_stub.dart
class JS {
  final String? name;
  const JS([this.name]);
}

allowInterop(Function f) {}

//js.dart
export './js_stub.dart' if (dart.library.html) 'package:js/js.dart';

아래와 같은 예시로 javascript 함수를 flutter에서 호출할 수 있다.

@JS('jsBootpay')
external dynamic requestBootpayWeb(String payload);

이후 javascript에 dart 함수 등록은 아래와 같은 예시를 통해 구현하면 된다. (window.함수이름() 또는 함수이름() 으로 호출가능)

@JS('onBootpayDone')
external set _onBootpayDone(Function(dynamic payload) f);

@JS()
//실제로 javascript에서 호출하는 함수이름
external dynamic onBootpayDone();

_onBootpayDone = allowInterop((data) {
	//뭔가를 한다.
});