[Flutter] WebViewについてまとめてみた
※gyazo上の画像を削除したことで添付のキャプチャが消えてしまいましたorz
文字だけでわかりにくいかもですが参考になれば幸いです。
下記のサイトを見ると本記事のイメージが掴みやすいかも
どのパッケージを利用するか
Flutterアプリ内でwebサイトを表示できる「WebView」を実装するにあたり、
２つのパッケージが候補に上がりました。
個人的なイメージですが参考までに
-
webview_flutter
→flutterのwebview実装にあたっては最もポピュラー
シンプルな実装であればこれで必要十分 -
flutter_inappwebview
→webview_flutterでできないこともこちらなら対応できるかも。ちょっと玄人向け
業務でどちらも利用する場面があったので、
そもそもFlutterで実現可能なWebViewについてから、
WebView実装時に困ったことや、それぞれで可能なことをまとめてみます。
Flutterで実現可能なWebViewの形式
1. flutterのWebView
webview_flutterで実現可能なシンプルなWebViewです
2. ネイティブなWebView
ネイティブのWebViewで表示しています
3. Chrome、SafariのWebView
アプリ内で、iOSはSafari、AndroidはChromeでWebViewを表示しています
4. 対照表
それぞれのパッケージで実現可能かどうかの表です。
webview_flutterでも可能かもしれませんが、少し大変かも。
| Package | 1. flutterのWebView | 2. ネイティブなWebView | 3. Chrome、SafariのWebView |
|---|---|---|---|
| webview_flutter | ○ | x | x |
| flutter_inappwebview | ○ | ○ | ○ |
注意が必要だったこと
次に、各WebViewで注意が必要だったことについて
1. flutterのWebView
-
[更新・戻る・進む]ボタン群の用意が必要
関数は用意されていますが、ボタン群のWidgetは自前で作成する必要があります。
-
アプリのAppBarとWebサイトのHeadが重なる問題
webサイトにも、アプリにもDrawerがあると、ユーザは困ってしまうかもですね。
対応は以下で可能だったりします。
・アプリ側でheader情報を指定し、webサイト側でhead情報を元に表示を制御する。
・アプリ内でjavascriptを読み込みcssで表示を制御する。
-
WebView内のTextFieldを押下時に出てくるキーボードが、TextFieldと被ってしまう問題
iOSだと「resizeToAvoidBottomInset: false,」を指定することで解消されますが、
Androidは調整が難しかったです。
だいぶ前のissueでは「HybridComposition」を適用することで解消されていたようですが、
当方ではうまくいきませんでした。
2. ネイティブなWebView
-
共有やコピーのところが日本語化できなそう
これに関してはそんな記事を見かけただけで、絶対できないというわけではないかもしれませんが難しそうでした。
また後述する「Chrome、SafariのWebView」を使えば解消されますし、あえて「ネイティブなWebView」を使うメリットも見当たらないかなと思っています。
3. Chrome、SafariのWebView
こちらは特に目立った問題はないという印象ですが強いて言えば以下
-
「flutter_inappwebview」に依存している
「ネイティブなWebView」にも共通していることですが、
「flutter_inappwebview」なしでは実装難しいのではないか？と。
Github上で数100件のissueと少々PRが残り続けている「flutter_inappwebview」なので、今後サポート終了となった場合は苦しくなる時がくるかも？
Discussion