从 Flutter Go 到 Flutter Go web - 手把手带你轻松玩转 Flutter-web（一）

flutter_web_ui: any

dev_dependencies:
build_runner: any
build_web_compilers: any
build_daemon: any

dependency_overrides 优先直接引用github上的packages

dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_test:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_test
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui

当然 dependency_overrides 你也可以配置成本地路径，但是为了保证依赖库的最新，还是用git上的比较好, 下面是本地路径的配置。

dependency_overrides:
flutter_web:
path: ./packages/flutter_web
flutter_web_test:
path: ./packages/flutter_web_test
flutter_web_ui:
path: ./packages/flutter_web_ui

5. 更新 packages 包

$ flutter pub upgrade
! flutter_web 0.0.0 from path packages/flutter_web
! flutter_web_ui 0.0.0 from path packages/flutter_web_ui
Running “flutter pub upgrade” in hello_world… 5.0s

6. 拷贝 Flutter-go 项目下的 libs 到Flutter_go_web 目录下

7. 现在就可以使用 webdev 构建并启动开发服务器

$ webdev serve
或者 webdev 与热重载一起使用
$ webdev serve --auto restart

[INFO] Reading cached asset graph completed, took 598ms
[INFO] Checking for updates since last build completed, took 2.1s
[INFO] Starting resource servers…

之后提示一直在连接中, 说明 缺少 resource 资源文件，继续下面操作

8. 创建 web 入口

手动创建 web 文件夹，里面创建两个文件: index.html 为入口 html 页面 main.dart 为 html 引用文件

/// main.dart
import ‘package:flutter_web_ui/ui.dart’ as ui;
/// flutter_go 是项目名称，在pubspec.yaml 里已经设置
import ‘package:flutter_go/main.dart’ as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}

文件目录结构基本已经成型，如下：