FlutterFlow 앱에 맞춤 판매 위젯을 만드는 방법은 무엇인가요?

1단계: FlutterFlow 계정에 로그인하십시오

공식 FlutterFlow 웹사이트(https://flutterflow.io/)로 이동하여 계정에 로그인하십시오. 계정이 없다면 필요한 정보를 입력하여 하나 만드십시오.

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

로그인한 후 대시보드 패널에서 기존 프로젝트 목록(있는 경우)을 볼 수 있습니다. 새 프로젝트를 만들려면 Create New Project를 클릭하십시오. 프로젝트에 이름을 지정한 후 Create를 클릭하십시오.

3단계: 앱 레이아웃 설정

왼쪽 패널에서 Add Page 탭을 볼 수 있습니다. 판매 위젯용 새 페이지를 만들려면 Add Page를 클릭하십시오. 페이지 이름을 "Sales" 또는 선호하는 이름으로 지정하십시오. 페이지가 만들어지면 해당 페이지를 선택하여 판매 위젯을 디자인하십시오.

4단계: 사용자 정의 판매 위젯 레이아웃 만들기

왼쪽의 Design Tab에서 Layout 범주의 Column 위젯을 드래그앤드롭하여 캔버스 중앙에 놓습니다. 이것은 판매 위젯의 컨테이너로 기능합니다.

이 열에는 판매 위젯의 각 개별 항목에 대해 여러 Rows를 추가합니다. 이 행들은 귀하의 필요에 따라 맞춤 설정할 수 있습니다. 예를 들어, 기본 판매 위젯에서는:

• 제품 이미지에 대해 Image 위젯을 추가하십시오.
• 제품 이름에 대한 Text 위젯을 추가하십시오.
• 제품 가격에 대한 Text 위젯을 추가하십시오.

이런 위젯들을 추가하려면 Design Tab에서 필요한 위젯을 드래그 앤 드롭하여 이전에 만든 행에 넣으십시오.

5단계: 판매 위젯 사용자 정의

추가한 각 위젯을 선택하고 오른쪽 패널에서 속성을 설정하십시오.

• Image 위젯의 경우, 이미지를 로드할 URL을 제공하거나 로컬 머신에서 이미지를 업로드 할 수 있습니다. 또한 너비와 높이를 설정할 수 있습니다.
• Text 위젯의 경우, Text 필드에 표시하려는 텍스트를 입력하십시오. 이 패널에서 글꼴 스타일, 크기, 색상 등을 사용자 정의 할 수 있습니다.

6단계: 동적 데이터 구현

판매 위젯이 판매 데이터를 동적으로 표시하도록 하려면:

• 왼쪽 메뉴의 Data Tab으로 이동하여 Add Collection을 클릭하십시오.
• 컬렉션 이름을 "SalesData"로 지정하고 imageURL, productName, price와 같은 다양한 필드를 만드십시오.
• 컬렉션을 만든 후, 이들 필드에 수동으로 데이터를 추가하십시오.
• 디자인 탭으로 돌아가서 Image 위젯을 선택하고 오른쪽 패널에서 Image URL을 "SalesData" 컬렉션의 image 필드에 연결하십시오.
• Text 위젯에 대해서도 동일한 작업을 수행하되, 이를 productName 및 price 필드에 각각 연결하십시오.

7단계: 앱 테스트

위의 모든 단계를 완료한 후, 화면 상단에 있는 Preview 버튼을 클릭하십시오. 이 기능을 사용하면 앱의 기능을 테스트하고 만든 판매 위젯을 볼 수 있습니다.

8단계: 앱 발행

판매 위젯에 만족하면 상단 메뉴의 Publish 버튼을 클릭하십시오. 이렇게 하면 Flutter 앱에 대한 코드가 생성되며, 이를 이용해 iOS, Android, 웹 등 다양한 플랫폼에 앱을 게시할 수 있습니다.

끝났습니다! 이 방법으로 FlutterFlow 앱에 사용자 정의 판매 위젯을 만들었습니다.