Flutter1.9升级体验总结：flutter run -d chrome初次体验就报错

一、切换分支并升级到最新版本

建议使用master分支。使用 flutter upgrade 命令升级到最新版本。

二、使用命令flutter run -d chrome初次体验就报错了。

我新建了一个项目flutter_demo，然后我运行flutter run -d chrome，然而没反应。

What's the problem？我打开了谷歌浏览器，没有任何反应。

三、解决方案

步骤1.运行flutter config --enable-web命令，启动这个默认命令，来实现Flutter Web支持。

步骤2.运行flutter run -d chrome命令，会自动下载所需要的 Web SDK

步骤3.执行命令 flutter create .

步骤4.这时候再运行flutter run -d chrome即可自动把Flutter代码运行在浏览器上面了。

以下是浏览器截图：

总结

1.运行flutter config --enable-web命令

2.执行命令 flutter create .

3.以后创建任何Flutter项目，只需要执行 flutter run -d chrome 命令即可运行在浏览器了。

四、生成release版本的web文件

执行 flutter build web 命令即可把dart文件编译成html、js、css文件，然后就可以部署到网站了。

命令行使用如下所示：

编译生成的web需要的文件在项目的根路径的build/web里面，如下图红色框框所示：

五、部署到网站

（1）部署的时候遇到的坑和解决方案

问题1：部署到网页怎么也打不开页面，一直是空白的，仅仅是本地调试的时候是可以运行的。

我发现部署到GitHub或者外部网站，怎么也打不开网页，后来我看到了在项目的根路径的build/web里面，有一个main.dart.js.map的文件。里面引入了本地的flutter_web_sdk目录的相关文件。然后我就去找对应的文件所在路径。

◆ 问题一的解决方案：

找到Flutter安装路径(例如：我的是 E:/develop/flutter)，然后打开里面的bin/cache/flutter_web_sdk，将 flutter_web_sdk文件夹复制到 项目根目录/build/web里面，然后重新运行 flutter build web 即可。

问题2： FileSystemException: Deletion failed, path = '.dart_tool/build/flutter_web' (OS Error: 目录不是空的, errno = 145)

◆ 问题二的解决方案：

删除项目根目录的.dart_tools文件，然后重新执行命令 flutter build web 即可。

（三）问题3：Flutter Web不支持组件直接跳转到外部网页

Flutter里面的Button想要跳转到网页，我用的是 url_launcher跳转到外部网页，如果使用 flutter build web编译后的页面在浏览器没任何效果。

我已经给官方提了 issues，官方工作人员表示会尽快支持并完善该功能，还对我的反馈表示感谢。

（2）网站页面

我们这里只是演示一个计算器的小功能（代码来源于官方的sample），这里只是把计算器的那个代码转换为一个 Flutter Web功能的演示。

演示页面: aweiloveandroid.github.io/flutter_dem…

GitHub 首页: github.com/AweiLoveAnd…

（3）网站页面示例gif图形演示