cover : “https://raw.githubusercontent.com/UtkarshVerma/blog/source/static/images/gci/gci-thumb.png" draft: false

FlutterでWebViewを使うためには少しいじる必要があります。

flutter_webview_plugin 

Flutterで Nativeの WebView を呼び出すには flutter_webview_plugin の依存を追加する必要があります。

1
2

dependencies:
  flutter_webview_plugin: "0.2.1+2"

バージョンはこちら からご覧ください。

ターミナル上で

flutter packages get

インストールすることで使えるようになります。

また、WebViewはWdigetTreeには統合されていないためSnackBarやDialogを使うところはできません。

インポート文は

1

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

実装 

Flutter Navigationを利用して起動します。 公式サンプルのままですが

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
              url: "https://www.google.com",
              appBar: new AppBar(
                title: new Text("Widget webview"),
              ),
            )
      },
    );

WebviewScaffold を使ってその中で諸々セットして使います。 特に難しいことはありません。

その他の使い方 

WebViewはシングルトンインスタンスで提供されているのでどこからでもイベントをハンドリングできます。

WebView内でページが移動した際のイベント 

WebViewで移動するイベントをハンドリングできます。

1
2
3
4
5

    final flutterWebViewPlugin = new FlutterWebviewPlugin();

    flutterWebViewPlugin.onUrlChanged.listen((String url) {
      print(url);
    });

WebView内のスクロールイベント 

WebView内のスクロールイベントをハンドリングできます。

1
2
3
4
5
6
7

    flutterWebViewPlugin.onScrollYChanged.listen((double offsetY) {
      print(offsetY);
    });

    flutterWebViewPlugin.onScrollXChanged.listen((double offsetX) {
      print(offsetX);
    });

WebViewを隠す、隠されたやつを表示する 

WebView を隠したり表示したりするには

1
2
3
4

    // 表示する
    flutterWebViewPlugin.launch("https://www.google.com", hidden: false);

    flutterWebViewPlugin.launch("url",hidden:true);

単純に隠したり表示したりするなら

1
2

    flutterWebViewPlugin.show();
    flutterWebViewPlugin.hide();

もあります。

リロード  

1

flutterWebViewPlugin.reloadUrl(url)

JS実行  

1

flutterWebViewPlugin.evalJavascript(code)

code は String です。

その他イベント 

  • Stream onDestroy
  • Stream onStateChanged
  • Stream onError

WebViewが破壊されたとき WebViewのステータスが変わった時 WebViewでエラーが起きた時　など。