在 flutter 1.9 之前是通過 flutter_web 進行 web 開發。那麼如何將其進行遷移？
文字主要翻譯自： Upgrading from package:flutter_web to the Flutter SDK
flutter 環境
首先你需要將你的 flutter 升級到 >= 1.9。
$ flutter channel master
$ flutter upgrade
複製程式碼確認下自己安裝的版本， 2019/9/20 的版本：
$ flutter version
Flutter 1.10.6-pre.7 • channel master • https://github.com/flutter/flutter.git
Framework • revision d445304168 (25 hours ago) • 2019-09-19 02:11:41 -0400
Engine • revision 7fb14000fd
Tools • Dart 2.6.0 (build 2.6.0-dev.1.0 cb80ea7ba9)
複製程式碼啟用 web 支援
需啟用 web 支援，需要執行以下命令:
$ flutter config --enable-web
複製程式碼刪除 web/ 目錄
在現有的 flutter_web 根目錄下，在 web/main.dart 有類似程式碼:
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:example/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
複製程式碼如果你之前有其他在檔案在這個目錄下，比如我就有一份 assets 的資源（圖片、字型等）目錄。
把它先移動到專案根目錄中（或者備份一份到其他地方），下面有講資原始檔的變化。
現在我們需要將這個 web 目錄檔案刪除。
重新初始化 web/ 目錄
Flutter 有一個 web runner：可以使用 flutter create 命令初始化
$ flutter create .
複製程式碼在的專案中會有個新生成的 web/index.html。
更新 pubspec.yml
之前：
dependencies:
flutter_web: any
flutter_web_ui: any
複製程式碼需要變為：
dependencies:
flutter:
sdk: flutter
複製程式碼更新字型配置
移除 FontManifest.json 檔案，以標準方式指定字型，可以參閱 這篇的文章。
如果你使用了 Material Design 圖示，需要在 pubspec.yml 中新增
flutter:
uses-material-design: true
複製程式碼移動 assets
資原始檔需要放到專案的根目錄下，並在 pubspec.yaml 指定:
flutter:
assets:
- preview.png
複製程式碼或者，如果還有個別名的 my_assets 的資源目錄也在根目錄下，在配置中需要指明這個目錄
flutter:
assets:
- my_assets/
複製程式碼更改 imports
在任何使用 package:flutter_web 的匯入方式，需要替換為 package:flutter, 比如：
import 'package:flutter_web/material.dart';
import 'package:flutter_web_ui/ui.dart';
複製程式碼更改為：
import package:'flutter/material.dart';
import 'dart:ui';
複製程式碼flutter for web 還存在的問題
- 從 1.9 版開始，Flutter 新增了 web 支援，但缺少一些功能還有已知效能問題沒有解決。不建議將Web應用程式部署到生產環境中
- web app 不支援 hot reload。
- 暫時還不支援使用
flutter plugins - 還不支援
dart:io, 網路請求需要使用http庫。 - 還不支援
Platform.is
總結
flutter 在不斷的更新迭代優化中，flutter_web 整合到 flutter，一度程度上提振了下 flutter for web 熱情。相信 flutter 會給我們帶來更多的驚喜!
實戰操作，可以參考 swiftclub/site
本文到此完結，更多閱讀，可以關注 SwiftOldBird 微信公眾號: