displaying-html-in-flutter について
Flutter の Web とモバイルで HTML を表示し、操作する方法を説明するスキルです。プラットフォームごとの描画方法を扱い、実装済みパッケージとして easy_web_view を紹介します。
主な機能
- 01Flutter Web での HTML 表示
- 02iFrame によるコンテンツ描画
- 03モバイルでの WebView 利用
- 04URL とヘッダーの更新
活用シーン
- 01Flutter アプリでの HTML 表示
- 02Markdown や埋め込みコンテンツの表示
- 03モバイル WebView の URL 更新
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/displaying-html-in-flutterを入力して読み込まれたか確認します。
詳細
Flutter での HTML の表示
Flutter で表示して操作する必要がある HTML コンテンツがある場合があります。
オンラインデモ：https://rodydavis.github.io/easy_web_view/#/
すぐに使いたい方のために、以下の機能などをすべて利用できるパッケージを用意しました：https://pub.dev/packages/easy_web_view
はじめに
任意の名前で新しい Flutter プロジェクトを作成します。
iOS／Android で HTML コンテンツを表示する場合は、
pubspec.yamlに以下を追加する必要があります。
dependencies:
webview_flutter: ^0.3.15+1
Web
Flutter Web で HTML を表示するには、HTMLElementView を使用する必要があります。これはネイティブコンテンツを表示できるプラットフォームビューです。
まず、Element を登録し、必要なオプションをすべて追加します。ここでは iFrame 要素を作成し、Markdown、HTML、URL のいずれであるかに応じてソースを設定します。
有効な HTML を表示するには、src フィールドを次のように設定します。
_src = "data:text/html;charset=utf-8," + Uri.encodeComponent("HTML_CONTENT_HERE");
パッケージでは、Markdown を src に渡すこともできます。その場合は自動的に変換されます。
setup メソッドを呼び出したら、新しいプラットフォームビューを表示します。
先ほど「registerViewFactory」メソッドに登録したものと同じ viewType 文字列を使用する必要があります。
最後に、幅と高さを明示的に指定したコンテナーまたは SizedBox で囲みます。
モバイル
参照先：https://github.com/rodydavis/easy_web_view/blob/master/lib/src/mobile.dart
モバイルでの設定はもっと簡単です。Web ビューに渡す URL を更新するメソッドを追加しましょう。
コントローラーを作成します。
WebViewController _controller;
src が変更されるたびに、このメソッドを呼び出します。
_controller.loadUrl(_updateUrl(widget.src), headers: widget.headers);
最後に、ウィジェットツリーで HTML を表示しましょう。
まとめ
完全な例や高度なユースケースを確認したい場合は、こちらのソースをご覧ください：https://github.com/rodydavis/easy_web_view
すべてを手軽に利用したい場合は、こちらのパッケージをお使いください：https://pub.dev/packages/easy_web_view
改善に役立つものがあれば、ぜひ PR を作成してください（バグを見つけた場合も同様です）。
この方法で HTML を表示すると、通常の Web ページと同じように操作したり、テキストを選択したりできることがわかります。パッケージを使用する場合は、完全に有効な HTML ファイルを用意しなくても、埋め込みコンテンツや HTML 要素をそのまま渡すこともできます（たとえば YouTube 動画など）。