[Flutter] WhiteScreen(무선빌드) & Load Sequence Flutter UI

Flutter 로딩 시퀀스를 알아보게 된 계기

Flutter 개인 프로젝트를 진행하면서 무선 실기기 빌드를 종종 사용하였는데 AndroidStudio로 무선 빌드를 하면 XCode가 켜지고 XCode에서 Run이 실행된다. 이 때 실기기에서 하얀 화면만 나오는 문제가 있었다. XCode로만 무선 빌드를 하면 문제없이 내가 만든 뷰를 테스트 할 수 있었다..!

그래서 왜 XCode로 빌드하면 문제없이 빌드가 되고 AndroidStudio로 빌드를 하면 하얀 화면이 나오는지 찾아보게 되었다!

처음에든 생각은 플러터로 코드를 작성한 후 iOS나 Android로 어떻게 화면이 그려지는 것일까 생각이 들었다.

그래서 공식 문서를 찾아 플러터가 어떻게 UI를 표시하는지 플러터 Load sequence를 찾아보았다.

---

플러터 로딩

• Android와 iOS에서 Flutter app 및 추가 앱 패턴은 Flutter UI를 표시할 때 로딩 단계 순서를 따름.

플러터 리소스 찾기

• Flutter의 엔진 런타임과 애플리케이션의 컴파일된 Dart 코드는 모두 안드로이드와 iOS에서 공유 라이브러리로 번들됩니다. Flutter를 로딩하는 첫 번째 단계는 .apk/.ipa/.app 파일에서 이러한 리소스를 찾는 것 이는 안드로이드와 iOS API에서 FlutterEngine을 처음으로 구성할 때 발생
  • APK: Android Package Kit의 약자로, 안드로이드 앱을 배포하기 위한 파일 형식
  • IPA: iOS App Store Package의 약자로, iOS 애플리케이션을 배포하기 위한 파일 형식
  • APP: 일반적으로 macOS 애플리케이션을 나타내는 파일 형식
  • iOS API: Flutter 엔진이 iOS 플랫폼에서 작동하기 위해 사용하는 다양한 기능과 메서드를 포함 iOS에서 Flutter 엔진은 iOS의 UIKit 프레임워크와 상호작용하여 UI 요소를 표시하고, 사용자 입력을 처리하며, 애플리케이션의 생명 주기를 관리함

플러터 라이브러리 로딩

• 리소스를 찾은 후, 엔진의 공유 라이브러리는 프로세스 당 한 번 메모리에 로드 됨.
• 안드로이드는 FlutterEngine 이 구성될 때 이 작업이 수행되며, JNI 커넥터가 Flutter C++ 라이브러리를 참조 해야 되기 때문이라고 한다.
  • JNI 커넥터 : 안드로이드 플랫폼에서 Flutter 엔진이 C++로 작성된 코드를 호출하는 데 사용, Flutter 엔진은 Dart 코드와 네이티브 Android API 간의 상호작용을 관리하며, 이 과정에서 JNI를 통해 Java와 C++ 간의 연결을 설정하여 Android의 네이티브 기능을 활용한다고 한다..!
• **iOS는 FlutterEngine**이 처음 실행될 때 runWithEntrypoint 메서드를 호출할 때 작업이 발생

Dart VM 시작

• Dart 런타임은 Dart 코드의 메모리 및 동시성을 관리하는 역할을 한다.
• Dart VM의 일회성 시작은 안드로이드에서 FlutterEngine을 처음 구성할 때와 iOS에서 Dart entrypoint를 처음 실행할 때 이루어짐. 이 시점에서 애플리케이션 파일에서 Dart 코드의 스냅샷도 메모리에 로드가 된다

Dart Isolate 생성 및 실행

• Dart 런타임이 초기화 된 후 **Dart Isolate**를 시작함으로써 이루어짐.
  • 이 시점에서 GPU 처리 오프로드 및 이미지 디코딩을 지원하기 위한 호스트 플랫폼의 여러 보조 스레드도 생성
  • FlutterEngine 인스턴스당 하나의 Isolate가 존재하며, 동일한 Dart VM에서 여러 Isolate를 호스팅할 수 있음
  • 이 시점에서 Dart 코드의 선택된 entrypoint(기본적으로 Dart 라이브러리의 main.dart 파일의 main() 함수)가 실행이 된다!!
  • 만약 main() 함수에서 Flutter 함수 runApp()을 호출했다면, Flutter 앱 또는 라이브러리의 위젯 트리도 생성되고 빌드가 됨~!
  • **Dart Isolate**는 Dart의 메모리 및 스레드 컨테이너

---

AndroidStudio로 실제 디바이스(iPhone) 실행하기

일단 안드로이드 스튜디오로 실기기(iPhone)를 실행하였을 때 하얀 화면이 나오는 이유는 build scheme를 설정하지 않았기 때문이다. XCode에서는 Info.plist를 Debug, Profile, Release 로 분리하여 받는데 설정을 하지 않아 하얀 화면이 나오는 문제가 발생한 것 이다..!

Target(Runner) - BuildSettings - Info.plist File에서 분리하여 적어주고 안드로이드 스튜디오에서 Profile모드와 Release 모드로 실행하면 실제 디바이스에서 잘 나오는 것을 확인할 수 있다.

기본적으로 Run을 실행했을때는 아직도 하얀화면이 나와서 Debug 설정에서 문제가 있는 것 같다.. 이것은 더 찾아보고 작성해보겠다.

아래는 InfoPlist를 설정하는 방법이다 자세한 내용은 공식문서에도 나와있다.

1. Info.plist를 Info-Debug.plist로 변경하고,복사하여 Info-Release.plist로 저장한다.
2. Info-Debug.plist에서 Bonjour Services 배열과 0번째 요소에 _dartVmService._tcp 를 입력한다.

(선택적으로) Privacy - Local Network Usage Description도 추가해서 권한 요청 메시지를 커스텀할 수 있다.

1. 이러면 모든 작업이 완료이다! 안드로이드 스튜디오에서 Profile, Release mode로 실행하면 된다.

참고 사이트

Load sequence, performance, and memory

Integrate a Flutter module into your iOS project

Customizing the build schemes for a project | Apple Developer Documentation