在 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 微信公眾號: