將 flutter_web 遷移到 flutter1.9+

SwiftOldBird發表於2019-09-20

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

將 flutter_web 遷移到 flutter1.9+

相關文章