likes
comments
collection
share

将 flutter_web 迁移到 flutter1.9+

作者站长头像
站长
· 阅读数 2

在 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+