A. FlutterWeb 和 WebView 原生交互调用
需要创建两个工程，一个是FlutterWeb工程最终打包成Web页面，一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次，可以直接使用社区Flutter原生工程的插件，只需要封装给Web调用。
FlutterWeb工程pubspec.yaml添加依赖
Flutter原生工程pubspec.yaml添加依赖
创建一个 toast_channel.dart，定义一个类实现 JavascriptChannel 重写name指定channel名称和onMessageReceived指定调用函数
在WebView的 javascriptChannels 配置上定义的Channel
创建一个 native_channel.dart ，定义一个外部函数通过 @JS("调用的channel和函数名") 注解指定调用的原生函数（JavascriptChannel固定名称为postMessage）
需要使用的地方直接调用
创建一个 js_function.dart，存放被原生调用的函数名称
将要提供给原生调用的函数，通过 js.context[原生调用名称] = 函数 开放给外部调用
如果在FlutterWeb工程要使用这个函数也可以使用@JS注解
WebView 创建时会回调 onWebViewCreated 获得 WebViewController ，WebViewController 调用 runJavascript 会执行JS函数无返回值，调用 runJavascriptReturningResult 会执行JS函数有返回值。
FutureBuilder获取WebViewController， 需要使用的地方直接调用
使用 HTML，CSS，Canvas 和 SVG 元素来渲染。
缺点：会存在不同平台效果不一样。
优点：不加载canvaskit默认使用系统字体，加载过程没有多余开销。
需要用到wasm，WebAssembly 要求需要浏览器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。
缺点：canvaskit 有7m大默认地址在国外首次加载耗时；中文会加载字体库默认地址在国外加载慢。
优点：性能更好，渲染效果一致。
--web-renderer=auto 默认移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
综上所诉推荐移动端使用HTML渲染更合适，在编译和打包时指定渲染器 --web-renderer=html 。
--debug 模式构建的 Web 应用没有被压缩，且 Tree-shaking 没有执行。
--profile 模式构建的 Web 应用没有被压缩，但 Tree-shaking 执行了。
--release 模式构建的 Web 应用被压缩了，并且 Tree-shaking 执行了
运行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
B. Flutter - APP打包
一、flutter ios 打包
方案一：
1、xcode 启动iOS项目 添加证书和描述文件
2. 命令 flutter build ios
等待一段时间 自动会在build/ios 下面的文件夹会输出.app 包， 输出路径有
/Users/turnmomment/development/hook_up/build/ios/iphoneos/Runner.app
3. 建一个文件夹命名Payload，将Runner.app 文件拷入该文件夹，将此此文件夹压缩成zip格式，重命名成ipa格式。好了，安装包可以装机测试了。
方案二： 直接使用使用archive 方式打包
二、 Android 打包：
1. 设置图标图片和启动页
2. 添加
lintOptions{
disable 'InvalidPackage'
checkReleaseBuilds false
}
3. 执行命令 flutter build apk
C. Flutter Web打包中文乱码
flutter web有三种渲染模式，auto 、html 和 canvaskit。
flutter build web命令默认的渲染模式为auto，这种模式在移动端使用html渲染，在pc端使用canvaskit渲染。
目前我的flutter版本是2.5.2，pc端浏览器使用canvaskit渲染时中文会出现短暂的乱码（方块叉号），像这样：
我们可以指定渲染模式为html，就不会有这个问题了，命令如下：
指定渲染模式为canvaskit的命令为：
2021.10.21：flutter web对中文的支持貌似不太好，在手机浏览器调试web项目时，textfield hinttext有中文输入会有卡顿bug
D. flutter-android打包
android打包教程：
1、在AndroidManifest中确定app的名字：
2、在app/build.gradle中设置安卓兼容版本targetSdkVersion和最低版本minSdkVersion，还有编译版本compileSdkVersion，还有设置包名applicationId，一般不用设置，除非你是要变更
4、添加启动图标，图标资源文件的位置如下：
看到这个文件的时候，就说明创建证书成功了
6、配置项目证书
在android目录下新建一个file文件key.properties，然后填写证书的信息如下：
7、启用混淆
在app路径中添加proguard-rules.pro文件（这个网络下就好了）
8、构建flutter build apk
E. Flutter打包产物
基于flutter版本1.9.1，低版本区别对待。
lib目录，libflutter.so文件，三个目录armeabi-v7a，x86_64和x86，支持arm平台32和x86的32和64。
asset目录，新增flutter_asset目录，三个文件，dart产物。
lib目录，libflutter.so文件，两个目录armeabi-v7，arm64-v8a，支持arm平台32和64。
asset目录，新增flutter_asset目录。
在release模式，libapp.so替代flutter老版本的一些dart产物，如下。
flutter命令打包生成产物，flutter命令脚本会调用dart命令。
dart的编译模式：
kernel snapshot 模式，开发阶段，isolate_snapshot_data，vm_snapshot_data，kernel_blob_bin是业务数据。
core jit，
生产阶段，dart的一种二进制模式，这是一种aot模式，vm和isolate。
任重而道远
F. Flutter-安卓/iOS打包流程
将生成的 key.jks 文件放置到如下图位置
key.properties文件中需要输入以下内容：
添加配置1(如图二)
重要配置(图三替换图四)
参考一
参考二
参考三
打包报错1:
android打包 提示checkreleasebuilds false
打包报错2:( signingConfigs 与 buildTypes 顺序错误 如图六)
打包报错3:
安装包无法安装 使用真机跑 完整报错应该类似下面这样：
如图新增 android:exported="true" 即可
参考
参考
参考
G. Flutter 的Android 、iOS 打包
Flutter 项目虽说是跨平台项目，但是项目的名称还是需要在不同的平台设置，不同平台的设置位置是：
1、 Android 项目名字配置是在 android/app/src/main/AndroidManifest.xml 文件中的 application 下的 android:label 。如下图所示:
2、 iOS 项目名字配置是在 ios/Runner/Info.plist 文件中的 dict 下的 <key>CFBundleName</key> <string>testapp</string> 。如下图所示:
Flutter 项目虽说是跨平台项目，但是项目的 Logo 图标还是需要在不同的平台设置，不同平台的设置位置是：
1、 Android 项目 Logo 配置是在图片放置在 android/app/src/main/res 下的对应目录下：
mipmap-mdpi : 48 _ 48
mipmap-hdpi : 72 _ 72
mipmap-xhdpi :96 _ 96
mipmap-xxhdpi :144 _ 144
mipmap-xxxhdpi :192 * 192。如下图所示:
然后，在 android/app/src/main/AndroidManifest.xml 路径下的 AndroidManifest.xml 文件中的 android:icon 。如下图所示：
2、 iOS 项目 Logo 的配置是在 ios/Runner/Assets.xcassets/AppIcon.appiconset 文件下，直接更换图片，名字不要改动 。如下图所示:
1、使用 cd 指令进入项目（testapp）的根目录(方便后面操作),如下图所示：
填写对应的值，如下图所示：
1、 build.gradle 文件的位置,如下图所示:
2、在 build.gradle 中配置 key.propreties 的全局变量,
如下图所示:
3、 build.gradle 文件中进行签名配置。
如下图所示:
注意： buildTypes 中的 signingConfig signingConfigs.debug 可以变更为 signingConfig signingConfigs.release ，这样在打包的时候，直接可以 flutter build apk ，否则就执行 flutter build apk --release 。如图所示：
1、 cd 进入功能（testapp） 的根目录，如下图所示：
2、执行 flutter build apk 指令，如下图所示：
我们打包成功， 生成的 apk 包在 build/app/outputs/apk/release/app-release.apk 目录下，如下图所示：
1、将真机通过 USB 链接到电脑上，如下图所示：
2、然后,在项目的根目录执行 flutter install , 如果出现电脑同时有多个设备时，就执行 flutter install -d deviceid 。如下图所示：
3、设备的安装过程如下：
1、必须一个 Xcode 开发工具
2、如果是 Window 的电脑，请安装 Mac 虚拟系统，进行安装 Xcode .
1、打开目录下的 Runner.xcworkspace 工程。
如下图所示：
2、在 ios 工程中配置 Signing & Capabilities , 如下图所示：
1、进入项目的根目录
2、打包指令 flutter build ios --release
如图所示：
3、使用 Xcode 工具进行打包
如图所示：
注意：进行该步骤，必须执行 flutter build ios --release 否则会报错。
打包成功，如下图所示：
H. flutter 打包web
先运行下,看当前flutter 是否支持web项目, 如果没有enable-web: true 则输入 flutter config --enable-web
这时候项目中就包含了web文件夹.
输入 flutter build web 就可以在build文件夹中生成web文件, 将它放到到tomcat或者其他容器就能访问了!
附上项目的测试连接: http://47.100.55.134:8080/web/#/
参考： https://flutter.cn/docs/development/platform-integration/web
I. flutter 图片压缩
原以为很难的东西，东找找西找找，只有一个鲁班压缩，但都不怎么维护状态最终找到好的办法，可以通过multi_image_picker库的二进制压缩
80就是压缩比例，默认为100
Assets为获取到的图片类型
上传的时候可以通过
multiImages就是存放Assets类型的图片数组，然后通过for循环遍历来批量添加图片
用dio批量上传