FlutterFlow 기초 - #4 레이아웃 위젯 Container

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

 컨테이너(Container) 위젯은 배경색, 자식위젯의 크기를 제한, 한 페이지에 다양한 레이아웃이나 위젯들을 구성할 때 등 다양한 용도로 사용하는 위젯

---

Properties 설정하기

1) Padding & Alignment

• Padding : 위젯 주변으로의 여백을 설정
  
  • 상하좌우에 각각 숫자를 입력하여 조절이 가능
• Alignment : 위젯에 위치한 자식 위젯들을 정렬
  • 총 9개의 점 중 원하는 위치를 클릭하면 해당 위치로 정렬
  • -1 ~ 1 사이의 숫자를 입력하여 위치를 조절이 가능 (0,0이 중앙 정렬)

2) Container Properties

• Container 모양 설정 : 컨테이너 기본 모형을 사각형 or 원형으로 설정 

• 가로(Width) & 높이(Height) : 컨테이너의 크기 설정

• 색상 : 컨테이너 채우기 색상, 외곽선 색상 설정

• Border Radius : 모서리 라운드 처리 (각 모서리를 개별로 설정하거나 일괄로 설정이 가능)

• Border Width : 모서리 두께 설정
• Elevation : 두께 설정(입체감 설정)

• 최소/최대 사이즈 설정

• Clip Content : 이미지를 컨테이너 크기와 모양에 맞게 자르기

 

3) Box Shadow

• Shadow Color : 그림자 색상 설정
• Blur : 흐림 정도
• Spread : 퍼짐 정도
• Offest X, Y : 그림자 위치

* Clip Content  활성화 시 그림자 효과는 적용되지 않음

4) Gradient

• Angle : 그라이언트 각도를 조절 (각도가 커질 수로 시계방향으로 돌아감)
• Color : 그라디언트에 사용 할 색상 설정
• Translition Point : 색상이 바뀌는 지점의 위치
  • 0~1 사이의 소수점을 입력
  • 값이 동일하면 제일 먼저 입력한 색상으로 표시 됨
  • 숫자가 작을수로 상단에 위치(각도가 0일 때 기준)
• Add Color : 그라디언트의 색상 수 추가(기본 2가지)

5) Background Image

• 컨테이너 안 이미지 삽입 (Image 위젯에서 Properties 설정 방법 참고)

6) Child

• Child Alignment : 자식 위젯 정렬
  • 초기에 위치를 설정하지 않는 경우 영역을 차지하는 위젯들의 경우 컨테이너의 사이즈에 맞게 설정됨