Column
행을 의미한다. 서로를 위 아래에 두고 싶을 때, column을 사용한다.
이 경우 하나의 Column에 두개의 child가 들어있는 형태로, 위에 child는 Hey,Selena를 표시하고 아래 child는 Welcome back을 표시한다. 코드는 아래와 같다.(사진의 파란색 박스는 내가 보기 편하게 임의로 표시한 것이다)
Column(
crossAxisAlignment: CrossAxisAlignment.end, // Column의 MainAxisAlignment는 수직 CrossAxisAlignment는 수평
children: [
// column에 들어가 있는 children들은 한칸씩 아래로 쌓임
const Text(
"Hey, Selena",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w800,
),
),
Text(
"Welcome back",
style: TextStyle(
color: Colors.white
.withOpacity(0.7), // withOpacity = 투명도
fontSize: 18,
),
),
],
)
또한 위의 사진에서 텍스트들이 모두 오른쪽으로 정렬이 되어있다. 이는 crossAxistAlignment 설정을 end로 주었기 때문이다. Column의 경우 Main, Cross의 방향은 다음과 같다.
- MainAxisAlignment: 수직
- CrossAxistAlignment: 수평
Row
말 그대로 열을 의미한다. 서로를 옆에 둘 때 사용한다.
색상
Colors
미리 정의된 다양한 색상을 찾아서 사용할 수 있다.
const Text(
"Hello World",
style: TextStyle(
color:Colors.red, // 이미 정의된 색 사용
),
)
- withOpacity(value): Colors.red.withOpacity(0.5)와 같은 형식으로 사용하며, 0~1까지 투명도를 선택할 수 있다.
(1: 불투명, 0: 투명)
Color
색상 코드를 이용해서 색상을 지정할 수 있다.
home: Scaffold(
backgroundColor: const Color(0xFF181818),
...
)
0xFF 뒤에 색상 코드를 붙이는 방식으로 색상을 입력할 수 있다.
Color.fromRGBO
home: Scaffold(
backgroundColor: const Color.fromRGBO(204, 170, 36, 61),
...
)
RGBO를 직접 명시해줄 수도 있다.
Padding
Center(
child: Container(
color: Colors.amber,
child: Padding(
padding: EdgeInsets.all(20),
child: Container(width: 50, height: 50, color: Colors.blue),
),
),
));
Padding을 설정할 부분을 Padding widget으로 둘러싼 후, padding 설정을 준다. 이때 패딩 위젯으로 둘러싸는 것은 code action(노란 전구 버튼)을 사용하면 쉽게할 수 있다.
padding은 EdgeInsets 클래스로 설정해주며 다음과 같은 종류가 존재한다.
EdgeInsets.all()
상하좌우에 padding 값을 일괄 적용한다.
EdgeInsets.all(5)
// left, right, top, bottom 의 padding 값은 모두 5가 적용이 된다.
EdgeInsets.only()
left, right, top, bottom 의 padding 값을 선택하여 적용한다.
EdgeInsets.only(left: 10, bottom: 5)
EdgeInsets.symmetric()
horizontal(left, right), vertical (top, bottom)의 padding 값을 적용한다.
dgeInsets.symmetric(vertical: 5, horizontal: 10)
//left, right의 padding 값은 10
//top, botton의 padding 값은 5가 적용이 됨
아이콘 추가
Column(
child: const Icon( // Icon 위젯으로 아이콘을 가져올 수 있음
Icons.euro_rounded,
color: Colors.white,
size: 98,
)
)
기존에 Column에 Text 위젯으로 글자를 표시하듯이, Icon 위젯으로는 아이콘(그림)을 표시할 수 있다. Text 위젯을 사용하는 것과 사용방식은 유사하다. 단지 글자가 아닌 이미지를 넣어주는 기능일 뿐이다.
위젯 위치 이동
Transform.translate(
offset: const Offset(8, 15), // x, y 방향으로 8,15 이동
child: const Icon(
Icons.euro_rounded,
color: Colors.white,
size: 98,
),
)
Transform.translate의 offset을 이용하여 위젯을 이동할 수 있다.
'Flutter' 카테고리의 다른 글
Flutter- Widget Life Cycle (0) | 2024.05.02 |
---|---|
Flutter- Widget (0) | 2024.03.31 |
Flutter- 공부#1 (0) | 2024.03.31 |