저번에 사용해 보았던 Container 위젯을 사용해보겠습니다.
decoration: BoxDecoration을 통해 배경 색, border 굵기 및 색 적용을 해볼거고,
borderRadius: BorderRadius.circular을 통해 둥글게 만드는 효과를 보겠습니다.
크기는 가로 300, 세로 600을 주겠습니다.
결과는 위와 같습니다.
이번에는 SizedBox를 사용해보겠습니다.
SizedBox는 color 속성이 없어서 child로 Container를 추가한 후 파랑색으로 설정해보았습니다.
그리고 분명 넓이를 50씩 주었는데 부모의 크기로 강제로 고정되는 느낌이라 Container로 바꿔도 보았는데
이것 역시 마찬가지였습니다.
아직 배우기 시작한지 얼마 안되서 잘 모르겠네요.. 좀 더 배운 후에 다시 고민해보겠습니다.
(고민의 흔적입니다.)
이번에는 padding을 사용해보겠습니다.
Container 두개를 사용하겠습니다.
padding을 50만큼 주면, 부모로부터 각 50만큼은 빈 공간이 됩니다. 여백을 주는건데,
기본적으로 자식을 추가하면 이 여백을 침범하지 않는 선에서 배치가 됩니다.
가로세로를 400,500씩 주었는데, padding이 50이니 자식의 넓이는 300* 400=1200이 되겠죠?
왜 가로세로가 100씩 빠지는지 아시겠나요?
마진과 패딩은 상하좌우가 각각 있어서 50이 두번씩 빠진답니다.
all 대신 fromLTRB를 사용하면 각각 설정할 수 있어요.
방향은 왼쪽부터 시계방향입니다.
이번에는 마진도 함께 적용해보겠습니다.
마진과 패딩을 둘다 중간의 Container에게 주었습니다.
살구색부분이 마진이 있는 부분이고, 푸른색 부분이 패딩이 있는 부분입니다.
동일하게 하되, 마진만 주고 패딩을 주지 않는 방법을 해보실 수 있겠나요?
한번 해보시고, 안되면 아래에서 정답을 확인해주세요!
맞추셨다면 이제 패딩만으로도 하실 수 있겠죠? 하지만 그건 넘어가도록 하겠습니다.
이번에는 화면이 꽉차도록 최상위 container의 넓이를 조절해보려합니다.
혹시 이걸 보고 문제 뭔지 아시겠나요?
children 위젯은 여러 위젯을 담을 수 있는데, 그중 하나인 Container에 width및 height를 infinity로 적용시킨게 문제인 것 같더군요. 그래서 고쳐보았습니다.
새로로 여러 child를 배치할 수 있던 것을, 하나의 child를 배치할 수 있게끔 바꿨습니다.
제가 화면을 꽉 채운 이유는 safeArea를 설명하기 위함인데,
스마트폰마다 생긴게 다르기 때문에 가려서 안보이는 경우가 생길 수가 있습니다.
그럴경우 이 safeArea를 사용하면 가리지 않도록 약긴의 패딩이 생기는 효과? 를 볼 수 있습니다.
상하좌우를 각각 설정할 수 있습니다. (top,botom,left,right)
다만, 크롬 화면은 완벽히 직육면체여서 사용해도 달라진게 안보입니다..
그래서 저번에 사용해보았던 안드로이드 에뮬레이터를 다시 꺼내보았습니다.
위쪽이 구부러져 있어서 조금 불편할 수 있겠죠?
그러면 이제 top을 true로 바꿔놓겠습니다.
위쪽에 여백이 생기며 살짝 내려온 느낌입니다.
이런식으로 SafeArea를 사용하면, 특정 스마트폰에서 위젯이 가릴 일이 없을거라 생각합니다.
이번에는 row 위젯과 column 위젯을 사용하여 3X3 컨테이너를 만들어보겠습니다.
Text를 사용해서 숫자로 1부터 9까지 넣어보겠습니다.
설계는 Row에 Container 3개를 가로 정렬하고,
각 Container는 child로 Column을 두는데, Conainer를 3개씩 세로 정렬하는 방식을 선택했습니다.
우선 주축이랑 반대축의 정렬 방법을 선택했습니다.
둘다 주축은 앞쪽을, 반대축은 중앙 정렬을 하도록 했습니다.
숫자를 직접 입력하지 않으려고 main에 i를 선언해두고
Text에 i를 넣으면서 증가 연산도 하도록 만들었습니다.
넓이랑 마진이랑 설정 해두었고, 색도 입혔습니다.
기본 틀은 다 만들었으니 열심히 복붙하고 마무리만 잘하면 끝날 것 같습니다.
보통 가로로 읽으니
1 2 3
4 5 6
7 8 9
로 보여야겠는데, 제가 Row랑 Column이랑 순서를 바꾸는 바람에 저렇게 나왔네요.
마무리를 다시 해봅시다!
추가로 가로세로 순서도 300,100으로 바꿨습니다.
Coulmn 정렬도 둘다 center로 바꿨습니다.
전체 코드는 아래와 같습니다.
import 'package:flutter/material.dart';
void main() {
int i=1;
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: SafeArea(
top: true,
bottom: true,
left: true,
right: true,
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 300,
height: 100,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
],
),
),
Container(
width: 300,
height: 100,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
],
),
),
Container(
width: 300,
height: 100,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
Container(
color: Color(0xfffedcba),
width: 50,
height: 50,
margin: EdgeInsets.all(25),
child: Center(
child:Text(
'${i++}',
),
)
),
],
),
),
],
),
),
),
),
),
)
);
}
마음같아서는 동적으로 추가하도록 바꾸고 싶지만, 아직은 책을 따라가며 기초지식을 먼저 쌓아두는게
중요하다고 생각합니다.
만약 동적으로 추가하도록 바꾸면 코드량이 8~9배 정도 줄어들지 않을까 예상해봅니다.
추가) MainAxisAlignment.spaceEvenly 혹은 MainAxisAlignment.spaceBetween이라는걸 사용하면 자식 위젯들의 간격을 균등하게 배치할 수 있다고 하네요.
차이점은 between은 양쪽 끝 위젯이 여백없이 부모에게 닿고, Evenly는 여백이 생기면서 부모에게 닿지 않습니다.
css의 space-around랑 space-between이랑 같은 효과라고 생각합니다.
이걸 쓰면 마진 설정 없이도 비슷하게 만들 수 있을 것 같습니다.
이번글은 여기서 마치겠습니다.
감사합니다~
'flutter 공부 기록소' 카테고리의 다른 글
| Flutter 공부 기록 12 (0) | 2023.06.24 |
|---|---|
| Flutter 공부 기록 11 (0) | 2023.06.23 |
| Flutter 공부 기록 8 (0) | 2023.06.20 |
| Flutter 공부 기록 7 (0) | 2023.06.19 |
| Flutter 공부 기록 6 (0) | 2023.06.18 |
