以前に公式のWebViewプラグイン「webview_flutter」について何度か紹介しましたが、その後「flutter_inappwebview」というとてもマルチな機能を搭載していて便利なプラグインを知りました。
webview_flutterの記事はこちら↓
今回はこの「flutter_inappwebview」の特徴と使い方を紹介したいと思います。
目次
flutter_inappwebviewで出来ること
このプラグインでは、WebView機能だけでなく、アプリ内で表示できるブラウザを扱う事ができます。
（公式のプラグインでは恐らくWebView機能のみ）
機能は大きくわけて「InAppWebView」「InAppBrowser」「ChromeSafariBrowser」の３つ用意されています。
この３つの機能の特徴と使い方について解説しますが、このプラグインはとても細かい設定が可能でこの記事で全てを書くことは出来ない為、それぞれの特徴と基本的な使い方を紹介します。
その他の詳しい情報は、githubのREADMEに細かく載っていますので確かめてみてください。
Pub.dev：https://pub.dev/packages/flutter_inappwebview
github：https://github.com/pichillilorenzo/flutter_inappwebview
３つの機能の特徴と使い方
前準備
pubspec.ymlにプラグインの設定を行います。
|
1 2 3 4 5 |
dependencies: flutter: sdk: flutter # ↓追加 flutter_inappwebview: ^2.1.0+1 |
使用するDartファイルに以下を記述しインポートします。
|
1 |
import 'package:flutter_inappwebview/flutter_inappwebview.dart'; |
InAppWebView （WebView表示機能）
スタンダードなWebView機能です。
githubをみてみると、下のように書かれています。
The plugin relies on Flutter’s mechanism (in developers preview) for embedding Android and iOS native views: AndroidView and UiKitView. Known issues are tagged with the platform-views label in the Flutter official repo. Keyboard support within webviews is also experimental.
「AndroidView」「UiKitView」を使ってネイティブのWebView機能をFlutterで表示させているようです。
- Android:
- iOS:
・実装方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import 'package:flutter_inappwebview/flutter_inappwebview.dart'; class AppWebView extends StatelessWidget { // URL final String appUrl; AppWebView({this.appUrl}); @override Widget build(BuildContext context) { ViewWidget _viewWidget = new ViewWidget(appUrl: appUrl); return SafeArea( left: false, right: false, bottom: false, child: Container( child: _viewWidget.createWidget(), ), ); } } /// webviewを表示させるWidget生成クラス class ViewWidget { // URL final String appUrl; ViewWidget({this.appUrl}); InAppWebViewController _webviewController; InAppWebView createWidget() { return InAppWebView( initialUrl: appUrl, initialHeaders: {}, initialOptions: InAppWebViewWidgetOptions( inAppWebViewOptions: InAppWebViewOptions( // 共通オプション horizontalScrollBarEnabled: false, verticalScrollBarEnabled: false, debuggingEnabled: true, ), iosInAppWebViewOptions: IosInAppWebViewOptions( // iOSオプション sharedCookiesEnabled: true, ), androidInAppWebViewOptions: AndroidInAppWebViewOptions( // Androidオプション thirdPartyCookiesEnabled: true, ), ), onWebViewCreated: (InAppWebViewController controller) async { /// ページ生成後に処理される関数 /// ページ生成後のオブジェクトを取得可能 _webviewController = controller; Favicon faviconUrl = await _getFavicon(); debugPrint(faviconUrl.url); }, ); } /// 表示サイトのfaviconを取得する関数 Future<Favicon> _getFavicon() async { List<Favicon> _favicon; _favicon = await _webviewController.getFavicons(); return _favicon[0]; } } |
InAppWebViewクラス内の引数を指定してWebViewをカスタマイズしていきます。
引数「initialUrl」または、引数「initialFaile」で表示させるwebサイトのURLを指定します。
「initialFaile」はプロジェクト内部のHTMLファイルを読み込む場合に指定します。
引数「initialOptions」では、WebViewの詳細な設定を行います。
共通、Android用、iOS用の３種類それぞれ設定可能です。
引数「onWebViewCreated」では、WebView生成後に処理させる関数を指定します。
この関数の引数のInAppWebViewControllerクラスのオブジェクトを取得でき、
生成したWebViewの情報を取得や変更ができる様々な関数を扱う事ができるようになります。
上のソースでは、例として表示されているサイトのfavicon情報をControllerを使って取得させています。
InAppBrowser （ブラウザ表示機能）
ネイティブWebViewを使用したアプリ内ブラウザ。
このクラスを利用する事でアプリ内にブラウザを実装する事ができます。
- iOS:
- Android:
・実装方法
コールバックをオーバーライドしてブラウザイベントを管理するために、InAppBrowserクラスを拡張するクラスを作成します。
とREADMEで書かれている為、InAppBrowserを継承したクラスを新たに作成して、ブラウザイベント用コールバック関数をオーバーライドします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
/// InAppBrowserを継承したオリジナルクラス class MyInAppBrowser extends InAppBrowser { /// 各関数をオーバーライドしてお好みの処理を記述する。 /// 以下はgithubの例そのままです。 @override Future onBrowserCreated() async { print("\n\nBrowser Created!\n\n"); } @override Future onLoadStart(String url) async { print("\n\nStarted $url\n\n"); } @override Future onLoadStop(String url) async { print("\n\nStopped $url\n\n"); } @override void onLoadError(String url, int code, String message) { print("Can't load $url.. Error: $message"); } @override void onProgressChanged(int progress) { print("Progress: $progress"); } @override void onExit() { print("\n\nBrowser closed!\n\n"); } @override void onLoadResource(LoadedResource response) { print("Started at: " + response.startTime.toString() + "ms ---> duration: " + response.duration.toString() + "ms " + response.url); } @override void onConsoleMessage(ConsoleMessage consoleMessage) { print(""" console output: message: ${consoleMessage.message} messageLevel: ${consoleMessage.messageLevel.toValue()} """); } } /// ブラウザ表示クラス class BrowserPage { /// ブラウザオブジェクト MyInAppBrowser browser; /// ブラウザ生成 Future<void> setBrowserPage() async { browser = new MyInAppBrowser(); await browser.open( url: "https://www.google.com/", options: InAppBrowserClassOptions( inAppBrowserOptions: InAppBrowserOptions( // 共通オプション toolbarTopBackgroundColor: "#2b374d", ), androidInAppBrowserOptions: AndroidInAppBrowserOptions( // Android用オプション ), iosInAppBrowserOptions: IosInAppBrowserOptions( // iOS用オプション toolbarBottomBackgroundColor: "#2b374d", closeButtonCaption: "閉じる", closeButtonColor: "#ffffff" ), ), ); } } |
ChromeSafariBrowser （ブラウザ表示機能）
AndroidではChrome、iOSではSafariを内部ブラウザとして使用するためのクラスです。
Chrome Custom Tabs Android / SFSafariViewController on iOS.
と記述されており、Android、iOSでそれぞれの機能を使う事ができるようです。
- iOS:
- Android:
・実装方法
「InAppBrowserフォールバックインスタンスを使用してChromeSafariBrowserインスタンスを初期化できます。」とあるので、先ほどと同じようにInAppBrowserクラスを継承したクラスと、ChromeSafariBrowserクラスを継承したクラスをそれぞれ用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/// InAppBrowserを継承したオリジナルクラス class MyInAppBrowser extends InAppBrowser { @override Future onLoadStart(String url) async { print("\n\nStarted $url\n\n"); } @override Future onLoadStop(String url) async { print("\n\nStopped $url\n\n"); } @override void onLoadError(String url, int code, String message) { print("\n\nCan't load $url.. Error: $message\n\n"); } @override void onExit() { print("\n\nBrowser closed!\n\n"); } } /// ChromeSafariBrowserを継承したオリジナルクラス class MyChromeSafariBrowser extends ChromeSafariBrowser { MyChromeSafariBrowser(browserFallback) : super(bFallback: browserFallback); @override void onOpened() { print("ChromeSafari browser opened"); } @override void onLoaded() { print("ChromeSafari browser loaded"); } @override void onClosed() { print("ChromeSafari browser closed"); } } class BrowserPage { /// ブラウザオブジェクト MyChromeSafariBrowser browser; /// ブラウザ生成 Future<void> setBrowserPage() async { browser = new MyChromeSafariBrowser(MyInAppBrowser()); // 引数にオリジナルクラスを指定 await browser.open( url: "https://www.google.com/", options: ChromeSafariBrowserClassOptions( androidChromeCustomTabsOptions: AndroidChromeCustomTabsOptions( // Android(Chrome)オプション addShareButton: false ), iosSafariOptions: IosSafariOptions( // iOS(Safari)オプション barCollapsingEnabled: true, preferredBarTintColor: "#2b374d", preferredControlTintColor: "#ffffff", ) ) ); } } |
最後に
他にここでは紹介できなかった機能もたくさん備わっているため、本格的にWebViewや内部ブラウザ作成を検討している方は、一度試してみてください。
検討の参考になれば幸いです。
