如何在flutter中显示本地html? [英] How to show a local html in flutter?

问题描述

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

I have a zip file to download. After it has been downloaded, I save it in External Storage (/storage/emulated/0/Android/data/...). I want to show a html page from the storage.

如何使用 webview 显示 html 页面?我还想要一个 javascript 函数，当我在 webview 中单击某些内容时可以加载该函数.

How to show the html page using webview? I also want a javascript function that can be loaded when I clicked something in webview.

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

I've tried using inappwebview but it can't load local html file from external storage.

推荐答案

using flutter_inappwebview plugin (using assets , you can manpulate to use what you want)

using flutter_inappwebview plugin (using assets ,you can manpulate to use whatever you want)

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview:


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

你要做的基本上是在应用程序内创建一个本地服务器，它会在 WebView 中运行 HTML 应用程序.

What you will do basically is you’ll create a local server inside the app and it’ll run the HTML app there in the WebView.

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！