🐶
【Flutter】webview_flutter4.0に対応する備忘録
WWDCでのゴーグルがかっこいいと思った反面50万はちょっとためらうなと感じでいる最近です。
webView4.0で壊滅的に変更があって忘れるたびに調べるのが面倒なので備忘録をここに記載します。
基本
ただWebViewを呼び出すだけ
body: WebViewWidget(
controller: WebViewController()
..loadRequest(Uri.parse("https://www.google.com/")),
),
自分がよく使う設定
JSの有効化(デフォルトは無効)
..setJavaScriptMode(JavaScriptMode.unrestricted)
// 設定しないとajaxなど動作しない場合がある
背景色の設定
..setBackgroundColor(Colors.white)
// ナイトモード時に黒い背景がチラつくの防止
デリゲート
基本設定
..setNavigationDelegate(
NavigationDelegate( //この中で色々設定する
)
)
読み込み時処理
onPageStarted: (String url) {
//ページが読むこまれたときにする処理を記載
}
読み込み終了時処理
onPageFinished: (String url) async {
//ページが読むこまれたときにする処理を記載
// async/awaitを使用して非同期で処理したいことも書ける
}
ニッチなもの
遷移先を選択
// ..setNavigationDelegate(NavigationDelegate(この中の設定))
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith('https:flutter.dev')) {
// webView内で遷移しない
return NavigationDecision.prevent;
}
// webView上で遷移
return NavigationDecision.navigate;
},
Webviewの高さの取得
// ①宣言
dynamic _webVC = WebViewController();
double _height = 0;
// ②finishedで取得
onPageFinished: (_) async {
double _contentHeght = double.parse(
await _webVC.runJavaScriptReturningResult('document.documentElement.scrollHeight.toString()'),
);
// ③setStateで高さを設定
setState(() {
_height = _contentHeght;
});
最後に
自分備忘録用としてざっくりしか書いていないので間違ってるなどあればご指摘ください🙏
Discussion