时间戳

首页 > 解决方案 > Flutter - 如何在 WebViewScaffold 中加载本地 HTML 文件？

flutter - Flutter - 如何在 WebViewScaffold 中加载本地 HTML 文件？

问题描述

我正在尝试在我的文件中加载本地 HTML 文件，WebViewScaffold但是我没有onWebViewCreated插件webview_flutter提供的回调。我不能使用该依赖项，因为我想访问webview_flutter不提供的 webview 回调的状态侦听器。谁能告诉我如何加载本地文件？这是我目前的实施 -

   final Set<JavascriptChannel> jsChannels = [
      JavascriptChannel(
          name: 'Print',
          onMessageReceived: (JavascriptMessage message) {
            print(message.message);
          }),
    ].toSet();
    
    void main() {
      WidgetsFlutterBinding.ensureInitialized();
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      final flutterWebViewPlugin = FlutterWebviewPlugin();
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter WebView Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          routes: {
            '/': (_) => const MyHomePage(),
            '/widget': (_) {
              return WebviewScaffold(
                url: selectedUrl,  // How to load a local file here?
                javascriptChannels: jsChannels,
                mediaPlaybackRequiresUserGesture: false,
                appBar: AppBar(
                  title: const Text('Widget WebView'),
                ),
                withZoom: true,
                withLocalStorage: true,
                hidden: true,
                initialChild: Container(
                  color: Colors.redAccent,
                  child: const Center(
                    child: Text('Waiting.....'),
                  ),
                ),
            },
          },
        );
      }
    }

标签： flutterdartwebview

解决方案

您可以从用户的手机加载本地 HTML 文件，如下所示：

...
url: Uri.dataFromString(
    File('filePath').readAsStringSync(),
    mimeType: 'text/html',
).toString(),
...

如果你想从你的应用程序包中打开一个 html 文件（你的资产文件夹中的一个 html 文件），你可以这样做：

...
url: Uri.dataFromString(
    await rootBundle.loadString('assets/index.html'),
    mimeType: 'text/html',
).toString(),
...

注意：您必须pubspec.yaml像任何其他资产一样在资产部分中声明 html 文件。

推荐阅读