建议使用 master 分支。使用 flutter upgrade 命令升级到最新版本。如果升级过程出现 dart sdk 错误,或者下载失败异常,或者一直报红色的,请查看我之前发布的两篇填坑指南,解决方案都是一样的,这里就不作重复讲解了。

使用命令 flutter run -d chrome  初次体验就报错了。我新建了一个项目flutter_demo,然后我运行 flutter run -d chrome,然而没反应。

What's the problem? 我打开谷歌浏览器,再去执行命令,还是无反应,出现问题必须解决!!这坚决不能忍!!!!接下来我就彻夜未眠的研究了一下解决方案。

当时我也是花了好长时间才找到解决方案的,我在这里详细记录一下我的天坑过程,主要包括以下这几个步骤:

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

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

执行命令 flutter create . ,千万 别忘了这个命令最后有一个点,这个必须加上。

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

以下是浏览器截图:

总结一下主要有这三个步骤:

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

★ 2. 执行命令 flutter create .

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

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

命令行使用如下所示:

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

部署到网站这里也遇到了几个问题,我在这里逐个记录并说明解决问题的过程。请查看下文详细介绍。

问题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,官方工作人员表示会尽快支持并完善该功能,还对我的反馈表示感谢。

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

演示页面:

https://aweiloveandroid.github.io/flutter_demo/#/

GitHub 首页: 

https://github.com/AweiLoveAndroid/AweiLoveAndroid.github.io

网站演示如下图所示:

【干货好文】

  • Flutter 插件开发详细讲解

  • Flutter for Web 详细介绍

  • Flutter 1.9正式版发布了,最新特性全面分析

  • Flutter 路由详解

  • Flutter布局篇(1)--水平和垂直布局详解

  • Flutter 代码模板,解放双手,提高开发效率必备

  • Flutter 遇到的那些坑全面总结

  • Flutter 配置安装全面总结

在这里也欢迎各位多提意见。如果大家有什么意见或建议,欢迎在公众号里面留言,感谢大家的支持。

cacti升级后还是用的旧路径_Flutter1.9升级体验及填坑全攻略相关推荐

  1. 主板后置音频接口图解_不用再看说明书 机箱主板接线全攻略

    1细节决定装机成败 攒机过程中具备着很多细节,很多DIY高手对此都会很随意,很多时候由于随意就会出现USB接口接触不良,有的出现声卡没有声音.这些都是因为在装机过程中发生的不经意的事情,尤其对于入门级 ...

  2. 路由器linux版本升级,华为路由器升级全攻略

    华为路由器升级全攻略 近来手痒,为各位兄弟们贡献一篇本人在工作维护现场整理的华为路由器实战升级攻略以Quidway R26XX/36XX为例) 关于路由器的升级,华为路由器分为: 硬件升级---加扩展 ...

  3. 魔兽世界怀旧服务器无限刷怪点,魔兽世界怀旧服法师A怪升级路线地点 法师刷怪速升60全攻略...

    魔兽世界怀旧服的法师是除了猎人之外最好升级的职业,也是速度第二快的职业,A怪升级成为了很多法师的选择,那么问题就来了,怎么A怪从1级到60级满级呢?下面就来为大家分享一下A怪到满级的路线. 法师刷怪速 ...

  4. 加点、打怪、升级、《问道》新区全攻略

    加点.打怪.升级.<问道>新区全攻略 问道推 广人gyhxdt0090     问道推 广人gyhxdt0090     伴随<问道>新区陆续开放,新手玩家不断涌入,作为一名骨 ...

  5. Python语言学习:创建/删除文件/文件夹、获取当前文件/文件夹路径(系统环境路径/目录)、获取当前文件夹下的所有子文件路径等代码(os系列用法)实现之详细攻略

    Python语言学习:创建/删除文件/文件夹.获取当前文件/文件夹路径(系统环境路径/目录).获取当前文件夹下的所有子文件路径等代码(os系列用法)实现之详细攻略 目录 系统环境路径的设置 1.sys ...

  6. 小度机器人小胖机器人_小度机器人怎么升级?智能机器人百小度快速升级全攻略[多图]...

    类型: 大小: 评分: 平台: 标签: 百小度机器人怎么升级?该如何操作呢?估计很多用户还不太了解,没关系,下面是友情下载小麦整理出来的智能机器人百小度升级全攻略,希望可以帮到大家,希望就跟随小麦一起 ...

  7. [南帝北丐]快速升级20级全攻略

    [南帝北丐]快速升级20级全攻略 这个阶段相当简单,前提的引导任务给的经验都相当足,一路下去轻松就能到达14级,同时也能熟悉游戏的基本玩法,建议大家认真做一下.不过这样也就不叫攻略了,只要注意其中的2 ...

  8. w10计算机无法打印,win10升级后惠普无法打印怎么解决_win10升级后惠普打印不了的处理办法...

    使用电脑工作或学习时,我们经常会需要用到打印机.可是最近有一些网友却反映说,自己的win10电脑在升级后出现了惠普无法打印的情况,这是怎么一回事呢?我们又该怎么解决呢?用户不是很清楚,所以对此今天本文 ...

  9. oracle升级后出查询问题,oracle11.2.0.3升级到11.2.0.4出现查询性能问题,分析处理...

    在上次我们的博客中提到帮客户升级oda一体机,将数据库从oracle 11.2.0.3升级到oracle 11.2.0.4,顺利升级后,却出现了一些性能问题,比如说查询表空间的情况时,性能比以前下降了 ...

  10. Android Target 31 升级全攻略 —— 记阿里首个超级 App 的坎坷升级之路

    作者:杨夕凯.张炅轩 简述 Android Target 版本作为应用和系统版本间的"协议"与"桥梁",在厂商预装合作.应用商店曝光.开放能力方面都是一个重要衡 ...

