Android에서 앱에 Lifecycle 변경이 발생했을 때, 지도가 네비게이터 스택을 무시하고 최상단에 노출되는 문제

[Kwon-dev]

예를 들면 홈 화면에 네이버 지도 위젯을 넣었다고 가정할 때, 그 페이지 위로 쌓이는 페이지(push를 통해 이동한 페이지)들 에서 화면 잠금을 했다가 잠금을 해제하면 네이버 지도가 페이지 제일 위로 올라와서 노출 되는 오류가 있습니다. 특정 기종이 문제가 아니라 다양한 폰에서 테스트해 본 결과 모두 같은 결과가 나왔고, 아이폰에서는 재현되지 않았습니다.

현재 사용중인 버전은 flutter_naver_map: ^1.0.0-dev.8이고 flutter 버전은 3.7.7 입니다.
안드로이드 compileSdkVersion은 33을 사용하고 있습니다.

[note11g]

flutter/flutter#89558 해당 이슈와 연관 있어보입니다.
자세히 파악 후, 다시 코멘트 드리겠습니다.

[note11g]

@Kwon-TaeHyoung 혹시, 오류로그가 존재할까요?

[Kwon-dev]

관련있어 보이는 로그는
E/SurfaceSyncer(23788): Failed to find sync for id=0
E/SurfaceSyncer(23788): Failed to find sync for id=1
E/SurfaceSyncer(23788): Failed to find sync for id=2
E/SurfaceSyncer(23788): Failed to find sync for id=3
E/SurfaceSyncer(23788): Failed to find sync for id=4
E/SurfaceSyncer(23788): Failed to find sync for id=5
E/SurfaceSyncer(23788): Failed to find sync for id=6
E/SurfaceSyncer(23788): Failed to find sync for id=7
말고는 없네요

[note11g]

재현에 성공하였습니다.
flutter/flutter#89558 에서 언급된 해결법을 사용하면, 임시적으로 고칠 수 있습니다.
하지만, 플러그인 자체로 해결할 수 있는 방법은 아직 없습니다. 찾는대로 코멘트 드리겠습니다.

임시 해결법 (MainActivity.kt 파일을 수정해야 합니다)

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.android.FlutterTextureView

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        intent.putExtra("background_mode", "transparent")
        super.onCreate(savedInstanceState)
    }
}

[Kwon-dev]

감사합니다 일단 해당 방법으로 문제는 해결됐습니다.

[KimSungJin0]

재현에 성공하였습니다. flutter/flutter#89558 에서 언급된 해결법을 사용하면, 임시적으로 고칠 수 있습니다. 하지만, 플러그인 자체로 해결할 수 있는 방법은 아직 없습니다. 찾는대로 코멘트 드리겠습니다.

임시 해결법 (MainActivity.kt 파일을 수정해야 합니다)

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.android.FlutterTextureView

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        intent.putExtra("background_mode", "transparent")
        super.onCreate(savedInstanceState)
    }

    override fun onFlutterTextureViewCreated(flutterTextureView: FlutterTextureView) {
        flutterTextureView.isOpaque = true
        super.onFlutterTextureViewCreated(flutterTextureView)
    }
}

해당 옵션을 적용한 후 splash 배경화면이 검은색으로 바뀌었습니다.
혹시 해결할 수 있는 방안이 있나요?

[note11g]

@KimSungJin0 혹시 두번째 함수를 적지 않았을때도 해당 현상이 발생하시나요?

[KimSungJin0]

override fun onFlutterTextureViewCreated(flutterTextureView: FlutterTextureView) { flutterTextureView.isOpaque = true super.onFlutterTextureViewCreated(flutterTextureView) }
를 주석 처리하고 진행한 결과 아직도 검은색임을 확인했습니다.
제 생각엔 intent.putExtra("background_mode", "transparent") 이 원인인 것 같습니다.
해당 코드를 주석하니 검은색 splash 화면과 깜빡임 현상이 나오지 않는 것을 확인했습니다.

[akshatjain-beam]

