【Dart】JavaScriptのメソッドをコールする

※この記事は4分で読めます

本記事のテーマ

DartからJavaScriptで作成した処理を呼び出したい！

そのような人におすすめの記事です。

JavaScript(コール対象となる)側のコード

例えば以下のような指定したパスの音声ファイルを再生するjsメソッドがあったとします。

function playAudio(audioPath) {
    //htmlからAudioタグを取得
    var audioElement = document.getElementById("audio");
    //取得したAudioタグに対して、引数にて指定されたパスを設定
    audioElement.src = audioPath;
    //再生
    audioElement.play();
}

しかし、DartからJavaScriptのメソッドは直接コールすることができません。
そのため、DartからJavaScriptのメソッドをコールするためのインタフェースを作成する必要があります。

DartとJavaScriptのインタフェースとなるコード

以下のインタフェースを作成します。

@JS()
library audio;
import 'package:js/js.dart';

//interface function
@JS('playAudio')
external void playAudio(String audioPath);

2行目にはlibraryとして、コールしたいJavaScriptメソッドが存在するファイルを指定します。

6行目のJSアノテーションにはlibraryで指定したファイルに存在するコールしたいメソッド名を記載します。

7行目にはexternal修飾子を付与して、コール対象のJavaScriptメソッドと同じ戻り値、メソッド名、引数を定義します。

ちなみに、external修飾子は処理の本体が外部に存在する場合に付与する必要があります。

Dart(コールする)側のコード

child: FloatingActionButton(
  ///**interface経由でJavaScriptメソッドをコール**
  onPressed: () => playAudio(_tuningModels[_idx]?.audioPathName),
  backgroundColor: Colors.white,
  child: const Icon(Icons.volume_up, color: Colors.grey),
),

上記のコードでは、3行目でJavaScriptメソッドをインタフェース経由でコールしているのが分かると思います。

インタフェースさえ作ってしまえば、上記で定義したメソッドを任意のタイミングでコールすることができます。

是非皆さんも試してみてください。