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

2019-09-1316:14:37APP与小程序开发Comments6,542 views字数 1440阅读模式

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

建议使用master分支。使用 flutter upgrade 命令升级到最新版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

我新建了一个项目flutter_demo,然后我运行flutter run -d chrome,然而没反应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

What's the problem?我打开了谷歌浏览器,没有任何反应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

三、解决方案

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

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

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

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

步骤3.执行命令 flutter create .

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

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

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

以下是浏览器截图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

总结

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

四、生成release版本的web文件

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

命令行使用如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

编译生成的web需要的文件在项目的根路径的build/web里面,如下图红色框框所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

五、部署到网站

(1)部署的时候遇到的坑和解决方案

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

我发现部署到GitHub或者外部网站,怎么也打不开网页,后来我看到了在项目的根路径的build/web里面,有一个main.dart.js.map的文件。里面引入了本地的flutter_web_sdk目录的相关文件。然后我就去找对应的文件所在路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

◆ 问题一的解决方案:

找到Flutter安装路径(例如:我的是 E:/develop/flutter),然后打开里面的bin/cache/flutter_web_sdk,将 flutter_web_sdk文件夹复制到 项目根目录/build/web里面,然后重新运行 flutter build web 即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

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

◆ 问题二的解决方案:

删除项目根目录的.dart_tools文件,然后重新执行命令 flutter build web 即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

(三)问题3:Flutter Web不支持组件直接跳转到外部网页

Flutter里面的Button想要跳转到网页,我用的是 url_launcher跳转到外部网页,如果使用 flutter build web编译后的页面在浏览器没任何效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

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

我已经给官方提了 issues,官方工作人员表示会尽快支持并完善该功能,还对我的反馈表示感谢。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

(2)网站页面

我们这里只是演示一个计算器的小功能(代码来源于官方的sample),这里只是把计算器的那个代码转换为一个 Flutter Web功能的演示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

演示页面: aweiloveandroid.github.io/flutter_dem…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

GitHub 首页: github.com/AweiLoveAnd…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

(3)网站页面示例gif图形演示

Flutter1.9升级体验总结:flutter run -d chrome初次体验就报错
作者:AWeiLoveAndroid
来源:掘金文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16423.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/16423.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定