FlutterFlow 앱에 대한 사용자 정의 정보 화면을 만드는 방법은 무엇인가요?

1단계: 메뉴 화면에 대한 새 페이지 만들기

FlutterFlow 대시보드에서 사이드 바로 이동한 다음 '페이지' 탭을 클릭합니다. 이렇게 하면 프로젝트의 모든 페이지가 열립니다. 아래에 있는 '새 페이지 만들기' 버튼을 클릭하여 새로운 정보 화면 페이지를 만듭니다. 페이지에 "정보"라는 이름을 부여하고 '만들기'를 클릭하십시오. 이렇게 하면 새 페이지 레이아웃으로 자동으로 이동합니다.

2단계: 새 페이지 레이아웃 설정

"정보" 페이지에서 새 위젯, 애니메이션, 상호 작용을 추가할 수 있는 빈 레이아웃을 찾을 수 있습니다. Scaffold를 추가하기 시작합니다. Scaffold는 시각적 디자인 언어인 Material Design을 고수하는 프레임워크를 제공하는 Flutter 클래스입니다. '위젯 추가' 버튼을 클릭하고 드롭다운 메뉴에서 'Scaffold'를 선택하십시오.

3단계: 정보 화면의 앱 바 디자인

scaffold를 설정한 후 AppBar를 추가해야 합니다. 이것을 하려면 Scaffold 내의 '+ 위젯 추가' 버튼을 클릭한 다음 드롭다운 메뉴에서 'AppBar'를 선택합니다. AppBar의 속성 패널에서 브라우저 제목, 예를 들어 "회사 소개", 색상, 글꼴 스타일을 변경하고 작업을 추가할 수 있습니다. 또한 그것의 부상, 위치, 콘텐츠 색상 설정도 가능합니다.

4단계: 정보 화면에 내용 추가

AppBar가 준비되면 화면의 주요 콘텐츠 추가를 시작할 차례입니다. AppBar 바깥쪽의 Scaffold 내에서 '+ 위젯 추가'를 클릭하고 '컨테이너'를 선택합니다. '컨테이너'는 일반적인 그리기, 위치 지정, 크기 조정 위젯을 결합하는 편리한 위젯입니다. '컨테이너'에서 다시 '+ 위젯 추가'를 클릭하고 '텍스트'를 선택하여 앱의 '정보' 페이지에 텍스트 콘텐츠를 추가하기 시작하십시오.

5단계: 정보 화면에서 텍스트 사용자 정의

텍스트 위젯의 속성 패널에서 앱, 팀 또는 공유하려는 다른 정보에 대한 구체적인 내용을 추가할 수 있습니다. FlutterFlow는 텍스트의 글꼴, 크기, 색상, 두께, 스타일, 줄 간격을 조정할 수 있게 해주며, 심지어 애니메이션을 추가할 수도 있습니다.

6단계: 정보 화면에 이미지 추가

정보 화면에 이미지를 추가하려는 경우도 있을 수 있습니다. 이미지를 원하는 컨테이너 지역으로 스크롤합니다. '+ 위젯 추가'를 클릭하고 '이미지' 옵션을 선택합니다. '이미지' 위젯 속성 패널에서 '자산 선택'을 클릭하고 컴퓨터에서 원하는 사진을 업로드하십시오.

7단계: 정보 화면 저장

정보 화면의 디자인에 만족하면 반드시 작업을 저장해야 합니다. 화면의 오른쪽 상단에 위치한 '저장' 버튼을 클릭하여 진행 상황을 잃지 않도록 해야 합니다.

8단계: 정보 화면을 앱에 연결

'정보' 페이지는 이제 준비되었지만, 나머지 앱에 연결해야 합니다. '페이지' 탭으로 돌아가 '정보' 페이지와 연결을 설정하려는 페이지를 선택합니다. 정보 페이지로 이동하려는 위젯을 클릭하고, 위젯의 속성 패널에서 아래로 스크롤하여 '상호작용'으로 이동하고, '탭 시' 드롭다운 메뉴에서 '네비게이트'를 클릭합니다. 드롭다운 메뉴에서 '정보' 페이지를 선택하십시오.

9단계: 정보 화면 테스트

네비게이션을 설정한 후에는 정보 화면을 테스트해야 합니다. FlutterFlow 대시보드의 오른쪽 상단으로 이동하고 '미리보기' 버튼을 클릭합니다. 이렇게 하면 앱이 새 브라우저 탭에서 빌드 및 시작되고, 거기에서 정보 화면으로 이동할 수 있습니다.

이러한 단계를 따르면 FlutterFlow 애플리케이션에 사용자 친화적이고 시각적으로 만족스러운 '정보' 화면을 만들 수 있습니다. 이로써 앱 사용자에게 앱 또는 회사에 대한 중요한 정보를 공유할 수 있습니다.