플러터로 SNS어플 만들기 7.하드코딩으로 레이아웃잡기

지난포스트에서 아래처럼 포스트카드를 30개가량 리스트 뷰로 뿌려봤는데요

 

 

이번엔 포스트 카드를 좀 그럴듯하게 꾸며볼거에요. 인스타그램 모양처럼요

이렇게 위에서부터 column형태로 제목칸,사진칸,하트등 이모티콘,댓글

이런씩으로 되어있는거요.

 

오늘의 작업 내용

1. 일단 하드코딩으로 레이아웃 구성하기

 

2. 사진 넣어보기

 

3. 하드코딩으로 다른부분  꾸미기

 

4. ListView.separated 로 바꾸기

 

 

1.일단 하드코딩으로 레이아웃 구성하기

 

PostCard가 있는 클래스로 가서

내용을 이렇게 구며줬어요.

당연 나중에는 구성이 바뀌겟지만 우선적으로 보는거에요.

사진칸에는 height 를 400으로 줬지만, 우선 시각적으로 레이아웃을 볼려고 저렇게 임시적으로 해둔거고

사실 사진칸은 유저가 실제로 올린 사진의 비율을 따르게 될거에요

그다음 실제로 사진을 넣어볼게요.

 

2.사진 넣어보기

Image.network('사진주소') 를 사용했어요.

이렇게 사진이 바로 보여요.

 

그럼 같은사진말고 한 5장정도 랜덤으로 뿌려볼게요.

 

 

testImageList 라는 리스트를 만들어서

사진경로 주소 5개를 적어줬어요.

 

그리고 5개중에 랜덤으로 뽑아서 보여줄수잇도록 랜덤함수를 사용했어요.

nextInt(5) 라고 적혀있는데 이렇게하면 0 1 2 3 4 이렇게 0부터 5개를 랜덤으로 불러와요.

 

*이미지 주소에 http는 안되고 https 로 시작하는걸로 해주세요.

 

 

이런식으로 각사진에 맞는 비율로 나타나지면서 보여져요.

그럼 이제 다른 부분을 꾸며볼게요.

 

 

3. 하드코딩으로 다른부분  꾸미기

 

CircleAvatar 라는 위젯을 썻어요.

원형 도형에 사진넣는방법이야 많겠지만,

보통 SNS 뿐만아니라 다른곳에서도 이런거 많이 쓰잖아요

이건 아주 보편적으로 쓰이는 위젯이라 CircleAvatar 쓰면 간편해요

반지름이랑 backgroundImage라는 옵션을 저렇게 줘요.

 

그리고 아이디도 적당히 하드코딩으로 넣어주세요.

패딩도 좀주시구요.

 

그다음 중요한 부분이 오른쪽에 아이콘 부분인데 

레이아웃이 (얼굴사진+아이디) 부분과 제일오른쪽 아이콘 부분이 최끝 양쪽으로 떨어져 있게해야해요

이게 spaceBetween 이라는 거에요.

그래서 기존 Row에 또 Row를 입혀요.

그래서 최상단 Row에 spaceBetween 을 줘요.

 

위에사진과 비교해서 보시면되요.

 

최상단에 들어갈 아이콘은 우선 아무거나 해주세요. 나중에 바꾸게 될건데 지금 아이콘모양찾는데 시간쓰면 아까우니깐요 ^^;;

아이콘칸도 spacebetween을 통해 레이아웃 잡아주고 꾸며주세요.

여기서 indic 라고 적힌부분은 나중에 인디케이터가 들어갈거에요.

지금은 각 포스트에 사진이 한장밖에 없지만 오른쪽으로 스와이프했을때 사진이 바뀌잖아요

그거 염두해둔거에요.

 

밑에 좋아요칸 등등 모두 꾸며주세요.

지금 이부분은 어차피 나중에 바꿔야하고

지금은 그냥 레이아웃을 보기위해서 하드코딩으로 하고있어요.

 

각자 잘꾸며주세요.

저는 이렇게 아래처럼 했어요. 컨테이너 색상도 다 빼줬구요.

 

이렇게 하니 레이아웃상으로 좀 그럴듯하게 보이네요.

 

근데 이건 하드코딩이고 절대 이렇게 가만두면 안되겠죠?

사진및 모든 데이터를 데이터베이스에서 받아와야하고,

그 데이터 길이와 갯수에 맞게 바꿔줘야할거에요.

근데 그건 추후에 계속할거에요.

 

4. ListView.separated 로 바꾸기

 

일단은 지금 문제가, 각 포스트 간에 간격이 없어서 해깔린다는거에요. 경계선이 없다는거죠.

근데 경계선을 그어버리면 좀 이상해보이니 각 포스트간 간격을 그냥 줄거에요. 한 20픽셀정도 띄우면 될거같아요.

 

이것도 여러가지 방법이 있어요.

PostCard 위젯 내에서 맨 아래에 그냥 SizedBox(height: 20) 넣어도 되는데요,

 

저는 PostCard 를 뿌려주는 ListView 에서 해결하려고 합니다.

 

기존 ListView.builder 를 ListView.separated 로 바꿔주세요.

그리고 맨아래에 separatorBuilder 라는 옵션을 추가해주세요.

그리고 사이즈 박스를 주면 됩니다.

 

그러면 이렇게 포스트 사이에 간격이 생겼어요.

너무 넓은거 같죠? 그럼 20픽셀한걸 10으로 바꿔줍시다.

그리고 댓글달기 오른쪽에 저 아이콘도 인스타에 있는 그것과 대략 비슷하게 꾸며줍니다.

그럼 이렇게 돼요.

보면 레이아웃은 얼추 비슷해진거 같네요.

 

그럼이제 한포스트에 사진여러장있을때를 다루도록할게요.

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com