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批量上傳