Goolge開發者大會上，釋出了Flutter 1.9，更新內容很多，其中一項就是Web sdk 合入了Flutter sdk。也就是說我們可以真正做到一套程式碼打包android/ios/web/桌面(mac,windows,linux). 下面請跟著我走一邊坑。
開啟web支援
命令
flutter config --enable-web
轉換舊的flutter_web專案
如果你之前沒有使用package:flutter_web，那直接跳到新建一個flutter web app
官方wiki地址 Upgrading from package:flutter_web to the Flutter SDK
main.dart
舊的專案在web資料夾下面自動生成了一個main.dart
裡面主要做的事情是webOnlyInitializePlatform初始化，這個程式碼跟桌面版本是相似的，並且引導lib下面的main.dart的入口
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:json_to_dart/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
複製程式碼在新的web中，不再需要設定，而且web資料夾裡面也不需要這個main.dart了。
我們隨便看一下桌面版本的設定
void main() {
// See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
複製程式碼引用
從web sdk轉換為flutter sdk
字型
之前會發現，flutter for web裡面的一些icon全部都不能顯示。官方也解釋了，之前的web demo其實沒有將icon的字型檔案加入，自然是不顯示。最終的產物中就會有FontManifest.json檔案來指示字型檔案
flutter:
uses-material-design: true
複製程式碼assets
之前的assets 你需要寫在web資料夾下面才能生效，現在資原始檔跟Flutter使用使用是一樣的了。
引用
引用終於統一了，開心
執行
命令從
webdev serve或者 pub run build_runner serve 變成了flutter run -d chrome
新建一個flutter web app
官方wiki地址Building a web application with Flutter
sdk 1.9
首先我們要確保Flutter sdk 大於等於1.9
執行命令
flutter config --enable-web，如果報錯，說明sdk不對。
再執行flutter devices
建立
我們可以先建立一個Flutter 應用，然後再執行flutter create就會生成一個web的資料夾，包含index.html檔案
執行
flutter run -d chrome
flutter run -d chrome --release/--profile
或者vscode中選擇chrome，然後start debug
第一次會下載web sdk
打包
flutter build web 執行成功之後，會在build資料夾裡面生成web資料夾，build產物全部在裡面
assets:
- assets/
複製程式碼平臺區分
由於web是不支援 dart:io，那麼我們一份程式碼怎麼做到統一打包編譯？
之前提到過桌面需要在入口設定平臺為TargetPlatform.fuchsia
void main() {
// See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
複製程式碼那我們怎麼處理這個情況呢？我們下面說一下條件引入和匯出
條件 import/export
條件匯入匯出在dart 1和dart 2之中有所不同
在dart2中我們可以使用dart.library.io和dart.library.js 區分能夠呼叫io api（android/ios/桌面）還是web
import 'main_web.dart' if (dart.library.io) "main_io.dart";
export 'config_helper_web.dart' if (dart.library.io)"config_helper_io.dart";
複製程式碼建立io和web的檔案
拿config_helper.dart這個類來舉一個例子，它是用來快取配置資訊的：
- 在桌面上面是寫到目錄下面的檔案裡面
- 而對於web來說，呼叫的通過js來操控localStorage
期待改進
- yaml 檔案
yaml裡面有一些引用，比如資原始檔，字型檔案，可能這個平臺需要，另外的平臺不需要。 現在的方式是沒法做區別，唯一的方式就只能是打包之後，用指令碼來做移除 或者主入口建立不同的專案
- 程式碼
現在還沒辦法根據平臺來選擇是否執行某行程式碼，現在只能把他們放到不同的檔案，根據平臺來import。希望能像C#一樣增加可以新增平臺symbol
結語
週末把 JsonToDart 工具的Flutter部分,程式碼結構從
最最後放上Flutter Candies全家桶，真香。
