1. Row, Column 위젯
- 가장 많이 사용되는 layout 위젯
1. Row
-
가로방향으로 진행되는 레이아웃 이다. -
즉, Row에 Text children Hello, World 2개를 배치하면,
가로로 Hello, World가 배치된다. -
정렬속성 mainAxisAlignment도 당연히
가로정렬에 대한 속성이다. -
역으로 crossAxisAlignment는
세로정렬에 대한 속성이다.
2. Column
-
세로방향으로 진행되는 레이아웃 이다. -
Row 와는 반대로 Text children 2개를 배치하면,
세로로 Hello, World가 배치된다. -
당연히 main 정렬은
세로이고, cross 정렬은가로이다.
2. SizedBox 위젯
-
빈공간을 넣어주는 위젯이다.
-
height, width 속성을 이용해 가로 세로 크기를 조정가능하다.
3. Text 위젯
-
가장 많이 사용하는 위젯중 하나.
-
실제로는
style속성을 결정하는TextStyle이 가장 핵심이다.
1. TextStyle
-
색상, 크기, 굵기등을 조정할 수 있다.
-
색상 옵션에 withOpacity 메소를 사용하여 불투명도를 조정할 수 있다.
-
0.1 ~ 1 이런식으로 값을 설정하고, 1이면 불투명한 색상이다.
Text(
'Welcome back',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 18,
),
),4. Padding 위젯
-
상하/좌우에 여백(패딩)을 줄때 사용한다.
-
.only메소드를 이용하여, 각각 지정할 수 있다. -
또는
symmetric옵션을 이용하여,가로(horizontal),세로(vertical)대칭으로 여백을 줄 수 있다.
5. Container 위젯
-
html 의 div와 비슷한 위젯
-
decoration 속성을 이용하여 박스를 꾸밀수 있다.
-
아래는 둥그런 버튼을 Container 위젯을 통해 구현한 예제이다.
-
Container의 borderRadius 속성을 이용해서 둥그런 모양을 만든다.
-
박스의 크기를 조정하기 위해, child에 Text를 바로 사용하지 않고, Padding 처리후 Text를 사용했다.
-
clipBehavior 속성을 이용해, Container의 범위를 벗어나는 위젯을 어떻게 처리할것인지 지정할 수 있다.
-
아래 Transform 예제에서, 벗어나는 부분을 제거하기 위해 Clip.hardEdge 속성을 이용했다.
Container(
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(45),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
child: Text(
'Transfer',
style: TextStyle(
fontSize: 30,
),
),
),
),6. Transform 위젯
- 위젯을 변환(위치, 크기등)하는 위젯이다.
1. Transform.scale
-
크기를 변화시키는 위젯
-
scale 속성을 이용해서 크기를 변화시킬수 있다.
-
위젯 자체의 크기를 변화시키면
부모 위젯(예를들어 Container)의 크기도 함께 늘어나는 반면, -
Transform.scale 위젯을 사용하면
부모 위젯과는 무관하게 크기가 변경된다.
2. Transform.translate
-
위젯의 위치를 변화시키는 위젯
-
offset 속성을 이용해서, 이동 시킬 x, y 값을 적용 시킨다.
3. Container.clipBehavior: Clip.hardEdge 속성 적용후
7. Flexible 위젯
-
화면을
고정값이 아닌,비율로 나눈다. -
flex 값을 이용해서 전체 공간을 flex 값만큼의 값으로 나눈다.
Column(
children: [
Flexible(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: Colors.red,
),
),
),
Flexible(
flex: 2,
child: Container(
decoration: const BoxDecoration(
color: Colors.green,
),
),
),
Flexible(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: Colors.blue,
),
),
),
],
)
8. Expanded 위젯
- Column, Row 와 같이 가로/세로를 채우는 위젯에서 전체 공간을 채우는 위젯이다.
99. 관련 링크
1. ui-challenge haeder
2. ui-challenge button-section
