FlutterFlow 기초 - #14 레이아웃 위젯 Expandable

레이아웃 위젯 Expandable위젯  사용방법

 익스팬더블(Expandable) 위젯은 특정 콘텐츠의 내용이 너무 길어 공간을 차지하는 경우 해당 내용을 접어 공간을 확보하기 위해 사용하는 위젯.

 

Expandable 위젯의 구조

1. Header : 익스팬더블 위젯의 내용을 알려주는 부분
2. Collapsed View : 접힌 상태에서 보여질 부분
3. Expanded View : 펴진 상태에서 보여질 부

 

Properties 설정하기

1) Padding & Alignment

• Expandable 전체의 Padding과 Ailgnment를 설정

2) Expandable Properties

• Active View : 내부 구성을 작업할 때 접힌상태(Collapsed) or 열린상태(Expanded)에서 작업 할 지를 선택
• Initially Expanded : 실제 화면을 사용할 때 초기 열린상태로 두고 싶으면 활성화
• Tap Header to Toggle : 활성화 시 헤더 부분을 탭하면 접힌상태와 열린상태로 전환이 되도록 설정
• Tap Body to Expand : 활성화 시 Collapse 부분을 터치하면 익스팬더블 위젯이 열림
• Tap Body to Collapse : 활성화 시 Expand 부분을 터치하면 익스팬더블 위젯이 닫힘

3) Style Properties

• Width & Height : 높이 및 넓이 설정
• Background Color : 배경색 설정
• Header Alignment : 헤더의 위치 설정(Top, Center, Bottom)

4) Icon Properties

• Has Icon : 기본으로 헤더 우측에 생성되는 아이콘으로 비활성화 시 아이콘을 제거
• Collapsed Icon : Collapsed 상태에서 보여질 아이콘(기본은 화살표가 아래로 표시된 아이콘)
• Expanded Icon : Expanded 상태에서 보여질 아이콘(기본은 화살표가 위로 표시된 아이콘)
• Icon Size & Color : 아이콘 크기 & 색상 설정
• Icon Padding : 아이콘에 패딩을 설정