此代码库是配合 Flutter-web 官方预览版, 而对 Flutter Go 项目做的 web 版本的移植。
Flutter的Web支持尚不稳定。我们将此版本指定为技术预览版; 对 Flutter Go native 版本移植还原度大概在 80%左右。旨在帮助 Flutter 开发人员,快速熟悉 Flutter-web 官方的实践。
在 Flutter 官方宣布Flutter暂时不会开发热更新(Code push) 之后, Flutter-web 无疑是的动态更新代码最快捷的方式,虽然不是最佳方案,但是是最易用降级方案。
- git 拉取
Flutter-go项目,并切换到web/flutter-go-web-0.0.1分支
$ git clone -b web/flutter-go-web-0.0.1 https://github.com/alibaba/flutter-go.git flutter-go-web- 安装flutter_web构建工具
$ flutter pub global activate webdev- 更新pub包
$ pub get //... Resolving dependencies... Warning: You are using these overridden dependencies: ! flutter_web 0.0.0 from git https://github.com/flutter/flutter_web at 6cabfc in packages/flutter_web ! flutter_web_test 0.0.0 from git https://github.com/flutter/flutter_web at 6cabfc in packages/flutter_web_test ! flutter_web_ui 0.0.0 from git https://github.com/flutter/flutter_web at 6cabfc in packages/flutter_web_ui Got dependencies! Precompiling executables... (12.0s)- 开发模式,获取(无状态)热重载 webdev
$ webdev serve --auto restart [INFO] Building new asset graph completed, took 2.0s [INFO] Checking for unexpected pre-existing outputs. completed, took 1ms [INFO] Serving `web` on http://127.0.0.1:8080 [INFO] Running build completed, took 49.7s [INFO] Caching finalized dependency graph completed, took 421ms [INFO] Succeeded after 50.1s with 3309 outputs (9338 actions)-
浏览器打开 http://127.0.0.1:8080
-
发布模式,创建最终编译结果,这将创建一个build目录
index.html,main.dart.js以及使用静态HTTP服务器运行应用程序所需的其余文件。
$ webdev build- 线上展示地址
为了对已有 native 工程快速生成 flutter-web 版本,可以使用 trans2fw 工具。
trans2fw 介绍 是笔者开发的一个 自动化 flutter native 项目转化成 flutter-web 项目的工具。
-
首先拷贝 native 版本下的lib 文件夹到当前目录, 并重命名如: lib-cp。
-
安装
trans2fw工具, 并注册程序
$ pub global activate trans2fw $ pub global run trans2fw- 运行
trans2fw工具,根据提示输入
$ trans2fw [✓] 请输入需要转换的文件目录(相对于项目目录): lib-cp [✓] 是否覆盖原有文件 ? (y/N) y {path: lib-cp, cover: true} 使用输入文件目录:lib-cp 被转换的文件::lib-cp/Pagination.dart::32 被转换的文件::lib-cp/homeBanner-copy-copy.dart::32 ...