alibaba / alibaba/flutter_boost

重启App后第一个flutter页面白屏,FlutterBoost#Oops, Failed to update overlay

Open
#1,828 13 comments 1 reaction 0 assignees View on GitHub
Dominant language
Dart
Stars
7.2k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

## 问题
升级Flutter SDK到3.0.5,flutter_boost版本为4.2.2,运行App首个Flutter页面会白屏,需要切换Tab(应该是触发了重新build)后展示正常。
Debug模式下出现的概率比较小,Release模式下几乎是必现。
恳请大佬们给看下

## 复现步骤
1. Xcode Release模式下运行或者archive出来ipa
2. 杀掉App,重新打开,第一个Flutter页面白屏
3. 切换Tab(Tab都是原生页面ViewController,将Flutter页面通过AddChildController的形式粘贴上去的),第一个白屏页面会渲染出来
4. 安卓反馈也有同样问题,处理方式和iOS一样,都是在原生页面上贴上去的

## 环境信息
**Flutter Boost Version** 4.2.2
**Target Platform:** iOS 10+
**Target OS version/browser:** iOS16.4
**Devices:** iPhone14 Pro

[✓] Flutter (Channel stable, 3.0.5, on macOS 13.0 22A8380 darwin-arm, locale
zh-Hans-CN)
• Flutter version 3.0.5 at /Users/gyk/workdeveloper/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f1875d570e (9 months ago), 2022-07-13 11:24:16 -0700
• Engine revision e85ea0e79c
• Dart version 2.17.6
• DevTools version 2.12.2
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/gyk/Library/Android/sdk
• Platform android-33-ext5, build-tools 33.0.2
• ANDROID_HOME = /Users/gyk/Library/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.12.0

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build
11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.77.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.62.0

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A8380 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.121

[✓] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!

## 目前的解决方案是
- flutter_boost_app.dart
```
//initState中源代码
// refreshOnPush(initialContainer);
// _boostFlutterRouterApi.isEnvReady = true;
// _addAppLifecycleStateEventListener();
// BoostOperationQueue.instance.runPendingOperations();

//改为下面的代码
// todo 这里是为了解决加载白屏问题,延迟数字应该500以上都可以
Future.delayed(Duration(milliseconds: 1000), () {
refreshOnPush(initialContainer);
_boostFlutterRouterApi.isEnvReady = true;
_addAppLifecycleStateEventListener();
BoostOperationQueue.instance.runPendingOperations();
});

```

## 错误日志
2023-04-20 17:54:28.448655 flutter log-->error msg:══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞══════════════════════
The following assertion was thrown during a scheduler callback:
Please check if the engine has been initialized!
'package:flutter_boost/src/boost_channel.dart':
Failed assertion: line 33 pos 9: '_appState != null'

When the exception was thrown, this was the stack:
#2 BoostChannel.addEventListener (package:flutter_boost/src/boost_channel.dart:33:9)
#3 FlutterBoostAppState._addAppLifecycleStateEventListener (package:flutter_boost/src/flutter_boost_app.dart:120:10)
#4 FlutterBoostAppState.initState. (package:flutter_boost/src/flutter_boost_app.dart:109:7)
#5 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1146:15)
#6 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1091:9)
#7 SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:864:7)
(elided 13 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
═════════════════════════════════════════════════════════════════

2023-04-20 17:54:28.448649 flutter log-->error:Please check if the engine has been initialized!
'package:flutter_boost/src/boost_channel.dart':
Failed assertion: line 33 pos 9: '_appState != null'
stack:#0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)
#1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)
#2 BoostChannel.addEventListener (package:flutter_boost/src/boost_channel.dart:33:9)
#3 FlutterBoostAppState._addAppLifecycleStateEventListener (package:flutter_boost/src/flutter_boost_app.dart:120:10)
#4 FlutterBoostAppState.initState. (package:flutter_boost/src/flutter_boost_app.dart:109:7)
#5 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1146:15)
#6 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1091:9)
#7 SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:864:7)
#8 _rootRun (dart:async/zone.dart:1418:47)
#9 _CustomZone.run (dart:async/zone.dart:1328:19)
#10 _CustomZone.runGuarded (dart:async/zone.dart:1236:7)
#11 _CustomZone.bindCallbackGuarded. (dart:async/zone.dart:1276:23)
#12 _rootRun (dart:async/zone.dart:1426:13)
#13 _CustomZone.run (dart:async/zone.dart:1328:19)
#14 _CustomZone.bindCallback. (dart:async/zone.dart:1260:23)
#15 Timer._createTimer. (dart:async-patch/timer_patch.dart:18:15)
#16 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:398:19)
#17 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:429:5)
#18 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)

2023-04-20 17:54:28.448622 FlutterBoost#Oops, Failed to update overlay. mode=BoostSpecificEntryRefreshMode.add, BoostContainer(name:/, pages:[BoostPage(name:/, uniqueId:1681984467915_/, arguments:null)])
```

## flutter端集成
Widget _materialAppBuilder(Widget home) {
return MaterialApp(
builder: EasyLoading.init(
builder: (context, widget) {
return MediaQuery(
data: MediaQuery.of(context)
.copyWith(textScaleFactor: 1.0, boldText: false),
child: widget,
);
},
),
routes: Router().getRouters(context),
home: Container(
child: home,
color: Colors.white,
),
);
}

@override
Widget build(BuildContext context) {
return FlutterBoostApp(
routeFactory,
appBuilder: _materialAppBuilder,
);
}

## iOS端集成同demo一样

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with flutter_boost_app.dart around FlutterBoostAppState.initState and _addAppLifecycleStateEventListener, then inspect the assertion in boost_channel.dart. Reproduce the first-page white screen in an iOS Release build and compare the initialization sequence with the reported delayed workaround. Done means the first Flutter page renders after a cold restart on iOS and Android without the engine-initialization or overlay errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.