Flutter 앱 첫 구동시 나오는 흰색 화면 제거

Chocomilk·2023년 6월 12일
0
post-thumbnail

Flutter 앱을 처음 시작하면 다음과 같이 흰색화면이 잠깐 노출이 되었다가 설정한 최초의 화면이 나타나게 됩니다!

Flutter는  Native앱들과 다르게 최초에 앱을 켰을때 Flutter엔진을 구동하는데 걸리는 시간이 있습니다!
기기에 따라서 짧게는 1초, 길게는 2초정도 걸리며 그동안 흰색 화면이 노출되게 됩니다!

저도 처음에 개발을 시작했을 때는 당연히 뜨는 것이라 생각하고 별 신경을 쓰지 않았습니다.
하지만 이전 회사에서 개발했던 앱의 첫 화면은 검은색 화면이였습니다.

만약 흰색 배경으로 시작해서 검은색 배경의 화면으로 앱이 시작된다면 앱을 사용하는 유저가 많이 이상하다고 느낄것이다

이를 해결할 방법은  Android / IOS Native 각각의 폴더에서 관련 설정을 직접 바꿔주어야 한다. 

1) Android

먼저 디렉토리에서 android -> src -> main -> res -> drawable 폴더 안에 있는 launch_background.xml 파일을 열어보시면

다음과 같이 코드가 구성되어 있습니다

로 되어있는 부분에 본인이 설정하고 싶은 색상을 대입해주면 끝입니다!

2) IOS

Android와 동일하게 디렉토리에서 ios>Runner>Assets.xcassets>LaunchImage.png 파일을 열어봅시다

화면에 아무것도 안 나오지만 당황하지 않으셔도 됩니다. 우측 상단의 Open iOS module in Xcode를 통해 Xcode를 여는게 우리의 목적입니다!

XCode를 열리고 나면 좌측에서 Runner>Runner>LaunchScreen.storyBoard을 선택하여 열면 아래와 같이 나오게 됩니다.

새로 열린 화면의 왼쪽 사이드메뉴에서 View Controller Scene > View Controller > View를 클릭하여 엽니다!

주의하실점은 View아래의 LaunchImage를 여시는 것이 아니라 View를 여셔야 한다는 것입니다!

그렇게 열린 화면 우측에 있는 메뉴들 중 Background 메뉴가 있고 여기에서 본인이 원하는 색상을 선정하시면 됩니다!

profile
어제보다 한 발짝 더 나아가려는 Flutter 개발자

0개의 댓글