【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

  • このエントリーをはてなブックマークに追加

FlutterにもWebViewを使うことができるWebView_Flutterという公式プラグインがあります。

この記事では、このプラグインを使ってアプリにWebサイトの表示とアプリの中に実装したローカルHTMLファイルを表示させる方法を紹介します。

pub.dev: https://pub.dev/packages/webview_flutter

 

ただ、WebViewを取り扱っている日本語ドキュメントが少なく、英文もしくは中国語ばっかりだったので(2019年現在)、私のできる範囲で調査した内容をこの記事で紹介します。

私のようにFlutterでWeb技術を搭載したいと考えている人の参考になればと思います。

WebViewをプロジェクトに導入する

こちらの記事を参考にさせていただきました

Google公式Flutter用WebViewプラグインを一通り使ってみた

WebView_Flutterのインストール

上記したpub.devや解説動画にもある通りの手順で導入していきます。

まず、pub spec.yml(Flutterのプラグインなどを管理するファイル)にWebView_Flutterを追加します。

 

次に、「flutter pub get」をコマンドラインで実行とありますが、VisualStudio Codeを使用している場合、ymlファイルを上書き保存するだけで自動でこのコマンドを実行してくれます。

 

iOSでも有効化させる

iOSでも有効にするために、「ios/Runner/Info.plist」を開き以下のように記述を追加します。

 

import

最後に、WebViewを使用するDartファイルトップにimportします。

 

WebViewプラグインを使ってWebサイトを開く

まずはGoogle検索ページを表示させてみます。

main.dartを以下のように変更を加えます。

 

「WebView」というウィジェットが使えるようになっているので、このウィジェットで設定を行なっていきます。

ここでは下の二つの引数に値を渡しています。

引数 内容
initialUrl: 呼び出すWebサイトのURLを文字列で渡す
javascriptMode: JavaScriptを有効無効を設定。

JavascriptMode.unrestricted 有効

JavascriptMode.disabled 無効

 

ここまで設定できたら、デバックモードでアプリを実行してみましょう。

Googleの検索ページをただ表示させているだけですが、アプリにWebページを埋め込むことができました。

 

ローカルHTMLファイルを読み込む

Webサイトのページを読み込む以外にも、ローカルHTMLファイルにアクセスすることも可能です。

今回読み込ませる「test.html」ファイルはこちら↓

文字列を表示させるだけのシンプルなHTMLファイルです。

 

HTMLファイルを読み込ませるには、assetsフォルダー内にHTMLを格納してpubspec.ymlに宣言しておく必要があります。

↓こちらのサイトを参考にしました。

Flutter – Read text file from assets

 

まず、プロジェクトルート直下に「assets」というフォルダーを用意します。

その中に、「test.html」ファイルを設置します。

その後、pubspec.ymlに以下のように記述してフォルダー内のファイルの使用を宣言します。

 

これでtest.htmlファイルを利用する準備が出来たので、早速呼び出してみます。

先ほどのmain.dartを以下のように修正します。

 

少しややこしいですが、WebViewControllerというWebView情報を操作できるクラス型の情報をWebView生成時に呼び出されるonWebViewCreatedメソッドから取得しています。

onWebViewCreatedメソッド内で呼び出している_loadHtmlFromAssetsメソッドで、取得したControllerにローカルHTMLの情報を受け渡しています。

 

修正したら、実行してみます。

 

JavaScriptとDart間でデータの通信するには?

こちらのやり方は次の記事で紹介したいと思います。

【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*