flutter启动黑屏,flutter ios启动白屏

Flutter应用启动页设置,解决 白/黑 屏情况

出现此情况的原因有两种

乌拉特中网站建设公司成都创新互联公司,乌拉特中网站设计制作，有大型网站制作公司丰富经验。已为乌拉特中1000多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的乌拉特中做网站的公司定做！

解决:

找到 \app\src\main\res\drawable\launch_background.xml 文件，这个里面初始化了布局标签,只需要把图片替换为我们自己的就可以。

或者根据不同手机的分辨率 在mipmap下放置图片例如：

之后前往 styles.xml 文件设置启动页

重新打包就可以看到 刚刚设置的启动页了

效果例如：

[图片上传失败...(image-7e5c2-1586668143446)]

至此可以流畅的打开启动页了

在Flutter开发iOS中，app启动黑屏之后显示启动页的解决办法

一、由于安卓那边升级了某些插件，我这边pull之后，进行了Pub get。运行ios项目，发现app启动之后，先闪现黑屏，然后再出现启动页，之后在进入主页面。解决此问题的方法，是把启动页的图片移除，把启动页的图片修改一个新名字，再导入项目中，再重新运行项目，就正常了。

回到前台黑屏引发对Flutter项目生命周期与安卓原生生命周期的思考

目前我们是flutter项目,有个需求是需要在app内引导用户去appStore或是安卓的应用商店去评价,该需求我选用了两个插件 in_app_review 和 launch_review , 然而仔做的过程中发现一个问题,当弹出系统的跳转应用商店的弹框时,iOS是单一弹框,Android是弹出一个选择打开商店的弹窗,可选择打开一次或是始终选择某一个商店打开,此时锁屏,然后再解锁,发现iOS没啥问题,安卓系统弹框后的flutter页面黑屏了

看到这个现象,目测是由于安卓的生命周期和flutter的生命周期没有同步,以下是验证过程

安卓的MainActivity添加生命周期方法

flutter 添加生命周期方法

还是刚才的场景 锁屏 安卓和flutter的后台方法都调用,解锁回到前台 只有安卓的前台方法走 MainActivity会restart,flutter的resume方法,没有调用,验证了开始的猜想,是由于flutter没有检测到前台操作或是这种情况flutter不认为自己在前台,导致flutter没有执行页面的重新绘制导致黑屏

关于flutter的生命周期,查阅资料发现 我们可以手动刷新flutter页面的状态,即使用

我们只需要在MainActivity restart的时候调用上述 方法 告知flutter重绘,该问题就解决了

关于原生加载flutter页面 生命周期相关 看这里 能有一些启发

Flutter中 webview的键盘问题解决

webview的版本是webview_flutter: ^0.3.22+1

现在遇到的问题是如果webview中输入密码的话，像华为这种会调用自己的安全键盘，这时候就会黑屏，应该是内部计算键盘高度的问题。这时候没办法了，网页web端密码框需要修改一下了自己自定义一下不调用密码类型就好，但是无法被输入框弹上去，后来解决方案是用SingleChildScrollView包裹一下，然后自己监听一下键盘的弹窗和隐藏做一下jump的高度就好了

ps： jump的时候要注意高度，可以在键盘出来的时候底部增加一个只有高度的view，键盘收起隐藏就好了

Flutter 启动页的前世今生适配历程

APP 启动页在国内是最常见也是必备的场景，其中启动页在 iOS 上算是强制性的要求，其实配置启动页挺简单，因为在 Flutter 里现在只需要：

一般只要配置无误并且图片尺寸匹配，基本上就不会有什么问题， 那既然这样，还有什么需要适配的呢？

事实上大部分时候 iOS 是不会有什么问题， 因为 LaunchScreen.storyboard 的流程本就是 iOS 官方用来做应用启动的过渡；而对于 Andorid 而言，直到 12 之前 windowBackground 这种其实只能算“民间”野路子 ，所以对于 Andorid 来说，这其中就涉及到一个点：

所以下面主要介绍 Flutter 在 Android 上为了这个启动图做了哪些骚操作～

在已经忘记版本的“远古时期” ， FlutterActivity 还在 io.flutter.app.FlutterActivity 路径下的时候，那时启动页的逻辑相对简单，主要是通过 App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 来进行判断。

在 FlutterActivity 内部 FlutterView 被创建的时候，会通过读取 meta-data 来判断是否需要使用 createLaunchView 逻辑 ：

