原因是因为运行 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 渲染器 常见问题

Flutter Web预览时白屏解决方法的更多相关文章

  1. axTE3DWindowEx双屏对比控件白屏解决方法以及网上方法的校正(CreateControlOveride)

    环境:vs2012,TE 6.5.1,winfrom C# 要做skyline的双屏显示功能,网上找到方法是用axTE3DWindowEx控件实现,把控件拖进去,运行,发现axTE3DWindow是正 ...

  2. Genymotion开启就全部白屏解决方法

    Genymotion开启就整个界面全部白屏,包括菜单栏也白屏,解决方法: 很可能是显卡驱动有问题,用驱动人生或者驱动精灵更新显卡驱动就可以了. 目前开发者好用的模拟器有: 1.Genymotion 2 ...

  3. opengl 结果白屏解决方法

    最近图形学在做上机实验,需要使用到opengl实验操作,可是我的电脑不给力, 不能显示正确结果,每次都是白屏,无法显示应有的结果. 1.问题:opengl 白屏 2.环境:win7系统,64位.机型是 ...

  4. Android Studio无法预览xml布局之解决方法(两种)

    学习安卓程序开发,用的Android Studio,发现怎么更改xml代码都没有想要的效果.如图 代码如下: <?xml version="1.0" encoding=&qu ...

  5. 关于 pyspider Web预览界面太小的解决方法

    本人最近在学习pyspider时,遇到Web预览界面太小而无法很好的进行开发,于是在网上搜索解决方法. 准备: css代码: body{margin:;padding:;height:%;overfl ...

  6. 解决pyspider框架web预览框过小问题

    解决pyspider框架web预览框过小问题 Chrome 使用pyspider框架时,web预览框只有一小条: 解决办法: 找到debug.min.css文件,替换为如下内容: body{margi ...

  7. 停止预览时调用Camera.release(), 出现Method called after release()异常问题原因及解决办法

    如下代码: private void stopPreview() { Log.w(TAG, "stopPreview(), _isPreviewing = " + _isPrevi ...

  8. 解决在IE里预览时弹出:为了有利于保护安全性......

    用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...

  9. RDLC 图形报表预览时 “本地报表处理期间错误”

    在RDLC报表中有图形报表的导出和打印都正常,但预览时"本地报表处理期间错误",这是因为你设置的图形太宽已经超过默认的A4 纸的宽度,解决办法:报表页面的报表--->报表属性 ...

  10. Atitit.web预览播放视频的总结

    Atitit.web预览播放视频的总结 1. 浏览器类型的兼容性(chrome,ff,ie) 1 2. 操作系统的兼容性 1 3. 视频格式的内部视频格式跟播放器插件的兼容性.. 2 4. 指定播放器 ...

随机推荐

  1. linux 上使用pm2启动nodejs服务

    1.安装pm2: npm install -g pm2 2.在启动文件夹内新建文件processes.json: {   "apps": [     {       "n ...

  2. Java——四种线程创建方式

    java中创建线程有四种方式,分别是:继承Thread类,重写run方法,然后创建线程对象并调用start方法.实现Runnable接口,实现run方法,然后创建线程对象并传入Runnable实例,再 ...

  3. 查看linux 用户

    sudo cat /etc/passwd|grep -v nologin|grep -v halt|grep -v shutdown|awk -F":" '{ print $1}' ...

  4. top单核与32C--CPU爆表

    linux的cpu使用频率是根据cpu个数和核数决定的 top, 然后你按一下键盘的1,这就是单个核心的负载,不然是所有核心的负载相加,自然会超过100 单核为100%,服务器是32核的,下面基本用了 ...

  5. VM安装linux2022、设置root密码、设置国内更新源

    一.创建虚拟机 1.打开VM软件选择"创建新的虚拟机" 2.选择"典型"即可 3.选择"稍后安装操作系统" 4.选择客户机操作系统为&quo ...

  6. js中的this的指向问题

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调 ...

  7. liunx设置QQ邮箱报警

    1.先安装一个软件包, 2.先登录电脑QQ邮箱->设置->账户->账户安全前两条选择开启,并生成授权码,授权码很重要很重要,千万不要泄露. 3.在liunx命令行输入  :vi /e ...

  8. Outlook网页版怎么设置自动回复?节假日怎么设置邮件自动回复?

    在页面顶部,选择 设置> 查看所有 Outlook 设置 选择邮件>撰写和答复. 在答复或全部答复下,选择当您从阅读窗格中答复时的默认响应: 答复: 您的答复仅发送给发件人. 全部答复: ...

  9. 简易舰c远征计时器(HTML)

    有时候项目闲下来想休息的时候会跑跑舰c远征,但计时比较麻烦. 所以每个现场都会写那么几个工具.以前是vba的,这次写了个HTML的,感觉还算易用就仍上来了.省得以后换现场还得再写. 纯粹是偷懒时做的, ...

  10. 服务器5M带宽下载速计算

    5M贷款的服务器实际下载速度不是5M每秒,而是640KB/S,是由于服务商口中的宽带指的是bit(比特),而下载速度使用的单位是Byte(字节),1Byte(字节)=8bit(比特),所以,宽带和下载 ...