Flutter のWebviewを触ってみたので感想

flutterとは

dart言語を使用してandroid, iOS, webのフロントエンド開発ができるパッケージ

webviewとは

アプリケーションにウェブサイトを表示すること
既存のウェブアプリがある場合などにその資産を生かしてミニマムでネイティブアプリを開発できる。

flutterでwebviewを実装する方法

flutterのwebview関連のプラグインは3つあります。

• webview_flutter
• flutter_webview_plugin
• flutter_inappwebview

webview_flutter(Flutter公式)

リンクはこちら
https://pub.dev/packages/webview_flutter

メリット

公式である安心感

何と言っても公式のプラグインなので長期的にきちんとメンテナンスされる可能性が高いでしょう。
これはポジティブ材料であると考えます。

レイアウトを組みやすい

デメリット

強いて言うなら、flutter_webview_pluginと比べて機能が少ない

v1.0.0で既存の問題が解消されたので、基本的にデメリットはないと思います。
強いて言うなら、flutter_webview_pluginと比較して、機能が少ないですが、必要最低限の機能は入ってると思います。（Evaluation JavascriptによるJSの実行とJavascript ChannelによるJSからdartへの通知）

flutter_webview_plugin

リンク
https://pub.dev/packages/flutter_webview_plugin

メリット

機能が充実している

用意されているパラメータやメソッドが多く、いろんなことができると思います。
また、どの子クラス、親クラスからも操作が可能です。

main.dart

Future<Null> launch(String url, {
    Map<String, String> headers: null,
    Set<JavascriptChannel> javascriptChannels: null,
    bool withJavascript: true,
    bool clearCache: false,
    bool clearCookies: false,
    bool hidden: false,
    bool enableAppScheme: true,
    Rect rect: null,
    String userAgent: null,
    bool withZoom: false,
    bool displayZoomControls: false,
    bool withLocalStorage: true,
    bool withLocalUrl: true,
    String localUrlScope: null,
    bool withOverviewMode: false,
    bool scrollBar: true,
    bool supportMultipleWindows: false,
    bool appCacheEnabled: false,
    bool allowFileURLs: false,
    bool useWideViewPort: false,
    String invalidUrlRegex: null,
    bool geolocationEnabled: false,
    bool debuggingEnabled: false,
    bool ignoreSSLErrors: false,
});

地味にウェブにも対応しているっぽい

使っていないのでわかりませんがウェブ版にも対応しているみたいです。

あまりバグもないっぽい（不確かな情報なのであまり参考にしないで欲しい）

一通り使ってみてバグが見つかりませんでした。
きちんとメンテナンスされているみたいです。

デメリット

Scaffold単位の生成

画面のレイアウトを作成して一部をwebviewにする場合でもScaffoldごと持ってかれます。
これは良さでもあり、逆に言えばどこからでもメソッドを叩くことができます。

公式ではない（flutter communityの認証はある）

公式ではないので最新のdartやflutterのバージョンへのキャッチアップがどこかのタイミングで遅れる可能性があると思います。

popすると親ルートにあるWebviewもdisposeされてしまう

webviewを使用しているページ（ページ1）→webviewを使用しているページ（ページ2）
といった遷移を行った際、ページ２においてpopすると、ページ1ではwebviewが表示されません。

flutter_inappwebview

https://pub.dev/packages/flutter_inappwebview
まず、こちらのプラグインに関しては、他に使っているプラグインが使用している何か（よくわかっていないし、面倒なので調査していない）とのバージョンの衝突で、自分の環境では動作しませんでした。
使っていない上でのレビューなのであまり参考にしない方がいいかもしれません。

メリット

海外のフォーラムで情報が比較的多く見つかる

flutterのwebviewに関する諸々のエラーについて調べると、stackoverflowをはじめとする海外サイトではやたら
... use inappwebview plugin instead! ...
みたいなレスを見つけます。
なんかいいところがあるのかもしれない（？）

デメリット

公式ではない

特にこのプラグインに関しては致命的に感じます。
おそらく最新のdartに対応するのに時間かかっているみたいです。
自分の環境ではそもそも動きませんでした。

総論

2020年5月現在、flutterでwebviewを使用するなら、機能が充実していて動作も安定している
flutter_webview_pluginを使用するのがいいと思います。
どこかのタイミングで公式が上回ることは考えられるので、書き換えられるようにコードを設計しておいた方がいいと思います。