flutter 2.0 for web 在浏览器中运行白屏

最新推荐文章于 2024-08-22 08:29:37 发布
最新推荐文章于 2024-08-22 08:29:37 发布
阅读量1.1k 收藏
点赞数
分类专栏： 适配 文章标签： flutter css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxx_19942/article/details/120014368
版权

用flutter有一端时间了，一开始的时候我是直接用移动应用运行的，可以显示出界面，但是我按照教程运行了

flutter create . 

然后有有了web结构，然后我再运行到chrome浏览器就白屏了，先看看我的项目图

 这个问题我在网上搜了很多办法都没用，如果你也用了很多办法都没用的话，并且和我上图一样的情况，更新你的浏览器试一下。我反正就是这个问题

Android村花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web-demo:Flutter 2.0 Web演示
03-04
web_demo Flutter 2.0快速重建的一个站点样例在线预览： : 更多精彩，请关注官方微信公众号：Oldbirds安装git clone 安装fvm工具：运行$ cd web-demo$ fvm install$ fvm flutter run -d Chrome
FLutter web app 运行显示空白页
z2008q的专栏
02-22 5687
Flutter作为一个可移植的UI框架，已经支持现代Web应用开发了！ 我们很开心已经发布了SDK预览版，这样你可以在Web浏览器里直接运行你的Flutter UI代码。 从去年Beta版发布以来，我们现在已经可以直接使用flutter sdk来支持web应用了，网上有太多早期 flutter for web 的新手教程，大家在还是跟着官方文档尝试以下吧。 简单来说就分几步 google 已经把 flutter_web merge 到 flutter 主工程，但是现在看起来还是 beta 版本才能使用
Flutter for web 首次加载过慢问题优化
Bright_TY的专栏
09-10 6490
Flutter web 加载慢优化
关于flutter 启动 页面加载空白（三四秒空白页面）
无名之鑫的博客
06-11 638
注意事项：俩处xml都配置一下，配置一样就可以了。
Flutter2.0运行在web上不同渲染器的问题
路漫漫其修远兮，吾将上下而求索
03-23 1115
前言 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打包Web白屏，但移动端没问题
Leopold的博客
11-02 672
原因是Web渲染器的问题，强制html即可
Flutter Web开发 浏览器运行
jia635的专栏
12-30 2435
新建Flutter 工程，默认只支持Android，iOS，可以通过命令行配置运行Web flutter channel beta 先切到Flutter beta版本 flutter upgrade flutter config --enable-web 运行完--enable-web 命令后重启当前Flutter工程 如果配置成功并且电脑上有Chrome浏览器，在可调试工具即可看到Chrome（web）,选择Chrome然后运行编译便会打开host的Flutter网页 ...
flutter androidstudio 简单demoapp项目实现运行在chromeweb显示
m.t.u
10-24 1799
flutter 1.9更新支持了flutter for web，尝试如何实现一套代码多端使用的效果。 由于使用windows系统，开发ios条件不允许，因此尝试运行android,web两端。 配置好flutter环境 cmd命令行 demo项目的上层目录 cd: ..... flutter channel master flutter upgrade //install the ma...
Flutter web打包后,访问页面显示空白
路漫漫其修远
03-09 3021
原因 Flutter在运行和构建Web应用程序时，可以在两个不同的渲染器之间进行选择。 这两个渲染器是： HTML。CSS，Canvas元素和SVG元素。 该渲染器的下载大小较小。 Canvaskit。使用Skia编译为WebAssembly并使用WebGL渲染。 该渲染器与Flutter移动设备和台式机完全一致，具有更快的性能，并且不太可能在浏览器之间出现差异，但下载大小增加了大约2MB。 Flutter官方文档上对这个选项的默认设置的说明是 当应用程序在移动浏览器中运行时，此选项选择HTML渲染.
DevFolio:使用Flutter 2.0设计的实时作品集可用于android和web
03-25
在执行这些步骤之前，请确保您已经安装了flutter 2.0 git clone https://github.com/m-hamzashakeel/DevFolio cd DevFolio flutter packages get flutter config --enable-web flutter run -d chrome :link: 有用...
Portfolio-Demo-1:使用Flutter for Web构建投资组合
03-13
请通过下面的链接来了解有关如何在Flutter中创建和部署Web应用程序的更多信息。 Flutter For Web： Flutter for Web： 如何使用 步骤1： 使用以下链接下载或克隆此仓库： ...
flutter实现单点跳转浏览器搜索页面
03-23
在Android平台上使用Flutter框架开发应用时，有时我们需要实现一个功能：点击应用内的某个按钮或链接，使得用户能够直接跳转到手机默认的浏览器，并在浏览器中打开特定的搜索页面，例如百度搜索。这个过程涉及到...
解决Flutter启动页白屏问题，flutter启动显示图片
05-29
启动页是App必不可少的一部分，然而在一个新创建的Flutter项目中，运行发现是没有启动页的。 Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决，而 Flutter 也是基于此办法，同时优化...
【Flutter】webview_flutter显示白屏
热门推荐
这家伙很懒，博客简介都不写
07-28 1万+
flutter: allowing navigation to NavigationRequest(url: http://m.weibo.cn/2803301701/4483025884548508, isForMainFrame: true) flutter: Page started loading: http://m.weibo.cn/2803301701/4483025884548508 flutter: allowing navigation to NavigationRequest(url:
flutter web运行白屏问题
最新发布
张朋举-软件工程师
08-22 356
web白屏，--web-render html
Flutter启动页白屏处理
郊眠寺
05-27 3172
前言 在上篇实现了一个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项目应用白屏问题和模块嵌入时白屏处理
u011287484的博客
04-23 2714
1、第一次运行app到模拟器碰到应用白屏问题： ERROR:flutter/shell/gpu/gpu_surface_gl.cc(85)] Failed to setup Skia Gr 解决方法： https://github.com/flutter/flutter/issues/11094#issuecomment-372662053 用命令方式运行： flutter run --enabl...
Fultter 启动页面白屏处理方法
小哥丷的博客
04-19 2239
由于Android手机性能不同，导致有些手机打开是显示白屏时间较长。以下是处理办法： 总共分两步： 1.把自定义图片放到 flutter\android\app\src\main\res 下面的drawable 或者mipmap 文件夹下，具体放哪里，根据自己喜好。 注：放图片的时候用哪个文件夹，就要在这个文件夹对应所有的文件夹下都放入图片 2.然后在 flutter\android\app\src\main\res\drawable下找到 launch_background.xml ,注意有两
flutter web 支付宝浏览器
07-28
对于在Flutter Web中使用支付宝浏览器进行支付的问题，目前Flutter官方还没有提供直接支持的插件或组件。但你可以通过以下步骤来实现： 1. 在Flutter Web项目中打开支付宝支付页面： - 使用 `url_launcher` 插件，通过调用系统默认浏览器来打开支付宝支付页面。你可以在 `pubspec.yaml` 文件中添加 `url_launcher` 插件的依赖。 - 通过使用 `launch` 方法打开支付宝支付页面，并传入支付链接。 2. 创建一个Web页面用于接收支付结果： - 在你的Flutter Web项目中创建一个新的HTML页面，用于接收支付成功或失败的回调。 - 在支付宝支付页面中设置回调URL为你创建的Web页面的URL。 3. 处理支付结果： - 在你创建的Web页面中，通过JavaScript获取支付结果。 - 将支付结果传递给Flutter应用程序，可以使用 `platform_views` 或 `window.postMessage` 等方法与Flutter进行通信。 需要注意的是，由于支付宝支付涉及到敏感信息和安全问题，你需要确保在处理支付过程中保持数据的安全性和合法性。 希望这些信息能对你有所帮助！如果你有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值