FlutterFlow 앱에 대한 사용자 정의 로그인 화면을 어떻게 만드나요?

시작하기 전에: FlutterFlow 시작하기

FlutterFlow는 단 한 줄의 코드도 작성하지 않고 원하는 모든 앱을 만들 수 있는 노코드 개발 플랫폼입니다.
맞춤형 로그인 화면을 만들기 시작하려면 FlutterFlow 계정이 필요합니다. FlutterFlow로 이동하여 가입하십시오.

1단계: 새 프로젝트 만들기

FlutterFlow에 로그인한 후 첫 번째 단계는 새 프로젝트를 만드는 것입니다. 대시보드의 오른쪽 상단에 있는 'New Project' 버튼을 클릭하십시오.

대화 상자가 나타나면 새 프로젝트의 이름을 입력하라는 메시지가 표시됩니다. 프로젝트에 알맞은 이름을 입력한 후 'Create' 버튼을 클릭하여 진행하십시오.

2단계: 페이지로 이동하기

다음으로, 작업 공간 왼쪽에 'Pages' 탭이 있어야 합니다; 그것을 클릭하십시오. 이렇게 하면 앱의 모든 페이지를 볼 수 있는 Pages 섹션이 열립니다.

3단계: 새 페이지 추가하기

'+' 버튼을 클릭하여 새 페이지를 추가하십시오. 대화 상자에 새 페이지의 이름(예: 로그인 또는 로그인)을 입력한 다음 'Enter'를 누르십시오.

4단계: 로그인 화면 디자인하기

새로 만든 페이지로 이동하게 되며, 여기에서 맞춤 로그인 화면을 디자인하게 됩니다. 화면 디자인 창에서는 요소 패널(예: 사용자명과 비밀번호 필드용 텍스트상자, 앱 로고용 이미지, 로그인 버튼 등)에서 요소를 끌어다 스크린 캔버스에 놓을 수 있습니다.

• 앱 로고 추가: 패널에서 이미지 요소를 끌어다 화면 캔버스에 놓으십시오. 이미지 요소의 속성에서 이미지 파일을 업로드하여 앱의 로고로 사용할 수 있습니다.

• 입력 필드 추가: 로고 아래에, 오른쪽 패널에서 유저네임/이메일 필드와 비밀번호 필드용 두 개의 TextField 요소를 끌어다 놓으십시오. TextField 속성에서는 placeholder를 유저네임/이메일과 비밀번호에 맞게 변경할 수 있습니다. 비밀번호 필드에서 입력된 비밀번호가 숨겨지도록 반드시 'Text Obliviate' 기능을 사용해야 합니다.

• 로그인 버튼 추가: 패널에서 button widget을 선택하고, 비밀번호 필드 아래에 놓으십시오. 그것의 라벨을 "로그인" 또는 "로그인" 이라는 문구로 변경하십시오.

• 회원가입용 텍스트 추가: 가입 기능도 제공한다면, 로그인 버튼 아래에 Text widget을 끌어다 놓고 "계정이 없으신가요? 가입하세요." 를 입력하십시오. "가입"을 탭 할 수 있도록 하는 방법은 GestureDetector나 InkWell로 감싸는 것입니다.

• 멋진 UI 포함: 위젯과 다중 프린터 용지를 위한 오른쪽 속성 검사기에서 색상, 글꼴, 크기, 패딩 및 여백을 Customize합시다.

5단계: 로그인 기능 설정하기

• FlutterFlow의 Firebase 탭에서 Firebase 인증을 설정해야 합니다. 왼쪽 사이드 메뉴의 Firebase 탭을 클릭하고, Email/Password을 선택하고, 활성화한 뒤 저장하십시오.

• 디자인 캔버스로 돌아가서 로그인 버튼을 선택한 후 Click Event 드롭다운에서 Firebase 섹션의 'Login'을 선택하십시오.

• 키를 대응하는 폼 필드(email TextField에 대한 Username/Email키, password TextField에 대한 password키)에 제공해야 합니다.

6단계: 맞춤형 로그인 화면 미리보기

마지막으로, 사용자에게 어떻게 보일지 사용자 정의 로그인 화면을 미리보기해봅시다. 작업 공간의 오른쪽 상단에 있는 'Preview' 탭을 클릭하십시오.

모든 것이 원하는 대로 보인다면, 잘하셨습니다! 맞춤형 로그인 화면을 성공적으로 만들었습니다. 'Save' 버튼을 클릭하여 정기적으로 작업을 저장하십시오.

주의: FlutterFlow에서 작업을 미리보기하려면 프로젝트에 Firebase가 설정되어 있어야 합니다(구글 계정으로 Firebase에 로그인하고 새 프로젝트를 생성하세요).