Flutter for web でHTMLデータを表示

Platform WebのアプリとしてStringに代入したHTMLを表示するサンプルコードを作成する。

確認環境

% sw_vers
ProductName:		macOS
ProductVersion:		14.0
BuildVersion:		23A344
% flutter --version
Flutter 3.13.9 • channel stable • https://github.com/flutter/flutter.git
Framework • revision d211f42860 (6 weeks ago) • 2023-10-25 13:42:25 -0700
Engine • revision 0545f8705d
Tools • Dart 3.1.5 • DevTools 2.25.0
% 

コードの構成

• 「dialog」と表示されているボタンを押下する事で、SimpleDialogを表示し、あらかじめ固定値として設定したHTMLデータをレンダリングし表示させる。
• htmlをレンダリングするために標準パッケージのdart:ui_web、dart:htmlを利用する。
• dart:htmlは、web以外のPlatformでは推奨されない、または利用不可のライブラリの模様。

Don't use web-only libraries outside Flutter web plugin packages.
Try finding a different library for your needs.dartavoid_web_libraries_in_flutter

import 'package:flutter/material.dart';
import 'dart:ui_web' as ui;
import 'dart:html';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(body: MyApp()),
    ),
  );
}

class MyApp extends StatelessWidget {
  final IFrameElement _iframe = IFrameElement()
    ..srcdoc =
        "TEST10<br/><font size='5'>TE</font>ST<font color='red'>20</font></br><img src='https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg'/><br/>TEST30</br>TEST40</br>TEST50</br><a href='https://www.google.com' target='_blank'>https://www.google.com'</a><br/>TEST60"
    ..style.height = "100%"
    ..style.width = "100%";

  MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    ui.platformViewRegistry.registerViewFactory(
      'id',
      (int viewId) => _iframe,
    );
    return Container(
      alignment: Alignment.center,
      child: ElevatedButton(
        child: const Text(
          'dialog',
        ),
        onPressed: () => {
          showDialog(
            context: context,
            builder: (_) => const SimpleDialog(
              title: Text('title'),
              children: [
                SizedBox(
                  height: 100,
                  child: Scrollbar(
                    child: HtmlElementView(
                      viewType: 'id',
                    ),
                  ),
                ),
              ],
            ),
          )
        },
      ),
    );
  }
}

実行

テキスト以外にもリンクやイメージのレンダリングも正しく処理され表示することができた。