Flutter 加载 HTML 的本地资源

Question

我正在加载 本地 HTML 使用 将文件转换为小部件flutter_webview 按以下方式打包:

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 中。

这些 Assets (CSS 和图像文件)被添加到项目中指定的 HTML 路径(相对本地路径)以及 中的位置。 pubspec .

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

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

当 HTML 文件在 webview 中加载时，CSS 不会反射(reflect)该页面的样式。
如果我在 HTML 中手动添加/编写 CSS(使用 <style> 元素来定义它)，它会工作得很好。

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

还贴了 here

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);