hello, the solution is giving black screen at the app start, but when removing the intent.putExtra stacking of pages can be observed. Any possible solutions, so to not the have the black screen and not having the stacking of pages.

[akshatjain-beam]

@note11g @KimSungJin0 , do you faced the similar issue?

#56 (comment)

[rishabhgoyal-beam]

1. The solution to Issue Android에서 앱에 Lifecycle 변경이 발생했을 때, 지도가 네비게이터 스택을 무시하고 최상단에 노출되는 문제 #56 is giving black screen at the app start, but when removing the intent.putExtra stacking of pages can be observed.
2. It has become a tradeoff now. The solution to the blackout issue is removing a piece of code, which in-turn is a solution to Issue Android에서 앱에 Lifecycle 변경이 발생했을 때, 지도가 네비게이터 스택을 무시하고 최상단에 노출되는 문제 #56.

Could you please help us @note11g @KimSungJin0?

[akshatjain-beam]

for anyone, facing black screen issue, can refer to - jonbhanson/flutter_native_splash#54 (comment)

[betrider]

안드로이드 스크린 이동 시 스크린의 지도가 오버레이되는 문제가 있습니다.

이와 관련해서 현재 패키지에서 지도를 표시할 때 GLSurfaceView를 사용하기 때문에 발생하는 문제로 보입니다.
추가로 TextField 포커스 이슈도 GLSurfaceView와 관련있습니다.(https://pub.dev/packages/flutter_naver_map/versions/0.10.7 - 참고사항)

GLSurfaceView와 TextureView의 용도가 다르기 때문에 옵션이 필요 합니다.
flutter_naver_map 0.10.7버전까지 존재했던 옵션(useSurface)이 사라져서 사용 할 수가 없습니다.
사용자의 용도에 따라 사용 할 수 있게 NaverMapOption - useTextureView 추가 부탁드립니다.

리액트 네이티브도 이와 관련해서 같은 이슈관련 링크드립니다.(QuadFlask/react-native-naver-map#27)

[note11g]

@betrider 말씀 주신 내용 확인하였습니다.
빠른 시일 내 검토할 수 있도록 하겠습니다. 감사합니다.

[note11g]

검토해야 할 사항

1. GLSurfaceView 사용 / TextureView 사용 Trade Off 관련 검토
2. GLSurfaceView 사용시, Native Splash 실행 이후 임시 해결 코드를 실행하는 방안 검토

[note11g]

@/Kwon-dev @/KimSungJin0 @/betrider @/akshatjain-beam @/rishabhgoyal-beam

해당 현상이 해결된 것으로 보입니다. (임시 해결법 없이)
해당 현상 재현 테스트를 진행해주실 수 있는지 여쭤볼 수 있을까요?
(재현 Example Repository)를 통해서 실행해보실 수 있습니다.

테스트한 환경 : Flutter 3.16.1 / Galaxy S23 (Android 14), Galaxy S23 Ultra (Android 14)

+ 재현에 성공하였습니다. Pixel 4 Emulator (Android 13)에서 재현되었습니다.
Android 14에서는 해당 현상이 발생하지 않는 것을 확인하였습니다. (at Android 14, not produced this issue)

[note11g]

83c7adb 커밋은 근본적인 문제(Flutter Engine Issue)를 해결하지는 않습니다.
하지만, flutter_native_splash 패키지의 동작을 방해하지 않으면서, 해당 문제를 해결하는 커밋입니다.
또한, 더 이상의 유저 측에서 별도로 코드 작성이 필요하지 않습니다.

[note11g]

flutter_native_splash를 사용하신다면, 다음처럼 사용하시면 됩니다. (참고: flutter_native_splash#3-set-up-app-initialization-optional)

void main() async {
  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  await NaverMapSdk.instance.initialize(clientId: 'your client id');
  FlutterNativeSplash.remove();
  runApp(const MyApp());
}

다음은 테스트 영상입니다. (Pixel 4 API 33 Emulator, Flutter Release Mode)

test_vid_with_native_splash.mp4

[note11g]

1.1.1 버전에서 수정됩니다. 감사합니다.