스플래쉬 화면 만들기.

Flutter

정후닝 2020. 5. 6. 18:13

스플래쉬 화면 자료를 찾아보면 로딩이 다 된후에 마치 로딩중에 보여주는것처럼 트릭을 쓴 자료들이많은데..

이 방법은 유저입장에서 2~3초를 더 기다려야하는 문제가있다 ㅎㄷㄷ

진짜 스플래쉬에 대해 알아보도록하쟈!

안드로이드 설정

android -> app -> src -> main -> res -> drawable

초기설정값

설정값을 수정할거임 먼저 배경화면 컬러를 설정해주기위해서 res -> values 폴더에 colors.xml을만들고 아래와 같이 설정해줌

다시 res -> drawable 폴더로 돌아와서 item android:drawable = "@color/splash"으로 수정

<!-- 이 주석을 지우고 <item> 안에있는 src@"mipmap/폴더안에 넣어놓은 사진이름(.png .jpeg)빼고 작성.

ios 설정

ios 폴더 우클릭 -> flutter -> open ios module in xcode 클릭

Runner -> Assets.xcassets 클릭 -> LaunchImage -> 스플래쉬 이미지 드래그해서 넣어쥼

LaunchScreen.storyboard 클릭하면 이미지가 잘되어있는걸 확인할수있눈데 크기 조절하려면 잘 안될거에요.

해당 이미지를 클릭하고 오른쪽 View -> content-mode -> center 에서 Aspect Fit으로 변경해주면 사이즈 조절이 잘될거에요.

그리고 배경색을 지정해주지 않았기때문에 흰색일건데 빈 여백의 스토리보드를 클릭해서 Background -> Custom -> 스포이드로 원하는

색상 클릭해서 맞춰주도록하자!

이렇게 아이오에스 , 안드로이드 진짜 리얼 스플래쉬 설정하는 방법이였습니다.

왈라~~~~~~~(더코딩파파님 따라하기)ㅎㅎ