【Flutter】Flutter WebでjavaScript関数を呼び出す

やること

FlutterWebからpub.dev: jsを使用してJavaScript関数を呼び出す。

使用するフォルダ構成

project(root)
├─ lib
│  ├─ main.dart
│  └─ js
│      ├─ js_func.js
│      └─ js_func_call.dart
└─ web
    └─ index.html

基本的な使い方

簡単な自作のjs関数を定義して呼び出してみる。
ボタンを押すとjs関数で変換した文字列がコンソールに出力されるだけのシンプルなもの。

main.dart

import 'package:flutter/material.dart';
import 'js/js_func_call.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    const argumentValue = "js関数の呼び出し";
    String returnValue = "";

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text("js operation check"),
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                // JavaScript関数を呼び出し、戻り値をコンソールに表示
                returnValue = callJsFunc(argumentValue);
                debugPrint(returnValue);
              },
              child: const Padding(
                padding: EdgeInsets.all(8.0),
                child: Icon(
                  Icons.play_circle,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ));
  }
}

js_func_call.dart

@JS()
// jsファイル名を記載
library js_func;
import 'package:js/js.dart';

// jsファイルから呼び出したい関数をCall
@JS('callJsFunc')
external String callJsFunc(String message);

js_func.js

// JavaScriptの関数定義
function callJsFunc(message){
    const returnMessage = "js function call: " + message
    return returnMessage
}

index.html

  <!--  上記部分省略 -->
  <script src="flutter.js" defer></script>
  <!--  JavaScript関数を定義したjsファイルのパスを指定 -->
  <script src="../lib/js/js_func.js" defer></script>
</head>

やや応用編

少し応用して外部のSDKのjs関数を呼び出した記事はこちら
「LINE LIFF × Flutter Web：サンプルアプリで動作確認 〜js〜」

おわり

自作のjs関数も、外部のライブラリ内のjs関数を呼び出す時も、基本的な流れは同じ。
使用したいライブラリ等のCDNをindex.htmlに差し込んで呼び出す。