지난번에 이어서 sizedbox 등을 사용하여 완성해보자.
지난 시간에는 sizedbox와 crossAxisAlignment 등을 사용해서 캐릭터 정보 페이지를 만들었는데
이번 시간에는 그 페이지를 완성해보자. Icon, CircleAvatar 등을 사용할 것이다.
우리가 완성하고자 하는 페이지 기억나는가?
지난번 작성했던 NAME, GANDA의 코드를 똑같이 아래에 복사하고
새롭게 만든 GANDA POWER LEVEL과 14 사이에 간격을 벌리기 위해 SizedBox를 30으로 설정해주자.
이제 기술 설명을 해보자.
Icon
빨간 박스를 보면 체크박스가 있고 그 옆에 텍스트가 있다. 이렇게 가로로 나열해야 할 때 쓰는
것이 Row이다.
새로운 건 Icon 외엔 없다. 나머지는 하던 대로 해준다. 출력해보니 문제가 있다.
GANDA POWER LEVEL과 기술의 간격이 너무 좁고, Icon과 기술명이 너무 가깝다.
세로 간격 벌리는건 많이 해봐서 답을 했을 것이다. SizedBox를 이용하자.
그렇다면 가로는? 가로도 SizedBox에 parameter를 보면 나와있다. width를 이용한다.
GANDA는 기술이 3개가 있기 때문에 Row를 복사해서 2개 더 붙여 넣기 하자. 붙이고 나서 콤마 잊지 마라!
이제 캐릭터를 앱 페이지 상단에 넣어보자.
CircleAvatar
이미지는 한 폴더 안에 넣어두고 불러오면 좋다.
프로젝트 폴더안에 images폴더를 만들어 보자.
프로젝트명에 오른 클릭 -> New -> Directory 후 폴더명을 지정해 주면 된다. Directory는 윈도우 이전 세대에서 쓰던 폴더라고 간단히 생각하고 넘어가자. 같은 거라고 생각하면 된다.
이미지 파일들을 안드로이드 스튜디오에 images로 드래그&드롭해줘도 되고 직접 찾아가서 파일을 넣어줘도 된다.
이제 오랜만에 pubspec.yaml로 들어가 assets을 찾자.
해당 부분이 주석 처리되어 있는데 #을 없애고 파일명을 동일하게 만들자.
난데없는 갈매기는 온라인에서 찾다 보니 부산시 캐릭터를 무료로 쓸 수 있다길래 가져와봤다.^^
ctrl + s를 눌러서 저장을 하고 main.dart로 돌아가자.
캐릭터는 맨 위에다가 넣을 것이다. 그리고 하얀 동그라미 안에 넣을 것이다.
기억이 안 날 수 있으니 맨 위로 가서 한번 보고 와라. 내가 그랬다^^
최상단이니 Column 맨 위로 가자. 위젯들 중 가장 상단이니 children바로 밑에 CircleAvatar Widget을 불러온다.
이 상태에서 Ctrl + Space를 누르면 사용할 수 있는 것들이 나열된다.
우린 backgroundImage를 사용해서 이미지를 불러올 것이다.
backgroundImage argument를 선택하고 AssetImage widget을 선택 후 아까 subspec.yaml 에서 지정해줬던 파일 경로를 정확히 입력해 주자. radius를 지정하지 않고 실행시켜보면 엄청 쪼꼬만 하게 나올 것이다.^^
그 후 CircleAvatar를 클릭하고 왼쪽에 나오는 전구로 center로 감싸주면?
와씨.. 이렇게만 했는데 앱 같아... 나 앱 만든 거 같아 어뜨카지 나
이제 구분선을 그어보자
캐릭터와 캐릭터 정보를 구분하기 위해 선을 그을 것이다.
코드는 어디에 추가하면 될까?
캐릭터와 NAME사이? 그렇다.
그런데 약간 아쉽다. 너무 오른쪽에 붙었고 두꺼웠으면 좋겠다.
간혹 오해하는 사람들이 있는데 바로 나 Divider에서 말하는 height는 Divider와 위쪽 widget과의 간격이 30 pixel, 아래 widget과의 간격이 30 pixel 인 것이다.
endIndent는 Divider가 끝에서 얼마나 떨어져야 하는지를 알려주는 속성이다 우리는 초반에 padding값을 왼쪽으로부터 30만큼 떨어뜨려놨었기에 동일하게 30.0으로 맞춰주자.
이제 맨 밑에 투명한 캐릭터 이미지를 넣어 보자.
투명한 줄 모르고 있다가 급하게 인터넷에서 찾았다. 무료로 배포해주셔서 감사합니다.
https://blog.naver.com/yesyes1023/221302578893
무료일러스트 남자아이 & 복실한 강아지(#7. 디자인레시피노트)
바삭한태양빛을 닮은 복실이는 항상 행복하답니다. 일러스트 바로다운받기& 복사해가기 1. 인쇄용이미...
blog.naver.com
위치는 맨 아래이므로 맨 아래 row로 간다.
Center 위젯을 만들어주고 똑같이 CirclaAvatar를 통해 이미지를 불러온다.
아무리 이미지가 투명이더라도 backgroundColor를 기존에 배경색과 맞춰주지 않는다면 다른 색으로 보일 것이다.
위로 올라가 배경색을 확인하고 purple [800]으로 맞춰주니 투명 배경효과 완성!
그런데 오른쪽 상단에 DEBUG라는 글자가 보인다. 말해주기 전까진 신경도 안 썼지만^^
외우자. MaterialApp에 debugShowCheckedModeBanner:False를 넣으면 되는구나^^
어제오늘 어마어마한 일을 했다. 진짜 무슨 어플 만든 거 같다. 별건 아닌데 기분이 좋다.
앞으로 많이 많이 만들어보고 경험치 쌓아서 내 어플도 만들어야겠다 눈누난나.
마무리
오늘은 sizedbox width, Icon 위젯, CircleAvatar 등을 사용해서 이미지도 추가하고 체크 서클도 만들어 보았다.
이렇게 만들어 진걸 보니 아무것도 없긴 한데 신기하기도 하고 재밌다.
Framework라는 걸 처음 써보는데 쓰기 편하게 잘 만든 것 같다.
다음 강좌도 기대하시라.
틀린 점이나 궁금한 점이 있으면 댓글로 알려달라.
입문자라 아무것도 모르고 이상한 소리를
썼을 가능성이 매우 매우 농후하다.
궁금한 점은 댓글로 토론하며 정답을 찾아보자.
코딩 셰프님의 강의를 보고 공부 중입니다.