Question

我有一个要下载的zip文件。下载后，我将其保存在外部存储（/ storage / emulated / 0 / Android / data / ...）中。我想显示存储中的html页面。

如何使用webview显示html页面？我还想要一个当我在Webview中单击某些东西时可以加载的javascript函数。

我尝试使用inappwebview，但无法从外部存储加载本地html文件。

Answer 1

使用flutter_inappwebview插件（使用资产，您可以随意使用所需的任何内容）

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview:


assets:
    - assets/index.html
    - assets/css/
    - assets/images/
    - assets/js/
    - assets/conditions/

基本上，您要做的是在应用内创建本地服务器，并在WebView中运行HTML应用。

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
InAppLocalhostServer localhostServer = new InAppLocalhostServer();
Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hi! There!!',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State < MyHomePage > {
  InAppWebViewController webView;
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (await webView.canGoBack()) {
          webView.goBack();
          return false;
        }
        return true;
      },
      child: Scaffold(
        body: Container(
          child: Column(children: < Widget > [
            Expanded(
              child: Container(
                margin: const EdgeInsets.only(top: 30.0),
                  child: InAppWebView(
                    initialUrl: "http://localhost:8080/assets/index.html",
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                  ),
              ),
            )
          ])
        ),
      ),
    );
  }
  @override
  void dispose() {
    localhostServer.close();
    super.dispose();
  }
}

如何在Flutter中显示本地HTML？

1 个答案: