캐릭터 페이지 디자인 하기
오늘 배울 것: 기본적인 페이지를 구성하는 방법에 대해 배움.
| 9강. 위젯정리 |
1. appbar
centerTitle : 타이틀의 위치 설정
elevation : 앱바의 입체감을 조절 함.
2. body
margin : 위젯 외부 여백
padding : 위젯 내부 여백
padding의 속성 중 자주 쓰이는 것
EdgeInsets.all
EdgeInsets.fromLTRB
mainAxisAlignment : 주 축 방향 정렬
crossAxisAlignment : 교차 축 방향 정렬
예:
Row에선 → main은 가로, cross는 세로
Column에선 → main은 세로, cross는 가로
★팁 : 위젯을 지우고 싶을 때는 클로짓 레이블에 있는 괄호부터 지우고,
이런 식으로 삭제.
column위젯: 세로축으로 높이 제약이 없으니 자식 위젯들이 마음대로 확장 가능
함수 - 소문자로 시작
class - 대문자로 시작
| 10강 실전코딩 part1 |
appBar 완성.
이제 body를 채울 차례임.
그런데 body의 배경 컬러를 채울 때는 body 위젯에 넣는 게 아니고
backgroundColor: Colors.amber[700]을
Scaffold 밑, appBar 위인
19번 줄에 넣음.
컨트롤+TextStyle위젯 클릭 → 텍스트 관련 디자인 속성들 뜸.
letterSpacing: 자간
fontSize
fontWeight: 폰트 두께
텍스트 위아래 간격 조정하고 싶으면 그 사이에 sizedBox 위젯 추가.
Column일 때 왼쪽 정렬 하고 싶으면 → CrossAxisAlignment.start (패딩값을 줘서 간격을 띄운다.)
| 11강 실전코딩 part1 |
아이콘과 텍스트 위젯을 가로로 나열할 것이기 때문에
Row 위젯을 쓴다.
요거를 복사해서 붙여넣기 해서
세 줄을 만들면 된다.
Gif 넣기
<이미지 등록하는 방법>
assets 폴더 생성
pubspec.yaml파일 들어가서
요 부분을 ctrl + / 를 눌러서 활성화 시키고
경로를 내가 만든 폴더명으로 재설정.
(두 칸 띄고) - assets/000.gif 요런 식으로.
<Divider 속성>
height: Divider를 기준으로 위아래 간격을 합친 높이
(예:
height가 60이면 위30, 아래 30을 의미함.)
endIndent : Divider 의 오른쪽 끝에 남기는 공간(여백)
강사가 패딩을 전체를 줘서
gif 이미지와 디바이더가 오른쪽으로 쏠려 있는데
이걸 제대로 해결 안하고 임시 방편으로 endIndent로 디바이더만 살짝 옮김
이미지는 여전히 쏠려 있음.
나중에 혼자 해결해봐야겠음.
<CircleAvatar 에서 이미지 배경 투명으로 처리하기>
다른 방법 없음, backgroundColor랑 같은 색으로 써주면 됨.
원랜 이렇게 뜨는데,
이렇게 backgroundColor인 amber[800]으로 바꿔주니까
이케 바뀜.
우측 상단 debug 빨간 띠 없애려면?
debugShowCheckedModeBanner: false, 추가.
끗.