일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- EC2 oh my zsh
- Logback
- Linux pwd
- linux foreground
- Linux oh my zsh
- Linux cd
- Linux 디렉터리 명령어
- Linux apt
- linux background
- Linux rmdir
- Linux cat
- HTTP Web Server
- EC2 HTTP 호스팅
- javascript scope
- UNPROTECTED PRIVATE KEY FILE
- EC2 zsh
- Linux 디렉터리 구조
- 서버의 서비스 방식
- Linux apt-get
- Linux ls
- ec2 ssh unprotected private key file
- 아비트럼 새폴리아 이더 받는법
- Linux 디렉터리 역할
- Linux 파일 관리 명령어
- AWS EC2 서버 만들기
- arbitrum sepolia eth
- Linux mkdir
- Navigation Pattern
- EC2 Apache2
- javascript 정렬
- Today
- Total
HyunJun 기술 블로그
Layout Widget) Sized Box, Container & Row, Column, Stack, Wrap 본문
Layout Widget
Layout Widget은 각가 다양한 방식으로 위젯들을 배치하고, 레이아웃을 구성하는 데 사용되는 위젯이다.
1. Sized Box & Container
SizedBox와 Container는 플러터(Flutter)에서 크기를 지정하는 데 사용되는 두 가지 다른 위젯이다.
1) Sized Box
SizedBox는 자식 위젯의 크기를 지정하는 위젯이다. 자식 위젯을 가지지 않고, 단지 너비와 높이를 지정하여 공간을 차지하는 용도로 사용된다. SizedBox는 주로 특정 크기의 간격을 만들거나, 일부 위젯들을 레이아웃에서 제어할 때 사용된다. 즉, Sized Box는 width, height, child 밖에 가지지 못한다.
return SizedBox(
width: 200,
height: 100,
child: Center(
child: Text("Hello Sized Box!"),
),
);
2) Container
Container 위젯은 플러터에서 가장 많이 사용되는 위젯 중 하나로, UI 요소를 감싸고 스타일을 적용하는 데 사용된다. Container 위젯은 다양한 매개변수를 받아서 다양한 스타일과 레이아웃을 지정할 수 있다.
Container 위젯의 매개변수들은 아래와 같은 것들이 있다.
- alignment: 컨테이너 내부의 자식 위젯의 정렬을 설정한다.
- padding: 컨테이너의 내부 여백을 설정한다.
- margin: 컨테이너의 외부 여백을 설정한다.
- color: 컨테이너의 배경색을 설정한다.
- width: 컨테이너의 너비를 설정한다.
- height: 컨테이너의 높이를 설정한다.
- decoration: 컨테이너의 장식을 설정한다. 여기에는 그라데이션, 경계선, 그림자 등이 포함될 수 있다.
- transform: 컨테이너의 변환 효과를 설정한다. 이동, 회전, 크기 조정 등이 가능하다.
- constraints: 컨테이너의 크기 제약을 설정한다. 최소 높이, 최대 너비 등을 지정할 수 있다.
- child: 컨테이너 내부에 배치될 자식 위젯을 지정한다.
return Container(
width: 200,
height: 100,
color: Colors.blue,
margin: EdgeInsets.all(10),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
alignment: Alignment.center,
child: Text(
'Hello, Container!',
style: TextStyle(color: Colors.white),
),
);
decoration
Container 위젯의 decoration 매개변수는 BoxDecoration 클래스를 받는다. BoxDecoration은 컨테이너의 배경을 꾸미는 다양한 스타일과 장식 요소를 설정할 수 있도록 해준다. 아래는 BoxDecoration의 주요 매개변수들이다.
- color: 컨테이너의 배경 색상을 설정한다.
- gradient: 그라데이션 효과를 설정한다. 선형 그라데이션, 방사형 그라데이션 등이 가능하다.
- border: 컨테이너의 경계선을 설정한다. 테두리의 두께와 색상을 지정할 수 있다.
- borderRadius: 컨테이너의 모서리를 둥글게 설정한다.
- boxShadow: 그림자 효과를 설정한다. 하나 이상의 그림자를 지정할 수 있다.
- image: 배경으로 사용할 이미지를 설정한다. 이미지는 DecorationImage 클래스를 통해 지정된다.
return Container(
width: 200,
height: 100,
margin: EdgeInsets.all(10),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red, width: 2),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
blurRadius: 5,
offset: Offset(0, 3),
),
],
),
child: Text(
"Hello, Container!",
style: TextStyle(color: Colors.white),
),
);
하지만 Sized Box와 Container는 child 즉, 1개의 자식 위젯 요소만 포함하므로, 자식으로 여러 개의 레이아웃(위젯)을 사용하지 못한다. 즉 아래와 같은 형태가 된다.
2. Row, Column, Stack, Wrap
자식 위젯 요소를 여러 개 포함하기 위해서는 지금부터 기술할 위젯들을 사용해야 한다.
1) Row
자식 위젯들을 가로축으로 정렬하여 배치한다.
2) Column
자식 위젯들을 세로축으로 정렬하여 배치한다.
3) Stack
Stack은 위젯들을 겹쳐서 배치할 수 있는 레이아웃 위젯이다. 가장 마지막에 추가된 위젯이 화면 상단에 나타나며, 이전에 추가된 위젯들은 그 아래로 겹쳐진다. 기본적으로 자식 위젯들은 겹쳐져서 표현되지만, Positioned 위젯을 사용하여 Stack 위젯의 왼쪽 상단을 기준으로 좌표를 설정하여 위치를 지정할 수 있다. Positioned 매개변수로 top, left, right, bottom 등을 사용하여 위치를 지정할 수 있으며, width, height를 사용하여 자식 위젯의 크기를 지정해 줄 수 있다.
return Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Positioned(
width: 200,
height: 200,
left: 200,
child: Container(
color: Colors.red,
)),
Positioned(
width: 200,
height: 200,
top: 200,
left: 0,
child: Container(
color: Colors.yellow,
)),
Positioned(
width: 200,
height: 200,
top: 200,
left: 200,
child: Container(
color: Colors.white,
)),
Positioned(
width: 200,
height: 200,
top: 100,
left: 100,
child: Container(
color: Colors.orange,
)),
],
);
4) Wrap
Wrap은 자식 위젯들을 가로 또는 세로 방향으로 자동으로 나열하는 레이아웃 위젯이다. 만약 자식 위젯들의 공간이 한 줄에 모두 들어가지 않을 경우, 자동으로 다음 줄로 넘어가게 된다.
Wrap(
spacing: 8.0,
runSpacing: 4.0,
children: [
Container(child: Text('Apple')),
Container(child: Text('Banana')),
Container(child: Text('Cherry')),
Container(child: Text('Durian')),
Container(child: Text('Grape')),
Container(child: Text('Kiwi')),
Container(child: Text('Lemon')),
Container(child: Text('Mango')),
Container(child: Text('Orange')),
],
);
기본적으로 가로로 정렬이 되고, direction: Axis.vertical 매개 변수 전달 시 세로로 정렬이 가능하다. 즉 기본값은 direction: Axis.horizontal이다.