Flutter Web + GithubPage

这是一个Flutter Web在Github Page上的小尝试，在此记录一下，游戏代码来自@linuxsong/game2048，仅做了适应屏幕的修改。

https://ckaigrac.github.io/GithubPage/#/

我的Flutter入门级Demo

随着Flutter Web预览版的发布，基本可以预见未来Flutter All神教将会有自己的一片天空^ _ ^

screenshot.png

我的编写环境
vscode

$ flutter --version

Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7a4c33425d (2 weeks ago) • 2019-04-29 11:05:24 -0700
Engine • revision 52c7a1e849

Tools • Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

pubspec.yaml

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: any
  build_web_compilers: ^2.0.0
  build_test: any
  pedantic: ^1.0.0

在这之前务必确保安装了webdev、stagehand这两个插件。可使用如下命令安装，安装的过程中可能会提示添加环境变量。

> pub global activate webdev
> pub global activate stagehand

直接用vscode创建Flutter web project。等待创建完成，然后就可以在lib/main.dart进行代码编写,形式和flutter一样。

目前Flutter Web只支持Chrome浏览器的调试。在用vscoode要运行项目时，直接在lib/main.dart 页面直接按F5即可进入调试，每次更改代码保存之后需要刷新浏览器才能看到效果。

需要注意的是目前的第三方插件用在web上或多或少都会有问题。

代码编写完后可以使用命令生成main.dart.js、index.html

$ webdev build

main.dart.js、index.html这两个文件会出现在build/目录下，然后把这两个文件拷贝出来放到根目录下，提交到github上时就会自动匹配index.html文件，这样你的github page就完成了。