是不是很简单，那就会有人疑问为什么要这样做？我直接配置 Activity 的 android:windowBackground 不就完成了吗？

这就是上面提到的时间差问题， 因为启动页到 Flutter 渲染完第一帧画面中间，会出现概率出现黑屏的情况，所以才需要这个行为来实现过渡 。

经历了“远古时代”之后， FlutterActivity 来到了 io.flutter.embedding.android.FlutterActivity ， 在到 2.5 版本发布之前，Flutter 又针对这个启动过程做了不少调整和优化，其中主要就是 SplashScreen 。

自从开始进入 embedding 阶段后， FlutterActivity 主要用于实现了一个叫 Host 的 interface ，其中和我们有关系的就是 provideSplashScreen 。

默认情况下它会从 AndroidManifest 文件里是否配置了 SplashScreenDrawable 来进行判断 。

默认情况下当 AndroidManifest 文件里配置了 SplashScreenDrawable ，那么这个 Drawable 就会在 FlutterActivity 创建 FlutterView 时被构建成 DrawableSplashScreen 。

DrawableSplashScreen 其实就是一个实现了 io.flutter.embedding.android.SplashScreen 接口的类，它的作用就是：

之后 FlutterActivity 内会创建出 FlutterSplashView ，它是个 FrameLayout。

FlutterSplashView 将 FlutterView 和 ImageView 添加到一起， 然后通过 transitionToFlutter 的方法来执行动画，最后动画结束时通过 onTransitionComplete 移除 splashScreenView 。

所以整体逻辑就是：

当然这里也是分状态：

当然这个阶段的 FlutterActivity 也可以通过 override provideSplashScreen 方法来自定义 SplashScreen 。

看到没有，做了这么多其实也就是为了弥补启动页和 Flutter 渲染之间， 另外还有一个优化，叫 NormalTheme 。

通过该配置 NormalTheme ，在 Activity 启动时，就会首先执行 switchLaunchThemeForNormalTheme(); 方法将主题从 LaunchTheme 切换到 NormalTheme 。

大概配置完就是如下样子， 前面分析那么多其实就是为了告诉你，如果出现问题了，你可以从哪个地方去找到对应的点 。

讲了那么多， Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被弃用了，惊不喜惊喜，意不意外，开不开心 ？

通过源码你会发现，当你设置了 splashScreen 的时候，会看到一个 log 警告：

为什么会弃用？

其实这个提议是在 这个 issue 上，然后通过 这个 pr 完成调整。

大概意思就是： 原本的设计搞复杂了，用 OnPreDrawListener 更精准，而且不需要为了后面 Andorid12 的启动支持做其他兼容，只需要给 FlutterActivity 等类增加接口开关即可 。

也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 来实现延迟直到加载出 Flutter 的第一帧。

为什么说默认情况？ 因为这个行为在 FlutterActivity 里，是在 getRenderMode() == RenderMode.surface 才会被调用，而 RenderMode 又和 BackgroundMode 有关心 。

所以在 2.5 版本后， FlutterActivity 内部创建完 FlutterView 后就会执行一个 delayFirstAndroidViewDraw 的操作。

这里主要注意一个参数： isFlutterUiDisplayed 。

当 Flutter 被完成展示的时候， isFlutterUiDisplayed 就会被设置为 true。

所以当 Flutter 没有执行完成之前， FlutterView 的 onPreDraw 就会一直返回 false ，这也是 Flutter 2.5 开始之后适配启动页的新调整。

看了这么多，大概可以看到其实开源项目的推进并不是一帆风顺的，没有什么是一开始就是最优解，而是经过多方尝试和交流，才有了现在的版本，事实上开源项目里，类似这样的经历数不胜数：

Flutter Plugin的坑

[GeneratedPluginRegistrant registerWithRegistry:self]默认注册到self.window.rootViewController的。 所以需要先初始化rootViewController,再注册Plugin。

如果Window的rootViewController不是FlutterViewController，直接注册Plugin会注册失败。我们需要将Plugin注册到指定的FlutterViewController。

Flutter App启动后，Native调用Flutter失败？

这是因为Plugin Channel的初始化大概要1.5秒，而且这是一个异步过程。虽然Flutter页面显示出来了，但是Plugin Channel还没初始化完，所以这时Native调用Flutter是没反应的。

本文名称：flutter启动黑屏,flutter ios启动白屏
URL地址：https://www.cdcxhl.com/article8/dsddpop.html

成都网站建设公司_创新互联，为您提供网站收录、外贸建站、App开发、网站设计公司、网站营销、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联