Flutterでウェブ表示するwebview_flutterの特徴とその使い方について解説！

Flutterでアプリ開発をしているとウェブ表示をしたいという要望が出てくることがあります。そういう時に使えるwebvview_flutterというプラグインについて解説していきます。

Flutterのwebview_flutterとは？

webview_flutterは、Flutter上でウェブ表示をするためのプラグインです。Flutterを開発しているチームであるflutter.devが公式でサポートしています。

公式がサポートしていることもありFlutterのアップデートに追従してメンテナンスされているという良さがあります。

webview_flutterで出来ること

webview_futterには以下のような特徴があり、基本的な操作の提供や安定したメンテナンスなどが挙げられます。

• flutter.devで開発・メンテナンスされている
• 基本的なウェブビューの機能を利用できる
• AndroidのWebView、iOSのWKWebViewを利用する

使われているパッケージ

webview_flutterの内部では、下記のパッケージが利用されています。下記のパッケージを利用することで、OSごとの異なる挙動を吸収して同じような操作をすることができるようになっています。

• webview_flutter_wkwebview
• webview_flutter_android
• webview_flutter_platform_interface

flutter_inappwebviewとの違い

flutter_inappwebviewは、webview_flutterと比較するとプロダクトのニーズに合わせてより柔軟なインターフェースをカスタマイズできたり、多くの機能が提供されています。

webview_flutterの使い方

下記のコマンドでパッケージを追加するか、直接pubspec.ymlのdependenciesに追記するかでインストールすることができます。

flutter pub add webview_flutter

pubspec.ymlに追記する場合は、以下の通り。

dependencies:
  webview_flutter: ^4.7.0 // バージョンは適宜調整

追加した後、コンソール上で下記コマンドを実行します。

flutter pub get

Webページを表示する

Webページは、以下の方法でWebページを表示することができます。表示だけれあれば、非常に簡単にできてしまいます。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// WebviewControllerの初期化
controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))

  // NavigationDelegateの初期化
  ..setNavigationDelegate(NavigationDelegate())
  ..loadRequest(Uri.parse('https://flutter.dev'));

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter Simple Example')),
    body: WebViewWidget(controller: controller),
  );
}

ナビゲーション

その他、オプション的な操作

Cookieを操作する

webview_flutterは基本的クッキーの値を取得する方法を提供してないため、JavaScriptでクッキーを取得するためのコマンドを実装する必要があります。

final cookies = await _webViewController.runJavascriptReturningResult(
  'document.cookie',
);
print(cookies);

JavaScriptから実行する

WebViewControllerの関数を利用することでJavaScriptからflutterのコードを実行することができます。下記の例ではJavaScriptからFlutterのコードを callFlutterFunc という関数名で呼び出しています。

Future<void> setup() async {
	await webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);
	await webViewController.loadRequest(Uri.parse('http://10.0.2.2'));

	await webViewController.addJavaScriptChannel(
		'callFlutterFunc',
		onMessageReceived: flutterFunc,
	);
}

Future<void> flutterFunc(JavaScriptMessage result) async {
	final jsonData = jsonDecode(result.message) as Map<String, dynamic>;

	await _controller
		.runJavaScriptReturningResult(jsonData['message']});
}

下記がJavaScriptのコードです。

window.sendMessage.postMessage(JSON.stringify({ type: 'callFlutterFunc', message: "Hello, flutterFunc!" }));

UserAgent

ユーザーエージェントを取得する方法は、WebViewControllerのgetUserAgent()メソッドとして提供されています。

controller.getUserAgent();

Privacy Manifest 対応