Index
いつものカウンターアプリのフローティングボタンを押下したら、javascriptのコードを呼ぶサンプルを作っていきます。
test.jsを作ります。
ただalartを呼び出すだけのコード。
|
1 2 3 |
function jsFunction() { alert('alart'); } |
web/index.htmlファイルに以下のようにしてtest.jsを追加します。
|
1 2 3 4 5 6 |
----中略----- <!-- This script adds the flutter initialization JS code --> <script src="flutter.js" defer></script> <script src="test.js" defer></script> </head> ----中略----- |
直接main.dartから呼び出しても良いのですが、見通しが悪くなってしまうので、jsを呼び出すようのbridge_to_js.dartを作成します。
|
1 2 3 4 5 |
import 'dart:js' as js; void callJsCode() { js.context.callMethod('jsFunction'); } |
特に注目したいのが「js.context.callMethod(‘jsFunction’);」で
第一引数に呼び出したいjsのメソッド名、第二引数以降にメソッドに渡す引数を入れてあげる。
第二引数以降は省略可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import 'bridge_to_js.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: const FloatingActionButton( onPressed: callJsCode, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } |
jsパッケージを使用していきます。
|
1 |
flutter pub add js |
①②までは一緒
以下のようにかきます。
|
1 2 3 4 5 6 |
library test; //呼び出したいjsファイル名 import 'package:js/js.dart'; @JS('jsFunction')//呼び出したいfunction名 external void callJsFunction();//dartで呼び出すときの呼び方を定義 |
一緒です。
githubにアップロードしてあります。
jsというパッケージを使う方法もあるようなのですが、使い方がわかりませんでした。。。
