はじめに
この記事では、ローカルHTMLファイルの読み込みやwebview_flutter 4.4.2を使ったWebViewの表示、JavaScriptとDartの連携に関する方法を記載します。記事が読者のお役に立てれば幸いです！
サンプルコード
test_page.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
@override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
late WebViewController controller;
late Future<void> controllerInitialization;
@override
void initState() {
super.initState();
controllerInitialization = initController();
}
Future<void> initController() async {
final html = await rootBundle.loadString('asset/index.html');
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(NavigationDelegate(onPageStarted: (String url) {
// ページが読み込まれたときにJavaScriptからDartに変数を渡す
getJavaScriptVariable();
}))
..loadRequest(
Uri.dataFromString(
html,
mimeType: "text/html",
encoding: Encoding.getByName("utf-8"),
),
);
}
Future<void> getJavaScriptVariable() async {
// JavaScriptの変数を取得
print("----------------------------------");
final test = await controller.runJavaScriptReturningResult("sendMs();");
print(test);
}
@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: controllerInitialization,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// 初期化が完了したらWebViewを表示
return Scaffold(
appBar: AppBar(title: Text("WebView")),
body: WebViewWidget(controller: controller),
);
} else {
// 初期化中はローディングなどを表示
return const CircularProgressIndicator();
}
},
);
}
}
asset/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>js_to_dart</title>
</head>
<body>
<h1>hello world</h1>
<script>
let testNum = 10;
function sendMs() {
return testNum;
}
</script>
</body>
</html>
pubspec.yaml
assets:
- asset/index.html
実行例
index.htmlを変更することでGoogle Mapも読み込むことができました。
おまけ
指定したURLをWebViewで描画する方法
loadRequestの部分を
..loadRequest(Uri.parse("URL"));
にするだけです。