PR

[Flutter]WebViewで色々な操作をする方法(進む、戻る、リロード等)

Flutter

はじめに

前々回の記事で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の操作もそんなに難しくないので是非実装してみてください。

おすすめ参考書

コメント

タイトルとURLをコピーしました