FlutterFlow 앱에 대한 맞춤 로딩 화면을 어떻게 만들 수 있을까요?

단계 1: 플러터와 플러터플로우 설정

FlutterFlow 앱을 위해 커스텀 로딩 화면을 만들기 전에, 로컬 머신에 Flutter SDK와 FlutterFlow가 설치되어 있는지 확인하세요.

• Flutter를 설치하려면, 공식 Flutter 웹사이트의 Flutter 설치 가이드를 따르세요.
• FlutterFlow의 경우, 웹 기반 툴이므로 별도로 설치할 필요가 없습니다. 단지 계정이 필요할 뿐입니다. 계정을 생성하려면 FlutterFlow 웹사이트를 방문하여 가입하세요.

단계 2: 새 프로젝트 생성

Flutter와 FlutterFlow를 설정한 후에는 이제 새로운 프로젝트를 생성할 준비가 되었습니다:

• FlutterFlow 계정에 로그인하세요.
• Create New 버튼을 클릭하세요. 새 창이 화면에 나타날 것입니다.
• 새로운 앱 프로젝트의 이름을 입력하세요.
• Create 버튼을 클릭하여 새로운 FlutterFlow 프로젝트를 생성합니다.

단계 3: 앱 화면 만들기

이제 기본 앱 화면을 구축해야 합니다:

• FlutterFlow 대시보드에서 방금 생성한 프로젝트를 클릭하세요. 그렇게 하면 FlutterFlow 빌더가 열립니다.
• 빌더 왼쪽에 있는 + 버튼을 클릭하여 새로운 화면을 추가하세요.
• 이 새 화면의 이름을 더블클릭하여 Home Screen으로 이름을 변경할 수 있습니다.
• 위 과정을 반복하고 또 다른 화면을 추가하여 Loading Screen이라고 이름을 붙이세요.

단계 4: 로딩 화면 디자인

커스텀 로딩 화면을 디자인하세요:

• 왼쪽에 있는 앱의 네비게이션 트리에서, 이전 단계에서 생성한 Loading Screen을 클릭하세요.
• 페이지 상단에서 + 버튼을 클릭하면 드롭다운 메뉴가 나타납니다.
• 드롭다운에서 Layouts 그룹 아래의 Row를 선택하세요. 이렇게 하면 로딩 화면 중앙에 새로운 행이 추가됩니다.
• 방금 생성한 행 안의 + 버튼을 클릭하고 Inputs 그룹 아래의 드롭다운에서 Text를 선택하세요. 이렇게 하면 행에 텍스트 위젯이 추가됩니다.
• 위젯을 클릭하여 선택하면, 오른쪽에 속성 사이드 창이 나타납니다.
• 속성 사이드 창에서 Text 필드에 현재 텍스트를 원하는 로딩 메시지, 예를 들어 "Please wait, loading..."으로 교체하세요.

단계 5: 로딩 화면에 애니메이션 추가

로딩 화면을 더욱 매력적으로 만들기 위해 애니메이션을 추가할 수 있습니다:

• 로딩 화면에 추가한 행을 클릭하세요.
• 속성 사이드 창에서 아래로 스크롤하여 Animations 필드를 찾아보세요.
• 그 옆의 + 버튼을 클릭하면 새로운 창이 나타납니다.
• Choose Animation 드롭다운에서 원하는 애니메이션, 예를 들면 "Spin"을 선택하세요.
• Add Animation 버튼을 클릭하여 애니메이션을 추가하세요.

단계 6: 로딩 화면 로직 구현

앱에 로딩 화면을 구현하세요:

• 프로젝트 빌더로 다시 돌아가세요.
• 왼쪽 네비게이션 트리에서 Navigation 그룹을 찾아 클릭하세요.
• Initial Page 드롭다운에서 Loading Screen을 선택하세요.
• 드롭다운 아래에 있는 + 버튼을 클릭하여 새로운 액션을 추가하세요.
• 새 액션 드롭아웃에서 Navigate to를 선택하고 페이지 드롭다운에서 Home Screen을 선택하세요.
• 액션에 대한 지속 시간을 설정하세요. 예를 들어 5초로 설정하면 앱은 홈 화면으로 이동하기 전에 로딩 화면에서 5초 동안 대기하게 됩니다.

단계 7: 앱 테스트 및 내보내기

이제 앱을 테스트하고 내보내야 합니다:

• 빌더 상단의 Preview 버튼을 클릭하여 앱을 테스트하세요. 애니메이션과 함께 Loading Screen이 먼저 나타나고, 그 다음에 5초 후에 Home Screen으로 전환되어야 합니다.
• 앱이 예상대로 작동하면, 빌더 상단 오른쪽의 Export 버튼을 클릭하세요.
• 원하는 플랫폼을 선택하라는 메시지가 나타나는 대화 상자가 나타납니다. 선택을 확인하면, FlutterFlow가 앱 코드를 생성합니다.
• 생성된 코드를 다운로드하고 로컬 Flutter 개발에서 사용하세요.

그리고 완료! FlutterFlow 앱에 대한 커스텀 로딩 화면을 성공적으로 생성하였습니다.