如何在Flutter的Android和Web平台上查看HTML文件？

你当前用webview_flutter实现了Android端的HTML查看，但该插件默认不支持Web平台，以下是两种可行的跨平台实现方案：

方案1：为Web平台添加webview_flutter_web适配插件 #

1. 在pubspec.yaml中添加依赖：

dependencies:
  webview_flutter: ^4.4.0
  webview_flutter_web: ^0.2.2+1

2. 修改原代码，插件会自动处理Web平台适配：

import 'package:flutter/foundation.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

class HelpScreen extends StatefulWidget {
  const HelpScreen({super.key});

  @override
  HelpScreenState createState() {
    return HelpScreenState();
  }
}

class HelpScreenState extends State<HelpScreen> {
  WebViewController? _controller;

  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      WebViewPlatform.instance = WebWebViewPlatform();
    }
    _initController();
  }

  void _initController() {
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // 更新加载进度
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadFlutterAsset("assets/Help.html");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'help'.tr,
            style: AppStyle.buildToolbarCommandTextStyle(),
          ),
          backgroundColor: AppStyle.logoGreen,
        ),
        body: _controller != null ? WebViewWidget(controller: _controller!) : const SizedBox());
  }
}

方案2：平台差异化实现（Web端用iframe嵌入） #

无需额外插件，针对Web平台直接用HtmlElementView嵌入iframe加载本地HTML：

1. 确保assets/Help.html在pubspec.yaml中声明资源：

flutter:
  assets:
    - assets/Help.html

2. 修改代码：

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

class HelpScreen extends StatefulWidget {
  const HelpScreen({super.key});

  @override
  HelpScreenState createState() {
    return HelpScreenState();
  }
}

class HelpScreenState extends State<HelpScreen> {
  WebViewController? _controller;
  final String _iframeId = 'help-html-iframe';

  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      ui.platformViewRegistry.registerViewFactory(
        _iframeId,
        (int viewId) => html.IFrameElement()
          ..width = '100%'
          ..height = '100%'
          ..src = 'assets/Help.html'
          ..style.border = 'none',
      );
    } else {
      _initController();
    }
  }

  void _initController() {
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {},
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadFlutterAsset("assets/Help.html");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'help'.tr,
          style: AppStyle.buildToolbarCommandTextStyle(),
        ),
        backgroundColor: AppStyle.logoGreen,
      ),
      body: kIsWeb
          ? HtmlElementView(viewType: _iframeId)
          : (_controller != null ? WebViewWidget(controller: _controller!) : const SizedBox()),
    );
  }
}

注意事项 #

• 确认assets/Help.html路径正确，且已在pubspec.yaml中完成资源配置
• 方案1需注意插件版本兼容性，优先使用最新稳定版
• 方案2中Web端iframe加载本地资源，需确保Flutter Web打包后的资源路径无误

内容的提问来源于stack exchange，提问作者autumn_2309