はじめに
前々回の記事でFlutterにWebViewを実装する方法を紹介しましたが、指定したURLにサクセスするだけの機能でした。
今回はWebViewを実装するに際によく使う進む、戻る、リロード等、もう少し詳しい紹介をしようと思います。
環境
- Flutter 1.22.5
- webview_flutter 1.0.7
実装方法
WebViewの実装方法は過去の記事で紹介しているのでそちらを参考にしてください。
サンプルコード
全体
まずは今回作成したサンプルの全体像をお見せします。
main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
WebViewController _webViewController;
bool _canGoBack = false;
bool _canGoForward = false;
@override
void initState() {
super.initState();
if (Platform.isAndroid) {
WebView.platform = SurfaceAndroidWebView();
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
actions: [
IconButton(
icon: Icon(Icons.refresh),
onPressed: _webViewController?.reload,
),
],
),
body: Center(
child: WebView(
initialUrl: "https://www.google.com",
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {
JavascriptChannel(
name: "Print",
onMessageReceived: (message) {
print(message.message);
},
),
},
onWebViewCreated: (controller) {
_webViewController = controller;
},
onPageStarted: (value) {},
onPageFinished: (value) async {
_canGoBack = await _webViewController?.canGoBack();
_canGoForward = await _webViewController?.canGoForward();
setState(() {});
},
onWebResourceError: (error) {
print("onWebResourceError : $error");
},
),
),
persistentFooterButtons: [
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: _canGoBack ? _webViewController?.goBack : null,
),
IconButton(
icon: Icon(Icons.arrow_forward),
onPressed: _canGoForward ? _webViewController?.goForward : null,
)
],
);
}
}
次からはよく使う機能を一つ一つ詳しく紹介していきます。
initialUrl
これは前回でも利用したパラメータでWebView表示時に最初に表示するURLのことです。
WebView(
...
initialUrl: "https://www.google.com",
...
),onWebViewCreated
これは進む、戻る、リロード等WebViewを操作する際に必要なWebViewControllerを返す関数です。
WebViewを操作する際には必ず必要で、WebView表示時に1回だけ呼ばれます。
この関数の引数のWebViewControllerを必ず取得してください。
WebView(
...
onWebViewCreated: (controller) {
_webViewController = controller;
},
...
),onPageStarted
この関数はWebViewがウェブページをロードし始めた際に呼ばれます。
今回のサンプルコードでは特に何もしていません。
WebView(
...
onPageStarted: (value) {},
...
),onPageFinished
この関数はWebViewがウェブページのロードが終わった際に呼ばれます。
今回のサンプルコードでは進むと戻るボタンの表示制御のために利用しています。
WebView(
...
onPageFinished: (value) async {
_canGoBack = await _webViewController?.canGoBack();
_canGoForward = await _webViewController?.canGoForward();
setState(() {});
},
...
),onWebResourceError
この関数はウェブリソースの読み込みに失敗した場合に呼ばれます。リソース(iframeや画像等)に限らず、あらゆるもので呼ばれるそうです。
今回のサンプルコードではデバッグ出力のみしています。
WebView(
...
onWebResourceError: (error) {
print("onWebResourceError : $error");
},
...
),javascriptMode
これを使うことでウェブページのJavascriptを制限することができます。ウェブページでJavascriptを使う必要があるならばunrestrictedに設定する必要があります。
| javascriptMode | 備考 |
| unrestricted | 無制限 |
| disabled | 制限する(default) |
今回のサンプルでは無制限に設定しています。
WebView(
...
javascriptMode: JavascriptMode.unrestricted,
...
),javascriptChannels
このパラメーターにハンドラーを登録しておくとウェブページからFlutter側のコードを実行することができるそうです。(動作未確認です)
WebView(
...
javascriptChannels: {
JavascriptChannel(
name: "Print",
onMessageReceived: (message) {
print(message.message);
},
),
},
...
),上記はFlutter(Dart)側のコードです。上記のコードを実行するためにウェブページに以下のようなJavascriptを埋め込み実行させるとFlutter側のコードが呼ばれ「Hello」とログに表示されます。
Print.postMessage('Hello');WebViewController
最後にWebViewを操作するためのWebViewControllerを紹介します。
loadUrl
指定したURLをロードします。
currentUrl
現在表示されているURLを取得できます。
canGoBack
戻るページがあるかどうか確認できます。
canGoForward
進むページがあるかどうか確認できます。
goBack
前のページに戻ります。
goForward
ページを進ませます。
reload
現在のページをリロードします。
clearCache
WebViewで使用している全てのキャッシュを削除します。(iOSのWKWebViewはまだサポートされていないそうです。)
この関数を呼び出すとリロードも行われます。
実行結果
サンプルコードの実行結果です。
さいごに
WebViewの操作もそんなに難しくないので是非実装してみてください。
コメント