속성 패널을 사용하면 위젯과 페이지의 시각적 모양과 동작을 사용자 정의할 수 있습니다. 또한 작업 (예: onTap 및 onSubmit)을 지정하기 위한 다른 탭, 백엔드 쿼리를 설정하고(모든 API 호출 또는 Firebase 컬렉션), 선택한 위젯에 문서 및 애니메이션을 추가하는 데 사용할 수 있는 다른 탭에 액세스할 수 있습니다. 또한 페이지가 선택된 경우 페이지 상태 변수를 추가할 수 있는 옵션을 볼 수 있습니다.

Properties Panel

<aside> 💡 선택한 위젯에만 선택한 속성이 적용됩니다 (또는 위젯이 선택되지 않은 경우 페이지에 적용됩니다). 비슷한 위젯이 여러 개 있더라도 각각을 개별적으로 사용자 정의해야 합니다. 일부 속성 (예: 글꼴, 색상 등)은 전체 앱에 적용할 수 있습니다. 이에 대한 자세한 내용은 여기를 참조하세요.

</aside>

Widget Properties

여기서 선택한 위젯의 속성을 사용자 정의할 수 있습니다. 위젯 유형에 따라 다양할 수 있습니다.

Widget Properties

1. Widget name

   위젯을 선택하면 속성 패널에 해당 위젯의 이름이 나타납니다. 모든 위젯의 기본 이름은 해당 위젯의 유형입니다. 예를 들어 Container 위젯을 선택하면 이름이 'Container'로 나타납니다. 그러나 오른쪽에 있는 편집 아이콘을 사용하여 이름을 변경할 수 있습니다.

   

   Widget Name

2. Create a component

   이 버튼을 사용하면 선택한 위젯에서 Component을 만들 수 있습니다.

   

   Create a component

3. Save as a template

   이 버튼을 사용하면 선택한 위젯을 템플릿 위젯으로 저장할 수 있습니다.

   

   Save as a template

4. Save as a theme widget

   이 버튼을 누르면 선택한 위젯을 테마 위젯으로 저장할 수 있습니다.

   

   Save as a theme widget

5. Properties

   속성 탭에서는 수정할 수 있는 위젯 속성을 찾을 수 있습니다. 위젯이 선택되지 않은 경우 이 패널은 페이지 속성 (즉, Scaffold 속성)을 표시합니다. 사용 가능한 속성은 위젯 유형에 따라 다릅니다.

   페이지 요소에 대해서는, Visibility(가시성)가 유일한 공통 속성이며, 다른 속성은 선택한 위젯에 따라 다릅니다.

   기본 요소, 레이아웃 요소 및 양식 요소에 대해서는, Visibility(가시성), Padding(패딩) 및 Alignment(정렬) 속성이 공통적입니다. 나머지 속성은 선택한 위젯에 따라 다릅니다.

   공통 위젯 속성 중 일부를 수정하는 방법을 확인하세요.

6. Actions

   액션은 사용자가 앱 요소/위젯을 탭하는 등 상호 작용할 때 어떻게 작동해야 하는지 정의할 수 있게 해줍니다.

   <aside> 💡 위젯에 따라 작업이 다릅니다 (일부 위젯에서는 작업을 적용할 수 없습니다).

   </aside>

   액션 추가에 대해 더 알아보려면 여기를 참조하십시오.

7. Backend Query

   이를 사용하여 화면에 이 위젯이 나타날 때 트리거될 쿼리를 정의할 수 있습니다. 데이터가 로드되면이 위젯에있는 모든 위젯에서 액세스 할 수 있습니다.

   <aside> 💡 백엔드 쿼리를 추가하는 방법에 대해 더 알아보려면 여기를 확인하세요.

   </aside>

8. Generate Dynamic Children

   다중 자식 위젯을 처리할 수 있는 위젯은 추가 탭인 동적 자식 생성 탭이 있습니다. 이 탭은 List 변수에서 여러 자식 위젯을 생성하는 데 도움이 됩니다.

   <aside> 💡 이는 API 호출에서 데이터를 가져올 때 일반적으로 유용합니다.

   </aside>

   여러 자식을 처리할 수 있는 위젯 중 일부는 Column, Row, Stack, ListView, GridView, PageView입니다. 이 탭을 사용하여 값을 저장할 변수 이름, 최대 항목 수 및 값을 가져오는 데 사용할 소스를 선택할 수 있습니다(다른 위젯에서 쉽게 참조할 수 있도록).

   

   Generate Dynamic Children

9. Animations

   위젯에 애니메이션을 적용할 수 있습니다. 애니메이션 추가에 대해 더 배우려면 여기를 참조하세요.

10. Documentation and Semantic Labels

    여기에서 위젯에 대한 문서 및 시맨틱 레이블을 추가할 수 있습니다.

Page Properties

여기서 선택한 페이지의 속성을 맞춤 설정할 수 있습니다.

Page Properties

1. Page Properties

   페이지 속성을 사용하여 현재 페이지의 동작 및 모양을 변경할 수 있습니다. 다음과 같습니다:

   1. Background Color: 이것을 사용하여 페이지의 배경색을 변경하십시오.

      

      Changing the background color of the page

   2. Safe Area:이 속성은 노치, 상태 표시 줄 또는 기기별 둥근 모서리와 같은 시스템별 영역과 겹치지 않도록 레이아웃을 자동으로 조정하는 데 사용됩니다. 이 속성은 기본적으로 활성화되어 있어서 시스템 요소에 의해 가려지지 않고 앱의 콘텐츠가 볼 수 있고 접근 가능하도록 보장합니다.

      

   3. Hide Keyboard on Tap: 이 옵션은 모바일 애플리케이션에서 일반적으로 사용되는 동작을 구현하기 위해 기본적으로 활성화됩니다. 이 동작은 사용자가 TextField 위젯 외부를 탭하면 가상 키보드가 자동으로 사라지도록합니다. 이 기능은 사용자가 키보드를 쉽게 해제하고 앱의 다른 요소와 상호 작용할 수 있도록하여 사용자 경험을 개선합니다.

      <aside> 💡 현재 페이지에 대한 네비게이션 바 항목 속성도 구성할 수 있습니다. 네비게이션 바 설정 방법을 확인하세요.

      </aside>