앱 페이지를 디자인하기 위해 가장 기본이 되는 부분들을 살펴본다.
centerTitle, appbar backgroundcolor, appbar elevation, padding widget, mainAxisAlignment 등 많은 부분들을 써놨지만
딱히 어렵지는 않기에 하나하나 따라 하면 금방 익힐 수 있다.
CenterTitle
지난번 사용했던 코드에 추가하여 시작해본다.
AppBar의 title이 왼쪽에 치우쳐져 있는데 이것을 가운데로 정렬해 보자.
가운데 정렬이니까 center일까? 하고 쳐보니 centerTitle이라고 딱 추천해준다. 리턴은 bool이니 'true'
AppBar 하단을 보면 음영이 있는데 이 부분을 없애는 위젯도 있다. 있는게 나은 거 같은데
Padding widget, Column widget
Padding : 어떤 특정 지점으로부터 widget이 떨어져 있어야 할 때 사용
지난번 body부분은 안써줄거니까 지우고 이제 거기에 padding을 적용해보자.
LTRB는 짐작이 가겠지만 left, top, right, bottom의 줄임말이다. 해당 parameter는 double이므로 소수점으로 입력해보자.
왼쪽에서 30, 탑에서 40 떨어진 위치에서 세로로 위젯들을 배치해 보자.
다음은 정렬을 해보자.
Axis는 가로 세로 축의 축이란 의미이다. 이 속성은 앱스크린 내에서 위젯들을 가로나 세로축으로 상단 중단 하단 등에 정렬할 때 쓴다.
MainAxisAlignment. 뒤에는 여러 옵션이 있는데 하나씩 눌러보면 감이 올 것이다.
Center로 했는데 왼쪽에 치우쳐져 있는 이유는 Padding 안에서 사용을 했기 때문이다.
그러면 Padding을 지워보자.
아랫부분에 closing을 먼저 지우고 위에 Padding으로 돌아가서 Column전까지 지워주면 끝.
그러고 나서 center로 감싸 보자. 감싼다고? 무슨 소리인가 했더니 옆에 노란색 전구를 클릭했더니
아니 글쎄
와씨... 개발자들 만세 저거 클릭하니까 바로 센터로 감싸주네.
Center, Column 심화
Center는 Column과 만났을 때 Column을 중앙에 갖다 놓지만 세로축의 중앙까지 놓아주진 않는다.
그렇기 때문에 mainAxisAlignment를 사용하여 축의 중심으로 이동해야 하는 것이다.
mainAXisAlignment를 지우고 실행해보면 그림이 그려질 것이다.
마무리 복습
CenterTitle이 무엇인지에 대해 해 봤다. 리턴 값은 bool이기에 true로 써줬다.
Padding은 위젯을 특정 지점으로 부터 떨어뜨려 놓을 때 사용한다.
그 방법으로는 Column, mainAxisAlignment 등이 있었다.
Column은 세로로 위젯들을 배치하는 기능이고 mainAxisAlignment는 해당 축을 기준으로
어떻게 정렬할지를 정해준다.
오늘은 약간 지루했는데 다음 강의는 실전이라고 하니 기대해보며 넘어간다 ㅠ
틀린 점이나 궁금한 점이 있으면 댓글로 알려달라.
입문자라 아무것도 모르고 이상한 소리를
썼을 가능성이 매우 매우 농후하다.
궁금한 점은 댓글로 토론하며 정답을 찾아보자.
코딩 셰프님의 강의를 보고 공부 중입니다.
'우당탕탕 무작정 앱 개발하기' 카테고리의 다른 글
| Flutter 입문 5. 진짜 앱페이지 디자인2 (sizedbox, Icon, CircleAvatar) (1) | 2022.10.21 |
|---|---|
| Flutter 입문 4. 진짜 앱페이지 디자인(sizedbox, crossAxisAlignment) (4) | 2022.10.20 |
| Flutter 입문 2. Project 폴더의 구성, main widget의 기초, Scaffold (0) | 2022.10.18 |
| Flutter 입문 1. widget(stateless widget, stateful widget, Widget tree) (0) | 2022.10.17 |
| 일반인의 Flutter 앱개발 15. Dart(Stream 값 변형, async*, yield*) (0) | 2022.10.17 |