Flutter webView访问本地html，h5引入本地的js、css、等静态资源无效问题。

解决方案：

1、将所有静态资源放在服务器，所有静态资源访问服务器。可以实现。

 

2、本地起个webserver，然后访问html，可以实现。

 

第一种方案很简单，这里不讲，着重讲第二种实现方案。

 

1、需要的插件

jaguar_flutter_asset: ^2.2.0    //开启本地服务器的插件

webview_flutter: ^0.3.9  //官方webview插件

2、工程目录

3、配置pubspec.yaml。这里有个重点：每个目录都要配置。不管层级多深

4、代码

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:jaguar/jaguar.dart';
import 'package:jaguar_flutter_asset/jaguar_flutter_asset.dart';

class WebViewLocal extends StatefulWidget {
  @override
  _WebViewLocalState createState() => _WebViewLocalState();
}

class _WebViewLocalState extends State<WebViewLocal> {
  @override
  void initState() {
    super.initState();
    _startService();
  }

  _startService() async {
    final server = Jaguar(address: "127.0.0.1", port: 8000);
    server.addRoute(serveFlutterAssets());
    await server.serve(logRequests: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('享你来服务条款')),
      body: WebView(
        initialUrl: "http://127.0.0.1:8000/files/index.html",
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (String value) {},
        onWebViewCreated: (WebViewController webViewController) {},
      ),
    );
  }
}