Container class
일반적인 페인팅, 위치 지정, 크기 조정 위젯을 결합한 편리한 위젯입니다.
컨테이너는 먼저 자식 요소를 패딩 ( 장식에 있는 테두리에 의해 팽창됨 )으로 둘러싼 다음, 패딩 된 범위에 추가 제약 조건을width 적용합니다( 그리고 둘 중 하나가 null이 아닌 경우 제약 조건으로 포함). 그런 다음 컨테이너는 여백 height 에서 설명된 추가 빈 공간으로 둘러싸입니다.
페인팅하는 동안 컨테이너는 먼저 주어진 변형을 적용한 다음 패딩 된 범위를 채우도록 장식을 칠하고, 그다음 자식을 칠하고, 마지막으로 패딩된 범위를 채우는 전경 장식을 칠합니다.
자식이 없는 컨테이너는 들어오는 제약 조건이 제한되지 않는 한 최대한 크게 만들려고 노력하지만, 제한되지 않은 경우에는 최대한 작게 만들려고 노력합니다. 자식이 있는 컨테이너는 자식 컨테이너의 크기에 맞춰 크기가 조정됩니다. 생성자에 대한 width, height, 및 제약 조건 인수는 이 인수를 재정의합니다.
기본적으로 컨테이너는 모든 적중 테스트에 대해 false를 반환합니다. color 속성이 지정되면 적중 테스트는 ColoredBox 에 의해 처리되며 , 항상 true를 반환합니다. decoration 또는 foregroundDecoration 속성이 지정되면 적중 테스트는 Decoration.hitTest 에 의해 처리됩니다.
공식 문서 코드
Flutter 를 처음 접했을 때 일단 맨 처음 접하는 것을 뽑아보라고 한다면 단연콘데 Container 가 거론될 것이다.
Container 는 배경색을 주고 싶거나 모양을 바꾸고 싶거나 크기 제한을 두고 싶을 때 사용된다.
Container 위젯은 하위 요소 위젯의 구성, 장식 그리고 위치를 정할 수 있도록 도와준다.
컨테이너는 기본적으로 '박스'라고 생각하면 편하다. 이제 화면 내에서 그 박스를 어떻게 꾸밀 건지 정할 수 있도록 하는 것인데 한번 한번 정말 쉽게 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| alignment | AlignmentGeometry? | null | 자식 위젯을 컨테이너 내에서 정렬할 위치 |
| padding | EdgeInsetsGeometry? | null | 데코레이션 내부에서 자식 위젯과의 여백 |
| color | Color? | null | 배경색을 지정할 때 사용, decoration과 동시에 사용할 수 없음 |
| decoration | Decoration? | null | 배경을 꾸미는 데 사용하는 장식 요소 |
| foregroundDecoration | Decoration? | null | 자식 위젯 위에 그려지는 장식 요소 |
| width | double? | null | 컨테이너의 너비, constraints와 함께 사용됨 |
| height | double? | null | 컨테이너의 높이, constraints와 함께 사용됨 |
| constraints | BoxConstraints? | null | 자식 위젯에 적용할 제약 조건 |
| margin | EdgeInsetsGeometry? | null | 컨테이너 외부의 여백 |
| transform | Matrix4? | null | 컨테이너에 적용할 변환 행렬 |
| transformAlignment | AlignmentGeometry? | null | transform 적용 시 기준이 되는 정렬 위치 |
| clipBehavior | Clip | Clip.none | decoration이 지정된 경우 적용할 클립 방식 |
| child | Widget? | null | 컨테이너 안에 배치할 자식 위젯 |
컨테이너는 기본적으로 크기를 가질 수 있는 위젯이다.
하지만 크기만을 가지는 위젯이냐 하면 '확실하게 아니다.'라고 말할 수 있다. 정확히는 크기와 색을 가질 수 있고 변형 가능한 위젯이 되겠는데 코드를 보자면
Container(
width: 100,
height: 100,
color: Colors.blue,
),이렇게 width 와 height 속성으로 크기를 지정해 줄 수 있다. 이로써 화면에 100 x 100 사이즈의 빈 박스가 생성이 되는데 여기에 color 속성으로 색을 먹여주면 현재 크기만 있는 상자에 색이 먹여지면서 이러한 모습이 나타나게 된다.
또한 '모양'도 변할 수 있다고 말했는데 모양을 변하게 하려면 decoration 속성을 사용해야 한다.
여기서 주의해야 할 점은 decoration 속성을 사용하게 되면 기존의 Container 바로 밑의 위치해 있는 color 속성은 사용하지 못하게 된다. 그 이유로는 decoration 에 넣어놓은 BoxDecoration 위젯 안에도 color 속성이 있어 서로 겹쳐서 오류가 발생하기 때문으로 decoration 속성을 사용 시 반드시 기본 color 를 지우고 BoxDecoration 안에 있는 color 속성을 사용해줘야 한다.
Container(
width: 100,
height: 100,
decoration: BoxDecoration( // decoration 속성 사용
shape: BoxShape.circle,
color: Colors.blue
),
),현재 BoxDecoration 위젯 안에 있는 shape 라는 속성의 값을 BoxShape.circle 로 설정해 놔서 컨테이너의 모양이 동그랗게 바뀌게 된다.
BoxDecoration 위젯을 조금 더 알아보자면 외곽선을 추가할 수도 있고 모서리를 둥글게 할 수 도 있다.
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 3), // stroke 추가
borderRadius: BorderRadius.all(Radius.circular(15)), // 래디우스 추가
color: Colors.blue
),
),
이 밖에도 gradient 라든가 boxShadow 값으로 그라디언트와 그림자를 먹여줄 수도 있다.
이 컨테이너의 모양을 진짜 막 바꿀 수도 있는데 trans 속성을 사용하여 Matrix4 위젯의 생성자를 사용해 주면 그러한 일들이 가능해진다.
(비스듬하게)
Container(
width: 100,
height: 100,
color: Colors.blue,
transform: Matrix4.skewX(12),
),
(회전)
Container(
width: 100,
height: 100,
color: Colors.blue,
transform: Matrix4.rotationZ(0.78),
),
위에서 알아본 것처럼 컨테이너 자체를 변형시킬 수도 있지만 child 속성을 활용하여 자식 위젯의 크기를 제한해주거나 위치를 잡아줄 수 도 있다.
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 3),
color: Colors.white
),
child: Text('컨테이너'),
),이렇게 작성하게 되면 일단 Text 위젯이 컨테이너의 자식이 되긴 한다만 조금 정렬이 이상하게 될 것이다.
이럴 때에는 Text를 Center 위젯으로 감싸는 방법도 좋겠지만 Container에 들어 있는 alignment 속성을 활용하여 자식 위젯의 정렬을 맞춰줄 수도 있다.
Container(
alignment: Alignment.center, // center 정렬!
width: 100,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 3),
color: Colors.white
),
child: Text('컨테이너'),
),
그런데 만약 자식 위젯의 크기가 없다면 어떻게 될까? 컨테이너의 자식은 기본적으로 컨테이너 크기를 전부 잡아먹는다.
Container(
alignment: Alignment.center, // center 정렬!
width: 100,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 3),
color: Colors.white
),
child: Container( // 이 위젯은 현재 크기가 없음
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle
),
)
),크기가 없지만 결과물은 부모 위젯인 Container의 크기를 그대로 상속받아 자신도 그 크기를 가지고 있는 모습이다.
이렇게 Container 위젯에 대해서 간단하게 알아보았다. 이 위젯은 정말 Flutter 위젯의 알파와 오메가인 만큼 이 언어로 개발을 시작하려 한다면 기본적으로 알고 있어야 하는 위젯이 되겠다. 암튼 도움이 되었길 바라며 마치겠다.
