반응형
Container 위젯에 관한 내용입니다.
Container 위젯은 다양한 속성을 가진 상자 같은 시각적 요소를 생성하는 편리한 방법을 제공하는 다목적이며 일반적으로 사용되는 위젯입니다.
이는 Flutter 애플리케이션 내에서 레이아웃을 생성하고 하위 위젯을 배치하기 위한 기본 구성 요소입니다.
Container 위젯은 Flutter 프레임워크의 일부이며 라이브러리에서 찾을 수 있습니다.
Container 위젯의 주요 속성 기능
- 하위 위젯 ( Child Widget ): 컨테이너 위젯은 하나의 하위 위젯을 포함할 수 있으므로 그 안에 다른 위젯을 배치할 수 있습니다. 하위 위젯은 텍스트, 이미지 또는 다른 컨테이너와 같은 모든 유형일 수 있습니다.
- 정렬 ( Alignment ): Alignment 속성을 사용하여 컨테이너 내에서 하위 위젯의 정렬을 제어할 수 있습니다. 일반적인 정렬 옵션으로는 Alignment.center, Alignment.topLeft, Alignment.bottomRight 등이 있습니다.
- 패딩 ( Padding ): 패딩 속성을 통해 컨테이너 내의 자식 위젯 주변에 공간을 추가할 수 있으며, 각 면( 상, 우, 하, 좌 )에 대한 패딩 설정의 유연성을 제공하는 EdgeInsets로 패딩을 지정할 수 있습니다.
- 여백 ( Margin ): 마진 속성은 패딩과 비슷하지만 컨테이너 외부에 공간을 추가합니다. 컨테이너와 상위 위젯 또는 인접 위젯 사이의 공간을 제어합니다.
- 색상 및 장식 ( Color and Decoration ): 색상 속성을 사용하여 컨테이너의 배경 색상을 설정할 수 있습니다. 또한 decoration 속성을 사용하여 그라데이션, 테두리 및 배경 이미지와 같은 보다 복잡한 시각 효과를 적용할 수 있습니다.
- 너비 및 높이 ( Width and Height ): 너비 및 높이 속성을 사용하여 컨테이너의 너비 및 높이를 지정할 수 있으며, 제약 조건 속성을 사용하여 최소 및 최대 치수를 설정할 수도 있습니다.
- 변환 ( Transformations ): 변환 속성을 사용하면 회전, 축척배율 조정, 변환과 같은 2D 변환을 컨테이너에 적용할 수 있습니다.
- 클립 동작 ( Clip Behavior ): clipBehavior 속성을 사용하여 컨테이너 내에서 하위 위젯을 클리핑하는 방법을 제어할 수 있습니다. 이는 하위 위젯이 컨테이너의 경계를 초과하는 경우에 유용합니다.
Container() 위젯을 만드는 방법
return Container(
width: 100,
height: 100,
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(8),
color: Colors.red,
child: Center(
child: Text(
"hello World",
style: TextStyle(
color: Colors.white,
fontSize: 14
),
),
)
);
위 Container()는 아래처럼 중앙에 정렬된 텍스트 위젯을 포함하고 지정된 너비와 높이를 가진 붉은색 사각형을 만듭니다.
Container 위젯은 매우 다재다능하며 버튼과 카드부터 복잡한 레이아웃까지 광범위한 UI 요소를 만드는데 사용할 수 있습니다. 플러터 앱 내에서 하위 위젯의 크기, 정렬, 모양을 제어하는데 특히 유용합니다.
Column()
Column()은 수직 방향으로 위젯들을 나란히 배치하는 위젯입니다. 레이아웃의 대부분은 Column과 Row를 조합하여 만들기 때문에 매우 자주 사용됩니다.
Column(
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
],
),
Row()
Row()는 수평 방향으로 위젯들을 나란히 배치하는 위젯입니다.
Row(
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
],
)
mainAxis와 crossAxis
Column, Row와 같이 방향성이 있는 위젯은 mainAxis와 crossAxis 관련 프로퍼티가 있습니다.
Row(
// 가로로 꽉 채우기
mainAxisSize: MainAxisSize.max,
// 가로 방향으로 가운데 정렬하기
mainAxisAlignment: MainAxisAlignment.center,
// 세로 방향으로 가운데 정렬하기
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text(
"hello World",
style: TextStyle(
color: Colors.white,
fontSize: 14
),
),
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
],
)mainAxis는 위젯의 기본 방향을 나타냅니다. Row는 오른쪽, Column은 아래쪽이 mainAxis가 됩니다.
crossAxis는 기본 방향의 반대 방향을 나타냅니다. Row는 아래쪽, Column은 오른쪽이 crossAxis가 됩니다.
속성
| mainAxisSize | MainAxisSize | min | 최소 크기, 크기만큼만 차지합니다. |
| max | 최대 크기, 남은 공간을 모두 차지합니다. | ||
| mainAxisAlignment | MainAxisAlignment | center | 가운데 정렬을 합니다. |
| start | 왼쪽 정렬을 합니다. | ||
| end | 오른쪽 정렬을 합니다. | ||
| spaceEvenly | 영역을 고르게 정렬합니다. | ||
| spaceBetween | start, end 사이에 고르게 배치합니다. | ||
| spaceAround | 앞 / 뒤 공간을 두고 사이에 배치합니다. |
spaceEvenly, spaceBetween, spaceAround를 사용 했을때입니다.
Column(
children: [
Row(
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
margin: EdgeInsets.only(bottom: 10),
child: Text(
"default",
style: TextStyle(
color: Colors.white,
fontSize: 14
),
),
),
Container(
width: 100,
height: 100,
color: Colors.blue,
margin: EdgeInsets.only(bottom: 10),
),
Container(
width: 100,
height: 100,
color: Colors.green,
margin: EdgeInsets.only(bottom: 10),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
margin: EdgeInsets.only(bottom: 10),
child: Text(
"spaceAround",
style: TextStyle(
color: Colors.white,
fontSize: 14
),
),
),
Container(
width: 100,
height: 100,
color: Colors.blue,
margin: EdgeInsets.only(bottom: 10),
),
Container(
width: 100,
height: 100,
color: Colors.green,
margin: EdgeInsets.only(bottom: 10),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
margin: EdgeInsets.only(bottom: 10),
child: Text(
"spaceBetween",
style: TextStyle(
color: Colors.white,
fontSize: 14
),
),
),
Container(
width: 100,
height: 100,
color: Colors.blue,
margin: EdgeInsets.only(bottom: 10),
),
Container(
width: 100,
height: 100,
color: Colors.green,
margin: EdgeInsets.only(bottom: 10),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
margin: EdgeInsets.only(bottom: 10),
child: Text(
"spaceAround",
style: TextStyle(
color: Colors.white,
fontSize: 14
),
),
),
Container(
width: 100,
height: 100,
color: Colors.blue,
margin: EdgeInsets.only(bottom: 10),
),
Container(
width: 100,
height: 100,
color: Colors.green,
margin: EdgeInsets.only(bottom: 10),
),
],
),
],
)
Stack
Stack 위젯은 children에 나열한 여러 위젯을 순서대로 겹치게 합니다.
사진 위에 글자를 표현한다거나, 화면 위에 로딩 표시를 할 때 사용할 수 있습니다.
Stack(
children: [
Container(
width: 110,
height: 110,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
color: Colors.red,
),
Container(
width: 100,
height: 100,
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(8),
color: Colors.blue,
),
Container(
width: 80,
height: 80,
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(8),
color: Colors.green,
)
],
)
반응형
