Flutter for Linux 应用中如何显示 assets 文件夹下的 HTML 资源文件

Flutter 完全支持在 Linux 平台加载并显示 assets 目录下的 HTML 文件，以下是两种经过验证可落地的实现方案：

方案1：使用官方适配的 WebView 组件 #

webview_flutter 从 4.0 版本开始已支持 Linux 平台，直接通过内置方法即可加载本地 HTML 内容。

实现步骤 #

• 第一步：添加依赖到 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  # 核心WebView组件
  webview_flutter: ^4.4.0
  # Linux平台实现支持
  webview_flutter_linux: ^0.2.0

flutter:
  assets:
    # 声明你的HTML资源目录
    - assets/html/

• 第二步：代码实现加载逻辑

import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<HtmlLoadPage> createState() => _HtmlLoadPageState();
}

class _HtmlLoadPageState extends State<HtmlLoadPage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _initWebView();
  }

  Future<void> _initWebView() async {
    _controller = WebViewController();
    // 读取assets下的HTML文件内容
    final htmlContent = await rootBundle.loadString('assets/html/demo.html');
    // 加载HTML内容，若有相对路径的静态资源可补充baseUrl参数
    await _controller.loadHtmlString(htmlContent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('加载本地HTML')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

注意事项 #

如果你的 HTML 文件依赖同目录下的 CSS、JS、图片等相对路径资源，需要先将整个 assets/html 目录递归复制到应用本地可访问的临时目录（通过 path_provider 的 getTemporaryDirectory() 获取路径），再调用 _controller.loadRequest(Uri.file('临时目录路径/demo.html')) 即可正常加载所有关联资源。

方案2：本地HTTP服务代理（全桌面端通用） #

如果遇到 WebView 适配问题，可以使用本地轻量 HTTP 服务的通用方案，兼容性更强，支持所有桌面平台。

实现步骤 #

• 第一步：添加服务相关依赖

dependencies:
  shelf: ^1.4.0
  shelf_static: ^1.1.0
  path_provider: ^2.1.0

• 第二步：启动本地静态资源服务并加载

import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_static/shelf_static.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 应用启动时调用一次，启动本地服务
late HttpServer _localServer;
Future<void> startStaticServer() async {
  final handler = createStaticHandler(
    'assets/html',
    defaultDocument: 'demo.html',
  );
  _localServer = await shelf_io.serve(handler, 'localhost', 18080);
}

// WebView直接访问本地服务地址
_controller.loadRequest(Uri.parse('http://localhost:18080/demo.html'));

// 应用退出时关闭服务，避免端口占用
@override
void dispose() {
  _localServer.close();
  super.dispose();
}

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