在 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 会给我们带来更多的惊喜!

欢迎加入iOS开发交流学习群(密码123),我们一起共同学习,共同成长

收录:原文地址

将 flutter_web 迁移到 flutter1.9+