[Flutter] 인스타그램 클론(3) - Home Page UI 작성

Home Page 화면 작성 - 아래의 화면이 오늘 디자인을 해야 할 목표입니다.

 

 

 

 

 

 

 

 

1. homepage 다트 파일 추가 및 기본 소스 작성

stl 위젯으로 추가하였습니다. 해당 화면에서는 상태 변경이 일어나지 않습니다.

 

 

2. home page 소스 수정

타이틀 부분을 표시하기 위해 앱바의 텍스트를 설정해줍니다.

 

3. tab page에 작성한 home page 사용

Tab Page의 소스를 수정하여 Page1인 Home 버튼이 눌려진 상태의 경우 이번 포스팅에서 작성하고 있는 Homepage를 사용할 수 있도록 수정하였습니다. Alt + Enter를 눌러서 home_page.dart를 Import 해 줍니다.

 

 

 

 

4. 수행 화면 1 - home page 사용

제목이 들어왔습니다. 하지만 배경색이나 글씨 색이 맨 위에서 제시된 이미지와는 다릅니다.

 

 

 

 

5. main.dart에서 테마 색상 지정

main.dart에서 이 앱의 전체 Theme에 대한 설정을 해 줍니다.

 

 

 

6. tab_page.dart에 fixedColor 설정해주기

그리고 전체 Theme에 영향을 받아 눌린 버튼의 이미지 색이 하얗게 보여 버튼 이미지가 보이지 않게 되는 문제를 막기 위해서 위와 같이 선택된 버튼의 색을 검은색으로 설정해줍니다.

 

 

 

<위의 작업을 하지 않았다면 나타나는 모습>

 

 

 

7. 수행화면 2 - 선택된 탭의 버튼이 검은색이 됨

 

 

 

 

 

8. Homepage 코드 추가 1

SafeArea로 패딩안을 감싸줍니다. 기기의 해상도가 디자인된 해상도보다 작은 경우 스크롤이 생기게 된다는 설명이 있었습니다. 그리고 그 안에는 칼럼으로 글자와 버튼을 배열하며 중앙에 카드를 추가하여 이미지와 이미지들을 또 배치할 예정입니다.

 

 

 

9. Homepage 코드추가 2

 

 

 

 

10. 수행화면 3 - 카드에 네트워크 이미지와 버튼이 정상적으로 들어가고 카드 영역 잡힘

 

 

 

 

 

11. Homepage 코드 추가 3 - 텍스트로 이메일과 이름 추가

추후에 해당 내용들을 소스코드가 수직으로 길어지면 중간중간 찾아 바꾸기 귀찮아서 한 번만 사용하겠지만 변수를 사용하여 작업하였습니다.

 

 

 

12. Homepage 코드 추가 4 - 사이즈 박스로 이미지 추가

 

 

 

13. 수행 화면 4 - 카드에 네트워크 이미지 3개 추가됨

 

 

 

 

14. Homepage 코드 추가 5 - 정렬 중앙으로

카드에 아래 나란히 표시된 3개의 이미지가 중앙이 아닌 왼쪽으로 쏠리지 않도록 하기 위해서 중앙 정렬을 해 줍니다.

또한 Image.network로 가져온 이미지에 속성으로 fit: BoxFit.cover를 줬는데 제가 가져온 이미지는 1:1 비율이지만 그렇지 않은 경우는 알맞게 표시를 해 주기 위해서 사용을 했습니다.

 

 

15. 수행 화면 5 - 카드에 네트워크 이미지 3개 가운데 정렬됨

 

 

 

 

 

 

 

 

16. Homepage 코드 추가 6 - 패딩 추가 및 안내 text추가

3개 이미지 사이사이에 약간의 간격을 위해 값을 1로 준 패딩을 사이사이 추가하였습니다.

 

 

 

17. 수행 화면 6 - 정돈

 

 

 

18. Homepage 코드 추가 7 - 패딩 추가 및 그림자 추가

elevation 값이 가이드로는 4.0 정도라고 설명을 해 주셨습니다.

그리고 column이라는  text앞에 커서를 두고 Alt + Enter를 누르면 팝업이 뜨면서 Add Padding이라는 항목이 있어서 해당 항목을 감싸는 패딩이 추가되었는데 저는 그 기능이 동작하지 않아서 칼럼의 소스 부분을 접어서(-) 잘라내기 한 후 패딩을 수기로 추가하고, 패딩 안에 child에 붙여 넣기 하여 패딩을 추가하였습니다.

 

위의 과정이 저와 같이 조금 번거로우시면 카드의 맨 위와 아래에만 패딩을 이미지 사이에 추가한 것처럼 추가해주는 것도 간단하게 처리할 수 있는 방법입니다.

 

 

 

 

 

 

19. 수행 화면 7 - 패딩과 그림자 추가

 

뭔가 단순하면서도 정말 앱 같은 느낌이 나는 디자인이 완성되었습니다.