Question

我想在Web视图中显示一个html文件夹，其中包括CSS和javascript。像这个文件夹一样：javascript_button

此文件夹应位于内存的sdcard路径上，而不是在应用程序资产文件夹中。我尝试了各种插件，例如webview_flutter，flutter_inappbrowser和flutter_webview_plugin，但没有得到结果。使用以下方法，我只能读取index.html，并且文件夹内未显示其他任何相关文件。请帮我解决这个问题。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  String filePath = '/sdcard/Download/button/index.html';
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        "/": (_) => WebviewScaffold(
          url:new Uri.dataFromString(readFileAsync(filePath), mimeType:
               'text/html').toString(),
          appBar: AppBar(
            title: Text("webview"),
          ),
          withJavascript: true,
          supportMultipleWindows: true,
          withLocalUrl: true,
          allowFileURLs: true,
          withLocalStorage: true,
        )
      },
    );
  }
  
  String readFileAsync(String path) {
    String contents = new File('$path').readAsStringSync();
    print(contents);
    return contents;
  }
}

Answer 1

  body: FutureBuilder<String>(
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return new WebviewScaffold(
              withZoom: true,
              url: new Uri.dataFromString(snapshot.data,
                      mimeType: 'text/html',
                      encoding: Encoding.getByName('utf-8'))
                  .toString(),
              withLocalStorage: true,
            );
          } else if (snapshot.hasError) {
            return Scaffold(
              body: Center(
                child: Text("${snapshot.error}"),
              ),
            );
          }
          return Scaffold(
            body: new Center(
              child: CircularProgressIndicator(),
            ),
          );
        },
        future: _getFile(),
      )

Future<String> _getFile() async {
    return await rootBundle.loadString('web/html/bookDetails.html');
  }

Answer 2

通过Scaffold中的Webview_Flutter插件使用此代码：

  WebView(
            initialUrl: '',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _webViewController = webViewController;
              _loadHtmlFromAssets();
            },
          ),

// function to load Assets files
//filePath in bellow code for ex.(String filePath = '/assests/files/abc1.html';)


_loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString(filePath);
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
        mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

如何在webview中显示本地html文件夹

2 个答案: