FlutterFlow 앱에 대한 사용자 정의 스플래시 스크린을 만드는 방법은 무엇인가요?

1단계: 새로운 플러터플로우 앱을 만들고 완성시키기

사용자 정의 스플래시 화면을 플러터플로우 앱에 만들기 전에, 앱이 이미 생성되어 설정되어 있어야 합니다. 플러터플로우 계정에 로그인하십시오. "New Project"로 이동하거나 사용자 정의 스플래시 화면을 넣을 프로젝트를 선택하십시오. 스플래시 화면을 준비할 수 있도록 전체 플러터플로우 프로젝트를 완성하십시오.

2단계: 사용자 정의 스플래시 화면 개념화

사용자 정의 스플래시 화면을만들기 전에 먼저 어떤 것을 보여주고 싶은지 생각해 보세요. 앱의 로고, 눈길을 끄는 애니메이션, 잘 선택된 사진 또는 일러스트레이션을 사용할 수 있습니다. 어떤 것을 선택하든, 앱의 느낌, 외관, 브랜딩과 일치하도록 하십시오.

3단계: 스플래시 화면에 대한 정적 이미지 디자인

아도비 포토샵, 아도비 XD, 스케치와 같은 그래픽 디자인 소프트웨어를 사용하여 스플래시 화면에 대한 정적 이미지를 만듭니다. 이미지는 다양한 화면 크기에 제대로 맞아야 하므로, 디자인 개념을 상세히 설명할 수 있는 크기 조정 가능한 이미지 크기를 선택하십시오. 가장 좋은 결과를 얻기 위해서는 이미지를 PNG 형식으로 저장하십시오.

4단계: 이미지를 FlutterFlow 앱에 업로드하기

이미지가 준비되면 FlutterFlow 작업 공간으로 돌아가십시오. Assets 패널로 이동한 후 + Add Asset 탭을 클릭하십시오. 그런 다음, Upload Image를 클릭하고 마지막으로 로컬 파일에서 스플래시 화면 이미지를 선택하십시오.

5단계: 스플래시 화면에 대한 새로운 화면 생성

스플래시 화면을 만들기 위해서는 먼저 새로운 화면을 만들어야 합니다. 사이드 패널에서 Screens로 이동한 후 + Add Screens를 클릭하십시오. 화면에 이름을 지정하십시오 (예: SplashScreen).

6단계: 스플래시 화면 설정

새 화면을 만든 후에는 이를 구성할 차례입니다. Image 위젯을 드래그하고 SplashScreen에 드롭하여 이미지를 새 화면에 추가하십시오. 다음으로, Properties 내의 Image 드롭다운에서 업로드한 스플래시 화면 이미지를 선택하십시오. 이미지의 높이, 너비, 정렬을 선호하는 대로 조정하십시오.

7단계: SplashScreen을 홈페이지로 설정

사용자들이 앱을 열면 먼저 스플래시 화면이 표시되도록 하려면, 사이드 패널에서 Project로 이동한 다음 Navigation으로 이동하십시오. Default/Initial Screen에서 SplashScreen을 드롭다운 목록에서 선택하십시오.

8단계: 스플래시 화면에서 앱의 메인 화면으로의 네비게이션 추가

스플래시 화면은 약간의 지연 후에 앱의 주요 콘텐츠로 전환되어야 합니다. 이를 하려면 사이드 패널에서 Actions 탭을 선택한 다음 Delay를 선택하십시오. 원하는 지연 시간을 설정하십시오 (예를 들어, 3초 지연을 원한다면 3000 밀리초). 마지막으로 Navigate To 작업을 추가한 다음 드롭다운 목록에서 앱의 메인 화면을 선택하십시오.

9단계: 앱 테스트

Preview 탭을 클릭하면 앱이 실행됩니다. 모든 것이 정확하게 설정되면, 사용자 정의 스플래시 화면이 먼저 팝업하고 앱의 메인 화면으로 전환되는 것을 봐야 합니다.

10단계: 문제 해결

스플래시 화면을 다양한 화면 크기와 해상도를 가진 Android 및 iOS 기기에서 제대로 작동하는지 확인하십시오. 이를 철저하게 테스트하기 위해 Preview 도구를 사용하십시오.

축하합니다, 이제 플러터플로우 앱에 대한 사용자 정의 스플래시 화면이 있습니다!