【Flutter/Dart】WebViewの実装方法!WebViewControllerの使い方

この記事からわかること
- Flutter/DartでWebViewの実装させる方法
- webview_flutterパッケージの使い方
- NavigationDelegateとは?
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Xcode:16.0
- Flutter:3.29.2
- Dart:3.7.2
- webview_flutter:4.10.0
- Mac M1:Sonoma 14.6.1
FlutterでWebViewを実装する方法
FlutterでWebサイトをアプリ内から表示できるWebViewを実装する方法はいくつか存在します。
- webview_flutterパッケージ
- url_launcherパッケージ
どちらもアプリ内からWebサイトを表示することが可能ですが、webview_flutter
では表示しているWebViewのサイズやUIをコントロール可能ですが、url_launcher
では「In-App Browser」という仕組みでWebサイトが表示されるため、自動でフルスクリーンかつ周りの装飾も既存のものになります。

url_launcher
の実装は以下の記事を参考にしてください。
webview_flutterの使い方
webview_flutter
パッケージはデフォルトではこのパッケージを組み込まれていないのでflutter pub add webview_flutter
コマンドを実行して導入しておく必要があります。
これでimport
文を追加することで機能が利用できるようになります。
プラットフォーム固有のWebViewの持つ機能を利用したい場合はそれぞて別パッケージになっているので別途導入する必要があります。
WebView Widgetの実装
実際にWebViewを実装してみます。WebViewScreen
という外部から呼び出して使えるカスタムWebView Widgetを実装してみました。「GitHub」に掲載しているので参考にしてください。

ここからは細かく実装のポイントを確認していきます。
WebViewController
WebViewController
はWebViewの設定や操作を行うためのコントローラークラスです。以下の実装ではinitState
でWebViewController
を初期化し設定を行なっています。loadRequest
メソッドで表示したいURLを指定します。
JavaScriptの有効/無効はsetJavaScriptMode
で指定します。JavaScriptMode.unrestricted
で制限なし(=有効)、JavaScriptMode.disabled
で無効にできます。
WebViewWidget
実際にWebView UIを構築しているのはWebViewWidget
です。これは特に変わったことはなく引数にWebViewController
を指定することでWebViewが表示されるようになります。
進む / 戻る / リロード
WebViewでWebページを表示中の「進む / 戻る / リロード」などの操作もWebViewController
から行うことが可能です。「進む / 戻る」は呼び出す際にawait
が必要になります。
進む
戻る
戻る
さらに「進む / 戻る」はcanGoForward
/canGoBack
メソッドを使用して有効化どうかを識別できます。これをsetNavigationDelegate
に仕込んでおくことでページ読み込み完了後に進む / 戻るボタンの活性状態を更新するといった仕組みを実装することも可能です。
NavigationDelegate
NavigationDelegate
を使用することで以下のようなことが実装できるようになります。
- Webページの遷移を許可 / ブロック
- 特定のURLのときにカスタム処理(外部ブラウザで開くなど)を実行する
使用方法はWebViewController
の初期セットアップ時にsetNavigationDelegate
メソッドの引数にNavigationDelegate
型を指定します。例えば特定のドメインだけブロックしたい場合はonNavigationRequest
からNavigationRequest
型でリクエスト情報を参照できるのでULRをチェックし遷移をブロックしたい場合はNavigationDecision.prevent
を、遷移を許可したい場合はNavigationDecision.navigate
を返せばハンドリングできます。
定義を確認してみると他にもいろいろなイベントを取得することが可能です。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。