flutter web运行白屏问题

原创 已于 2024-08-22 08:33:38 修改 · 809 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter

于 2024-08-22 08:29:37 首次发布

原因：web渲染引擎2个：html、canvaskit（默认）；
国内网络问题，字体下载不到，所以canvaskit渲染失败。
在这里插入图片描述
在这里插入图片描述

解决方案：
运行时指定渲染引擎，--web-renderer html；
在这里插入图片描述

FLutter web app 运行显示空白页
z2008q的专栏
02-22 6272
Flutter作为一个可移植的UI框架，已经支持现代Web应用开发了！ 我们很开心已经发布了SDK预览版，这样你可以在Web浏览器里直接运行你的Flutter UI代码。 从去年Beta版发布以来，我们现在已经可以直接使用flutter sdk来支持web应用了，网上有太多早期 flutter for web 的新手教程，大家在还是跟着官方文档尝试以下吧。 简单来说就分几步 google 已经把 flutter_web merge 到 flutter 主工程，但是现在看起来还是 beta 版本才能使用
Flutter启动页白屏处理
郊眠寺
05-27 3484
前言 在上篇实现了一个Nike的加载页，但有一些遗留问题，其中之一就是启动时的白屏处理。如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vX0WOEA6-1653629979782)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5f2aadf7f2b43a78d5957c761515c8a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 启动页 几乎所有
flutter webview 一直黑屏以及js调用失败.pdf
12-16
flutter webview 一直黑屏以及js调用失败
解决Flutter启动页白屏问题，flutter启动显示图片
05-29
启动页是App必不可少的一部分，然而在一个新创建的Flutter项目中，运行发现是没有启动页的。 Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决，而 Flutter 也是基于此办法，同时优化了 Flutter 初始化阶段的白屏问题。之所以新建的项目是白屏，因为flutter对此的方法默认是注释掉的 1）源代码下载，请放心下载 2）使用在多个项目中
Flutter Android端启动白屏问题的解决
08-27
Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象，白屏的时长由设备的性能决定，设备性能越差，白屏时间越长。这篇文章主要介绍了Flutter Android端启动白屏问题的解决。感兴趣的小伙伴们可以参考一下
Flutter打包Web白屏，但移动端没问题
Leopold的博客
11-02 1091
原因是Web渲染器的问题，强制html即可
Flutter-Web打包后上线白屏
AiFlutter的博客
12-02 703
我上线的地址是https://xxx:8091/homedots,但是我打包后的index文件中的baseUrl是"/",将地址改成”/homedots/"，注意homedots后面还有一个反斜杠。Flutter上线后进行测试发现界面白屏，打开开发者模式查看网络发现加载main.js文件404。打包时使用--base-href配置基础路径。
解决 Flutter Web 作为 Android Progressive Web SDK 的内存不足问题
最新发布
分享各种技术文章，给大家带来不一样的视野。
04-26 649
我们发现，GC 可以轻松在需要时释放 Java/原生对象，但图形组件的释放则需要更多时间。但最终我们还是克服了它，并使我们针对 Flutter Web 的解决方案日臻完善，从而能够构建更具包容性和可靠性的 SaaS 产品。当我们转向生产时，我们开始在某些 Android 设备的 Web 视图中加载 Flutter Web 时遇到 Android。，修复在运行嵌入 Android 原生示例应用的 Web 构建时，Leak Canary 中发现的所有内存泄漏问题。现在来回切换，总能为启动模块释放足够的内存。
Flutter Web 在《一起漫部》的性能优化探索与实践
yiqimanbu的博客
10-13 1028
不久前，App 小组面临一场开发挑战，即『一起漫部』需要在 App 的基础上开发出一套 H5 版本。由于一起漫部 App 版本是使用 Flutter 技术开发的，对于 H5 版本的技术选型，Flutter Web 成为我们的第一选择对象。
Flutter运行环境配置小结
guangdeshishe的博客
04-09 2819
1.环境变量 FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub 2.AndroidStudio运行Android项目一直卡在Running Gradle task 'assembleDebug'... 项目/android/build.gradle添加阿里镜像repositories { mav
flutter创建应用白屏问题
abcde158308的博客
02-28 1528
前言 flutter又是google放的一个大招，前段时间听说了，一直没有体验，今天抽空体验了一下，没想到刚开始一个Hello world就遇到坑。还好有大神解决了，在此记录一下。 问题 看着官网文档，一步一步跟着走，走到运行程序时，看到console提示： [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(39)] Failed to setup Sk...
flutter-设置开屏页 解决开屏白屏问题
weixin_43575775的博客
08-19 1759
当您的应用程序打开时，本机应用程序会短暂加载 Flutter。默认情况下，在此期间，本机应用程序会显示白色启动屏幕。该包自动生成 iOS、Android 和 Web 本机代码，用于自定义本机启动画面背景颜色和启动图像。支持深色模式、全屏和特定于平台的选项。其中color 为背景颜色 注意格式 可以设置为#000000 不能简写为#000。因为我不需要使用到 动态关闭开屏页 所以加在dev_dependencies 中。image为居中得icon 可以是小图标 自动居中得。卸载 重启app 即可生效。
Flutter 启动白屏
唐僧的专栏
07-27 2188
flutter 启动白屏
flutter 2.0 for web 在浏览器中运行白屏
xxx_19942的博客
08-31 1254
用flutter有一端时间了，一开始的时候我是直接用移动应用运行的，可以显示出界面，但是我按照教程运行了 flutter create . 然后有有了web结构，然后我再运行到chrome浏览器就白屏了，先看看我的项目图 这个问题我在网上搜了很多办法都没用，如果你也用了很多办法都没用的话，并且和我上图一样的情况，更新你的浏览器试一下。我反正就是这个问题 ...
flutter ios启动白屏_Flutter技术架构概览
weixin_42304279的博客
12-26 151
前言最近在整理各种技术架构，给自己的列了个TODO list，希望能在几个月的时间内，研究完各种前端技术架构，包括移动端技术架构。今天分享一下自己整理的flutter技术架构。完整的技术架构TODO list可以去我的github仓库查看，持续更新中，敬请期待，同时祝大家圣诞节快乐。。。大前端技术架构Github仓库大前端技术架构研究仓库​github.comFlutter技术架构概览Flutte...
Flutter开发手机App启动页白屏问题（手机越卡效果越明显)
weixin_37587365的博客
05-09 2351
flutter开发手机app都会遇到启动页白屏的问题,苹果手机效果不明显，安卓手机效果很明显，手机越卡时间越长 解除item标签配置你的启动页图片就好了，如果需要全屏显示就把gravity属性删除就行了。 .........
Flutter2.0运行在web上不同渲染器的问题
路漫漫其修远兮，吾将上下而求索
03-23 1218
前言 Flutter2.0发布不久，对web的支持刚刚进入stable阶段。 初学几天，构建web应用时候碰到一些问题，比如中文显示成乱码，然后加载图片出现图片跨域问题： Failed to load network image ... Trying to load an image from another domain? 1.开启web端构建：使用下面这个命令才可以开启Web端构建的支持 flutter config --enable-web 提示我们：重新启动编辑器，以便它们读取新设置。 2.重
Flutter的Android和iOS启动页白屏解决
weixin_43885334的博客
02-17 2899
flutter的Android与iOS白屏解决方式
Flutter——启动页白屏的优化
wy313622821的博客
09-14 2039
flutter启动页白屏的优化：使用图片替代白屏结构图@mipmap/ic_launcher为你想要显示的图片。
Flutter Web基础教程：Hello World项目搭建
而 Flutter Web 是 Flutter 的一个扩展，使得同样的代码也可以编译并运行在现代 Web 浏览器中，支持跨平台开发网页应用。 Flutter Web 项目搭建的基本知识点： 1. 安装 Flutter SDK： - 首先需要在计算机上安装 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张朋举H

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值