Flutter1.9升级体验总结(帮大家填坑了)

《Flutter1.9升级体验总结(帮大家填坑了)》

本文首发在微信公众号Flutter那些事,未经授权,严禁转载。谢谢合作。

今天是一年一度的中秋节,首先在这里祝愿大家中秋团员,阖家欢乐。希望大家吃好喝好玩好。感谢大家这么长时间一来对本公众号的大力支持。同时也非常感谢提出宝贵意见的小伙伴们。认识这么多可爱的小伙伴真的我的荣幸。节日之余,除了吃好喝好之外,别忘了停止学习,来这里有最新干货等着你哦。

在北京时间2019年9月10日的上午,谷歌正式对外公布了 Flutter1.9版本 ,然后我第一时间就体验了一把Flutter最新内容,其中也遇到了不少的坑,这里我写了一篇博客专门分享给大家,希望大家可以少走弯路。喜欢的话,就关注一下我的博客吧。

首先我这里画了一张流程图,放上来让大家先看看,熟悉一下,帮助大家更快的掌握整个流程。

《Flutter1.9升级体验总结(帮大家填坑了)》

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

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

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

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

《Flutter1.9升级体验总结(帮大家填坑了)》

What’s the problem?我打开了谷歌浏览器,没有任何反应。

三、解决方案

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

如果是windows,命令如下图所示:

《Flutter1.9升级体验总结(帮大家填坑了)》

然后会在电脑的 C:\Users\Administrator\AppData\Roaming 路径生成 flutter_settings 文件(Administrator是你的电脑名称),你可以用文本编辑器打开,内容是这样的:

{
  "enable-web": true
}

路径截图,如下图所示:

《Flutter1.9升级体验总结(帮大家填坑了)》

如果是mac,你只需要运行一次
~/.flutter_settings 这个命令,如果没有该文件会自动创建这个文件,然后将以下配置复制到
flutter_settings 文件即可:

{
  "enable-web": true
}

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

《Flutter1.9升级体验总结(帮大家填坑了)》

步骤3.执行命令 flutter create .注:千万别忘了后面的点,这是一个大坑。)

《Flutter1.9升级体验总结(帮大家填坑了)》

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

《Flutter1.9升级体验总结(帮大家填坑了)》

以下是浏览器截图:

《Flutter1.9升级体验总结(帮大家填坑了)》

总结

1.运行flutter config --enable-web命令
2.执行命令 flutter create . (千万别忘了后面的点,这是一个大坑。)
3.以后创建任何Flutter项目,只需要执行 flutter run -d chrome 命令即可运行在浏览器了。

四、生成release版本的web文件

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

命令行使用如下所示:

《Flutter1.9升级体验总结(帮大家填坑了)》

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

《Flutter1.9升级体验总结(帮大家填坑了)》

五、部署到网站

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

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

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

◆ 问题一的解决方案:

找到Flutter安装路径(例如:我的是 E:/develop/flutter),然后打开里面的bin/cache/flutter_web_sdk/flutter_web_sdk/,将里面这层 flutter_web_sdk文件夹的所有内容复制到 项目根目录/build/web里面,然后重新运行 flutter build web 即可。(PS:不知道为啥会有两层同名文件夹?真是坑大了。。)

具体拷贝哪一个目录,请看下图:

《Flutter1.9升级体验总结(帮大家填坑了)》

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

《Flutter1.9升级体验总结(帮大家填坑了)》

◆ 问题二的解决方案:

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

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

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

《Flutter1.9升级体验总结(帮大家填坑了)》

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

(2)网站页面

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

演示页面: https://aweiloveandroid.githu…

GitHub 首页: https://github.com/AweiLoveAn…

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

《Flutter1.9升级体验总结(帮大家填坑了)》

更多精彩干货,欢迎关注微信公众号 Flutter那些事

    原文作者:AWeiLoveAndroid
    原文地址: https://segmentfault.com/a/1190000020382634
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注