FlutterFlow 앱에 대한 사용자 정의 비밀번호 재설정 화면을 어떻게 만들 수 있나요?

답변: 1단계: FlutterFlow 프로젝트 설정

먼저 FlutterFlow 프로젝트를 설정해야 합니다.

이 작업을 수행하려면

• FlutterFlow 웹사이트를 방문합니다.
• 오른쪽 상단에서 "로그인"을 선택합니다.
• Google 또는 GitHub로 인증합니다.
• 인증 후 프로젝트 페이지로 이동합니다. "새 프로젝트"를 선택한 다음 프로젝트의 이름을 입력합니다.
• 프로젝트 생성 후 편집 페이지로 리디렉션됩니다.

2단계: 사용자 인증 설정

앱이 사용자 인증을 지원하는지 확인해야 합니다.

• 왼쪽의 탐색 바에서 위에서 두 번째 아이콘인 "Backend"를 선택합니다.
• 이제 "Users" 섹션으로 이동하여 토글 버튼을 클릭하여 활성화합니다.
• "User Actions" 섹션에서 "password reset" 액션을 해당 토글 버튼을 클릭하여 활성화할 수 있습니다.

3단계: 비밀번호 재설정 화면 디자인

새로운 사용자 정의 화면을 만들려면:

• 편집기로 이동하고 탐색 바 하단의 '+ ADD' 버튼을 클릭합니다.
• 이제 오른쪽 사이드바에서 'Screen'을 선택합니다.
• 화면의 이름을 입력하고 'Create' 버튼을 클릭하여 확인합니다.
• 이제 필요한 위젯을 오른쪽 위젯 패널에서 끌어다 넣어 화면을 디자인할 수 있습니다.

비밀번호 재설정 화면에 필요한 항목은:

• 제목을 제공하는 텍스트 위젯.
• 새 비밀번호와 새 비밀번호 확인을 위한 두 개의 TextField 위젯.
• 요청을 제출하는 버튼.

각 위젯을 클릭하여 오른쪽 패널에서 속성을 변경하여 필요에 따라 위젯을 설정합니다.

4단계: 비밀번호 재설정 버튼에 기능 추가

'비밀번호 재설정' 버튼에 워크플로를 만들려면:

• 버튼 위젯을 선택하고 오른쪽 패널의 'Interaction' 섹션으로 이동합니다.
• '+ Add button tap'을 클릭하고 액션 목록에서 'Backend action'을 선택합니다.
• 새 모달에서 'User'를 선택한 다음 'Reset password'를 선택합니다.
• 이제 'New Password'와 'Confirm Password' 텍스트 필드에서 TextField 위젯을 적절하게 선택합니다.
• 변경사항을 저장합니다.

5단계: 비밀번호 재설정 화면 연결

비밀번호 재설정 화면이 준비되면 앱의 다른 부분에 연결해야 합니다.

• 로그인 화면으로 이동하고 '비밀번호를 잊으셨나요?' 텍스트를 선택합니다.
• 새로운 상호 작용을 추가하고 이번에는 'Navigate to'를 선택하고 방금 만든 'Reset Password' 화면을 대상으로 지정합니다.
• 변경사항을 저장합니다.

6단계: 앱 테스트

마지막으로, 편집기 상단의 '미리보기' 버튼을 눌러 앱이 어떻게 보이는지 및 작동하는지 확인합니다.

잘 움직이지 않는 것들을 수정하기 위해 앞뒤로 이동할 수 있다는 것을 기억하세요.

이 모든 단계를 마치면 FlutterFlow 앱에 대한 맞춤형 '비밀번호 재설정' 화면이 완벽하게 작동해야 합니다.