Flutter使用WebView加载本地html、css、js等资源

依赖及文档地址： GitHub | Pub

引入依赖

webview_flutter_plus: ^0.2.1+1

修改文件

IOS配置

修改ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>
<key>io.flutter.embedded_views_preview</key>
<true/>

Android配置

AndroidManifest.xml

android/app/src/main/AndroidManifest.xml

application标签添加android:usesCleartextTraffic="true"

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app">
  <application android:label="app" android:icon="@mipmap/ic_launcher" android:usesCleartextTraffic="true">
  <!--
  ................
  ...其他默认配置...
  ................
  -->
  </app;ication>
</manifest>

添加所需权限

android/app/src/profile/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
    <!-- Flutter needs it to communicate with the running application
         to allow setting breakpoints, to provide hot reload, etc.
    -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 下面两个为新加 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
</manifest>

修改pubspec.yaml

这里需要注意 index.html中用到的所有资源全部需要配置

flutter:
  uses-material-design: true

  assets: 
    - assets/files/index.html
    - assets/files/assets/three.min.js
    - assets/files/assets/spine-core.js
    - assets/files/assets/spine-canvas.js
    - assets/files/assets/jquery-3.1.0.min.js
    - assets/files/assets/spineboy-ess.json
    - assets/files/assets/spineboy-ess.json
    - assets/files/assets/spineboy.atlas
    - assets/files/assets/spineboy.png

使用

import 'package:flutter/material.dart';
import 'package:webview_flutter_plus/webview_flutter_plus.dart';

class WebWiewDemo extends StatefulWidget {
  @override
  _WebWiewDemoState createState() => _WebWiewDemoState();
}

class _WebWiewDemoState extends State<WebWiewDemo> {
  WebViewPlusController _controller;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading from Assets'),
      ),
      body: ListView(
        children: [
          Container(
            height: 400.0,
            child: WebViewPlus(
              onWebViewCreated: (controller) {
                this._controller = controller;
                controller.loadUrl('assets/files/index.html');
              },
              onPageFinished: (url) {},
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
        ],
      ),
    );
  }
}

搬过来的文档，纯属记录