Flutter 加载 HTML 的本地资源

Question

我通过以下方式使用flutter_webview包将本地 HTML文件加载到小部件中：

FutureBuilder<String>(
  future: LocalLoader().loadLocal(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
//      return Text("${snapshot.data}");
      return WebView(
        initialUrl: new Uri.dataFromString(snapshot.data, mimeType: 'text/html').toString(),
        javascriptMode: JavascriptMode.unrestricted,
      );

    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }
    return CircularProgressIndicator();
  }
)

它加载 HTML 就好了，但如果标签指向其他资源（例如同一位置的 CSS 文件或其他本地图像），它们将不会显示在 webview 中。

这些资产（CSS 和图像文件）被添加到项目中指定的 HTML 路径（相对本地路径）和pubspec中的位置。

例如，其中一个 HTML 文件包含此元素：

<link rel=stylesheet href=styles/main.css>

当 HTML 文件在 webview 中加载时，CSS 不会反映该页面的样式。如果我在 HTML 中手动添加/编写 CSS（使用<style>元素来定义它），它将正常工作。

关于如何让这些 HTML 加载其本地资源的任何建议？（即使这意味着改变包或它的实现方式）

也贴在这里

Answer 1

使用 Uri.directory 方法似乎对我有用。它呈现所有链接的 css 和 javascript 文件，而以字符串形式加载数据则不会。

final uri = Uri.directory("$your_local_file_path");
final uriString = uri.toString().substring(0, uri.toString().length - 1); /// Remove final slash symbol
_webViewController.loadUrl(uriString);