HTML、iframeを埋め込む方法。広告の埋め込み等に【Flutter Web】

flutter webでHTML要素を埋め込む

本記事では、flutterでHTMLやiframe要素を埋め込む方法を紹介します。
結論としては、webviewx パッケージを使って実装します。

webviewx | Flutter package

A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready.

元ドキュメントを読んでもよくわからんという方は、本記事を参考にしてみてください。

webviewxを使った埋め込み方法

まずは、パッケージを使えるようにしましょう。

以下のコマンドを実行します。

$ flutter pub add webviewx

pubspec.yamlに次のようなコードが追加されます。

dependencies:
  webviewx: ^0.2.1

これで、webviewxパッケージが利用できるようになります。Dartコードにimportしましょう。

import 'package:webviewx/webviewx.dart';

HTMLを埋め込むWidgetを作成する

パッケージのドキュメントのサンプルは余計なオプションが多いので、HTML要素を表示するのに必要な部分だけを残してできるだけシンプルなコードにしました。

import 'package:flutter/material.dart';
import 'package:webviewx/webviewx.dart';

class WebViewXPage extends StatefulWidget {
  const WebViewXPage({
    Key key,
  }) : super(key: key);

  @override
  _WebViewXPageState createState() => _WebViewXPageState();
}

class _WebViewXPageState extends State<WebViewXPage> {
  WebViewXController webviewController;
  //Size get screenSize => MediaQuery.of(context).size;

  @override
  void dispose() {
    webviewController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
          padding: const EdgeInsets.all(10.0),
          child: _buildWebViewX(),
        );
  }

  Widget _buildWebViewX() {
    return WebViewX(
      key: const ValueKey('webviewx'),
      initialContent: 'ここに表示したいiframeやHTMLコードを記載',
      initialSourceType: SourceType.html,
      height: 500,//サイズは適当
      width: 500,//サイズは適当
      onWebViewCreated: (controller) => webviewController = controller,
    );
  }

}

WebViewXPage()で、HTMLが埋め込まれたContainerが返されるので、表示したいところで呼び出しましょう。

上記コードの、initialContent: ‘ ‘　で、埋め込みたいHTML（iframe）コードを記載します。
ちなみにinitialSourceType: を　SourceType.url　にすることで、urlを埋め込むこともできます。