最新文章

  1. 重温目标检测--YOLO v3
  2. thrift - C#(CSharp)客户端连接池(ConnectionPool)
  3. HDU 4831 Scenic Popularity 暴力模拟
  4. 【springboot中使用aop的具体步骤和示例】
  5. css家用电器,家用电器
  6. q87主板支持cpu型号_网络上那些300多元的微星B365M主板到底是真货假货?价格便宜一半...
  7. python教程2017百度云_python下载ICCV2017全套paper
  8. Android 系统(238)---查看日志
  9. linux中改localhome名称,修改 /var/lib/locales/supported.d/local 文件(使用 locale -a 命令查看系統中所有已配置的 locale)...
  10. 数学分析闭区间套定理_不能精确找到背驰点?利用区间套解决这难题
  11. 【UE4+Vive】学习笔记1
  12. Linux中如何调整pe的大小,关于LVM PE大小影响VG容量
  13. PHP之内置web服务器
  14. MySQL IS NULL(IS NOT NULL)使用索引分析
  15. 下行文格式图片_下行文标准模版[2]
  16. 【Matlab符号积分和符号微分的实现方法】积分微分
  17. [拼搏到底之龟兔赛跑--Day 16]一套兽医作家写的小说--“大地”系列
  18. Java学习笔记 算法 Algorithms Fourth Edition
  19. halcon拓展系列—延伸直线段算子gen_segment_extend
  20. 原型交互设计入门,我该选哪个工具?

热门文章

  1. Node:连接MySQL报错\lib\protocol\Parser.js:43 Cannot read property ‘query‘ of undefined
  2. Pannellum:详解利用Pannellum实现Web三维全景功能
  3. Select2异步ajax方式加载数据
  4. 论文笔记_S2D.30_2017-CSVT_使用全卷积深度残差网络,作为分类问题,从单目图像估计深度
  5. 小语种nlp文本预处理——数据清洗
  6. 人工智能领域有哪些曾被拒稿的优秀工作?
  7. Single-Shot Calibration:基于全景基础设施的多相机和多激光雷达之间的外参标定(ICRA2021)...
  8. 【洛谷习题】售货员的难题
  9. 结队编程思路及感悟(python、tkinter、mysql、腾讯云短信等)
  10. 软件工程网络15个人阅读作业1 (201521123030 周汉麟)