flutter_boost
flutter_boost copied to clipboard
alibaba
首次打开flutter 黑屏明显，版本v3.0-null-safety-preview.17
https://user-images.githubusercontent.com/47656407/159642039-28db5b94-b407-459f-9232-b9a36d604cc9.mp
尤其是 debug 下比较明显，release 也有.
1.原生设置SplashScreenUntilFirstFrame 解决flutter启动页面
原因看FlutterViewController的splashScreenView属性。
我现在是继承FlutterViewController设置背景色白色。
- (void)installSplashScreenViewIfNecessary {
self.splashScreenView = [UIView new];
self.splashScreenView.backgroundColor = [UIColor whiteColor];
self.splashScreenView.frame = self.view.bounds;
[self.view addSubview:self.splashScreenView];
self.splashScreenView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[splashScreenView]|"
options:0
metrics:nil
views:@{@"splashScreenView": self.splashScreenView}]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[splashScreenView]|"
options:0
metrics:nil
views:@{@"splashScreenView": self.splashScreenView}]];
}
或者你可以改为其他的加载动画。
仔细分析发现不单单是容器(Activity或者ViewController)添加背景颜色那么简单. 其实从原生页面跳转到Flutter页面流程可以分为以下几步 1.加载原生容器 2.初始化DartVm并解析传来的参数 3.flutterboost初始化页面 4.flutter业务页面初始化页面
要想解决黑屏需要做到以下几步
1.预热Flutter引擎,Flutter的引擎不要在开启页面时调用.
2.设置容器(Activity/ViewController)的背景颜色.
3.显式的flutterboost的初始化页面,也就是默认的"/"这个页面,将名称为"/"的路由页面注册进flutterboost中,可以把背景颜色设置为白色.代码如下
4.在flutter业务页面的initState中不要做耗时操作.确保所有初始化工作都在异步执行,执行完成后再setState刷新页面. 也就是上来在页面的build方法中立刻返回一个占位widget来进行loading.
