상세 컨텐츠

본문 제목

FlutterFlow 기초 - #15 레이아웃 위젯 Wrap

앱 개발/개발 Tool

by 2^7 2025. 3. 17. 21:00

본문

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

 랩(Wrap) 위젯은 row위젯, column위젯에서 자식위젯을 배치할 때 배치 범위가 페이지 범위를 초과할 경우 스크롤되어 표시되지만, 랩위젯을 사용할 경우 한 화면에서 보일 수 있도록 자동으로 배치시켜주는 위젯(컨테이너 위젯과 함께 사용)

Properties 설정하기

1) Padding & Alignment

  • Wrap 전체의 Padding과 Ailgnment를 설정

2) Wrap Properties

  • Spacing & Run Spacing : Wrap 위젯 내부에 배치한 위젯들의 간격을 설정(Spacing는 좌우, Run Spacing는 상하)
  • Direction : 위젯들의 배치를 우선적으로 어떤 방향으로 배치할 것인지 설정
  • Alignment : 위젯들의 행 단위 정렬 방식을 설정
    • Start : 왼쪽 정렬
    • Center : 중앙 정렬
    • End : 오른쪽 정렬
    • Space Evenly : 각 위젯들간의 간격을 페이지의 범위에 따라 간격을 동일하게 정렬
    • Space Around : 각 위젯들을 중앙을 기준으로 좌우 간격을 동일하게 정렬
    • Space Betweeen : 각 위젯들을 양 끝을 기준으로 좌우 간격을 동일하게 정렬
  • Run Alignment : 위젯들의 행 단위 정렬 방식을 설정
  • Cross Axis Alignment : 두 축을 기준으로하는 위젯 정렬 방식을 설정
  • Vertical Direction : 정렬 방향을 Horizontal 선택 시 초기 정렬 위치를 설정
  • Clip Behavior : 랩 위젯 내 배치한 위젯들이 랩 위젯의 범위를 벗어난 경우 벗어난 위젯들을 숨김 처리 기능 
728x90

관련글 더보기