Flutter Web预览时白屏解决方法
原因是因为运行 flutter run 是自动选择渲染器
桌面端WEB浏览器默认使用 CanvasKit渲染器
移动端WEB浏览器默认使用 HTML渲染器
问题就出在了CanvasKit渲染器,他需要下载一些库的支持,
还有需要下载一些谷歌字体!!!


解决方法:
1:
挂梯子
2:
改渲染器
2.1:
在命令行中指定渲染器(每次都得敲命令,run 和 build 都可用)
HTML渲染器
flutter run -d chrome --web-renderer html
CANVASKIT渲染器(默认 flutter run -d chrome 就是这个)
flutter build web --web-renderer canvaskit
2.2:
在WEB index.html 中设置渲染器(只需要修改一次)
在 web/index.html 文件中,main.dart.js 之前加入一个 <script>
<!-- 渲染模式 -->
<script type="text/javascript">
let useHtml = true;//你懂的
if(useHtml) {
window.flutterWebRenderer = "html";
} else {
window.flutterWebRenderer = "canvaskit";
}
</script>
<!-- 在main.dart.js之前 -->
<!-- <script src="main.dart.js" type="application/javascript"></script> -->
Flutter Web预览时白屏解决方法的更多相关文章
- axTE3DWindowEx双屏对比控件白屏解决方法以及网上方法的校正(CreateControlOveride)
环境:vs2012,TE 6.5.1,winfrom C# 要做skyline的双屏显示功能,网上找到方法是用axTE3DWindowEx控件实现,把控件拖进去,运行,发现axTE3DWindow是正 ...
- Genymotion开启就全部白屏解决方法
Genymotion开启就整个界面全部白屏,包括菜单栏也白屏,解决方法: 很可能是显卡驱动有问题,用驱动人生或者驱动精灵更新显卡驱动就可以了. 目前开发者好用的模拟器有: 1.Genymotion 2 ...
- opengl 结果白屏解决方法
最近图形学在做上机实验,需要使用到opengl实验操作,可是我的电脑不给力, 不能显示正确结果,每次都是白屏,无法显示应有的结果. 1.问题:opengl 白屏 2.环境:win7系统,64位.机型是 ...
- Android Studio无法预览xml布局之解决方法(两种)
学习安卓程序开发,用的Android Studio,发现怎么更改xml代码都没有想要的效果.如图 代码如下: <?xml version="1.0" encoding=&qu ...
- 关于 pyspider Web预览界面太小的解决方法
本人最近在学习pyspider时,遇到Web预览界面太小而无法很好的进行开发,于是在网上搜索解决方法. 准备: css代码: body{margin:;padding:;height:%;overfl ...
- 解决pyspider框架web预览框过小问题
解决pyspider框架web预览框过小问题 Chrome 使用pyspider框架时,web预览框只有一小条: 解决办法: 找到debug.min.css文件,替换为如下内容: body{margi ...
- 停止预览时调用Camera.release(), 出现Method called after release()异常问题原因及解决办法
如下代码: private void stopPreview() { Log.w(TAG, "stopPreview(), _isPreviewing = " + _isPrevi ...
- 解决在IE里预览时弹出:为了有利于保护安全性......
用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...
- RDLC 图形报表预览时 “本地报表处理期间错误”
在RDLC报表中有图形报表的导出和打印都正常,但预览时"本地报表处理期间错误",这是因为你设置的图形太宽已经超过默认的A4 纸的宽度,解决办法:报表页面的报表--->报表属性 ...
- Atitit.web预览播放视频的总结
Atitit.web预览播放视频的总结 1. 浏览器类型的兼容性(chrome,ff,ie) 1 2. 操作系统的兼容性 1 3. 视频格式的内部视频格式跟播放器插件的兼容性.. 2 4. 指定播放器 ...
随机推荐
- 使用ts二次封装storage(sessionStorage/localStorage)
export class LocalCache { setCache<T = any>(key: string, value: T): boolean; setCache<T = a ...
- P5736 质数筛
原题连接 一看到这个熟悉的输入,我们就立马反应过来要请出一维数组来记录一下输入的数据.现在数据的存储解决了,紧接着来剖析一下步骤: 输入数据 一个一个的判断是否为质数 筛去合数 输出质数 理清了思路后 ...
- js获取url中的查询参数
// 获取url中query // return {cate_id: '1', street_id: '0'} function getParams() { var url = location.se ...
- ROS创建工作空间 Create your workspace
https://blog.csdn.net/baidu_38869387/article/details/119840120 http://wiki.ros.org/catkin/Tutorials/ ...
- 把pyecharts动图导入到PPT中
如何把echarts 动图导入PPT 置顶 且听风来 2019-05-22 14:54:17 3347 收藏 6展开 首先看PPT是否开启插件,开启后 此处就有标志,然后就在你想插入的幻灯片处插入两个 ...
- 【NPDP专项练习】第五章 工具与绩效度量
第五章 工具与绩效度量 1.这是一种使用一系列的迭代轮数通过专家组对未来可能的一种预测 A 决策一制作方法论 B 德尔菲 C 实施路线 D 组合标准 答案:B 解析 德尔菲流程(DelphiProce ...
- wpf treeview 绑定图标方式
<TreeView Grid.Row="0" Grid.Column="0" x:Name="foldersItem" Selecte ...
- npm i不成功devDependencies解决方法
npm config ls -l 查看npm配置发现production为true,所以i不成功 npm config set production false 将production设置为false ...
- HttpWebResponse 四种accept-encoding解析(gzip, deflate, br,identity)
HttpWebResponse 四种accept-encoding解析(gzip, deflate, br,identity[默认]) var hwrs = (HttpWebRe ...
- crontab执行不生效
背景:不知道什么原因脚本手动执行:正常:crontab执行不生效: 1.将命令所属路径加入到 /etc/crontab中, 2.在shell脚本中加入 source /etc/profile