Flutter WebView加载本地html的问题

Posted 2023-03-19

参考技术A 最近项目中，用到了flutter中的webview加载带有echarts控件的html文件，但是发现图表一直无法显示，通过查询相关资料，分析apk包文件，知道了是由于flutter项目中的文件打包后的路径发生变化，造成找不到相关依赖，特此记录一下，使用下面这个方法便可以解析出android和ios打包后的apk中资源文件的实际位置。

例如，你的资源文件是在flutter项目的根目录下的 'assets/files/echart-pie.html',
那 'getAssetsPath('assets/files/echart-pie.html')'才是打包成apk后，资源文件的实际路径。

按照上面的操作，你会发现在android设备上已经可以正常显示本地html页面了，但是IOS设备上还是一脸懵逼；不要慌，这块是由于webview_flutter本来就不支持加载本地文件，这时我们还需要修改下插件IOS部分的源码，FlutterWebView.m文件：

通过以上骚操作，就可以实现webview_flutter在android和ios设备上加载本地html文件了。

最后：推荐一个插件，已经在官方的基础上进行了优化
webview_flutter_plus

flutter 安卓webview 无法加载http解决方案net：：ERR_CLEARTEXT_NOT_PERMITTED

参考技术A 从Android 9.0（API级别28）开始，默认情况下禁用明文支持。因此http的url均无法在webview中加载

解决方案 首先保证App申明了网络权限

解决办法（1）：
在Application中打开一个开关

解决办法（2）：
res 下新建 xml 目录，创建文件：network_security_config.xml ，内容如下：

在 AndroidManifest.xml 的 application 标签添加配置：

解决办法（3）：
服务器和本地应用都改用 https
flutter 如果设置一个不管用那就把两个都设置下，如果还不管用关闭下工程从新打开下，app从新安装